Lorem Framework - Yggdrasill

Visualizza quasi tutti i componenti di Bootstrap italia in una singola pagina.

Particolarmente utile per la personalizzazione del tema grafico e la creazione di nuove pagine.

Tipografia

Intestazioni

h1. Intestazione

h2. Intestazione

h3. Intestazione

h4. Intestazione

h5. Intestazione
h6. Intestazione
Intestazioni in evidenza

Titolo in evidenza 1

Titolo in evidenza 2

Titolo in evidenza 3

Titolo in evidenza 4

Badge

Titolo New

Titolo New

Titolo New

Titolo New

Titolo New
Titolo New
Elementi di testo inline

Elemento di un testo evidenziato.

Elemento di un testo cancellato.

Elemento di un testo non più valido.

Elemento di un testo aggiuntivo al documento.

Elemento di un testo sottolineato.

Elemento di testo con "righe piccole".

Elemento di un testo grassetto.

Elemento di un testo corsivo.

Liste senza stile
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
Liste inline
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Tabelle

Predefinita
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi
Compatta
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi
Bordatura e hover
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi
Righe alternate
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi

Griglie

Adattamento automatico
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Adattamento prefissato
.col-4
.col-8
.col-2
.col-4
.col-4
.col-2
.col-2
.col-10
.col-3
.col-6
.col-3

Elementi Form

Elementi di base

Gruppi di elementi
Bottoni
Header 1
Azione 1 Azione 2 Azione 3
Header 2
Azone 4
Azione 1 Azione 2 Azione 3
Azione 1 Azione 2 Azione 3
Azione 1 Azione 2 Azione 3
Azione 1 Azione 2 Azione 3
Azione 1 Azione 2 Azione 3
Alert

Componenti

Breadcrumb
Barre di avanzamento
25%
50%
100%
Paginazione
Modale
Tooltip
Popover
Tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab con icone

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Oggetto media
64x64
Testata Media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64
Testata media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64
Testata media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Card
100%x160
Titolo card molto lunga

This is a longer card Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
100%x160
Titolo card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ultimo aggiornamento 3 minuti fa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Titolo card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ultimo aggiornamento 3 minuti fa

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Titolo card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ultimo aggiornamento 3 minuti fa

Carousel
Jumbotron

Ciao, mondo!

Questa è una semplice unità hero, un semplice per richiamare un'attenzione particolare al contenuto o alle informazioni in primo piano.

Utilizza le classi di utilità per la tipografia e la spaziatura per l'ingombro del contenuto all'interno del contenitore più grande.

Per saperne di più

Hero

Ciao, mondo!

Questa è una semplice unità hero, un semplice per richiamare un'attenzione particolare al contenuto o alle informazioni in primo piano.

Utilizza le classi di utilità per la tipografia e la spaziatura per l'ingombro del contenuto all'interno del contenitore più grande.

Per saperne di più

Gruppo elenco
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Gruppo elenco link e bottoni
Gruppo elenco Flush
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Gruppo elenco con badge
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
  • Cras justo odio 21
  • Dapibus ac facilisis in 12
  • Morbi leo risus 41
Gruppo elenco custom
Intestazione
3 giorni fa

Donec id elit non mi porta gravida at eget metus.

Donec id elit non mi porta.
Intestazione
3 giorni fa

Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Intestazione
3 giorni fa

Donec id elit non mi porta gravida at eget metus.

Donec id elit non mi porta.