Decine di componenti riutilizzabili sono integrati in Bootstrap per fornire navigazione, avvisi, popover e molto altro.
Impaginazione ultra semplicistica e dallo stile minimale ispirata a Rdio, ottima per app e risultati di ricerca. Il blocco grande è difficile da perdere, facilmente scalabile e offre ampie aree di clic.
I collegamenti sono personalizzabili e funzionano in diverse circostanze con la classe giusta. .disabled
per i link non cliccabili e .active
per la pagina corrente.
Aggiungi una delle due classi facoltative per modificare l'allineamento dei collegamenti di impaginazione: .pagination-centered
e .pagination-right
.
Il componente di impaginazione predefinito è flessibile e funziona in una serie di varianti.
Avvolto in un <div>
, l'impaginazione è solo un file <ul>
.
- < classe div = "impaginazione" >
- <ul>
- <li><a href = "#" > Prec . </a></li>
- <li classe = "attivo" >
- <a href = "#" > 1 </a>
- </li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Avanti </a></li>
- </ul>
- </div>
Il componente pager è un insieme di collegamenti per semplici implementazioni di impaginazione con markup leggero e stili ancora più leggeri. È ottimo per siti semplici come blog o riviste.
Per impostazione predefinita, il cercapersone centra i collegamenti.
- <ul class = "cercapersone" >
- <li>
- <a href = "#" > Precedente </a>
- </li>
- <li>
- <a href = "#" > Avanti </a>
- </li>
- </ul>
In alternativa, puoi allineare ogni collegamento ai lati:
- <ul class = "cercapersone" >
- <li classe = "precedente" >
- <a href = "#" > ← Più vecchio </a>
- </li>
- <li classe = "successivo" >
- <a href = "#" > Più recente → </a>
- </li>
- </ul>
Etichette | Marcatura |
---|---|
Predefinito | <span class="label">Default</span> |
Successo | <span class="label label-success">Success</span> |
Avvertimento | <span class="label label-warning">Warning</span> |
Importante | <span class="label label-important">Important</span> |
Informazioni | <span class="label label-info">Info</span> |
Bootstrap fornisce un componente leggero e flessibile chiamato unità eroe per mostrare i contenuti sul tuo sito. Funziona bene su siti di marketing e ricchi di contenuti.
Avvolgi i tuoi contenuti in un div
modo simile:
- < classe div = "unità eroe" >
- <h1> Intestazione </h1>
- <p> Tagline </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Scopri di più
- </a>
- </p>
- </div>
Questa è una semplice unità eroe, un semplice componente in stile jumbotron per richiamare l'attenzione su contenuti o informazioni in primo piano.
Una semplice shell per h1
distanziare e segmentare in modo appropriato sezioni di contenuto in una pagina. Può utilizzare l' elemento h1
predefinito small
di , così come la maggior parte degli altri componenti (con stili aggiuntivi).
- <div class = "page-haeder" >
- <h1> Esempio di intestazione di pagina </h1>
- </div>
Per impostazione predefinita, le miniature di Bootstrap sono progettate per mostrare le immagini collegate con un markup minimo richiesto.
Con un po' di markup in più, è possibile aggiungere qualsiasi tipo di contenuto HTML come intestazioni, paragrafi o pulsanti nelle miniature.
Le miniature (in precedenza .media-grid
fino alla v1.4) sono ottime per griglie di foto o video, risultati di ricerca di immagini, prodotti al dettaglio, portafogli e molto altro. Possono essere collegamenti o contenuto statico.
Il markup delle miniature è semplice: un ul
numero qualsiasi di li
elementi è tutto ciò che serve. È anche super flessibile, consentendo qualsiasi tipo di contenuto con solo un po' più di markup per avvolgere i tuoi contenuti.
Infine, il componente miniature utilizza le classi del sistema di griglia esistenti, come .span2
o .span3
, per il controllo delle dimensioni delle miniature.
Come accennato in precedenza, il markup richiesto per le miniature è leggero e diretto. Ecco uno sguardo alla configurazione predefinita per le immagini collegate :
- <ul class = "miniature" >
- <li classe = "span3" >
- <a href = "#" class = "miniatura" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Per il contenuto HTML personalizzato nelle miniature, il markup cambia leggermente. Per consentire il contenuto a livello di blocco ovunque, sostituiamo il <a>
con un <div>
simile:
- <ul class = "miniature" >
- <li classe = "span3" >
- < classe div = "miniatura" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Etichetta miniatura </h5>
- <p> Didascalia della miniatura proprio qui... </p>
- </div>
- </li>
- ...
- </ul>
Con Bootstrap 2, abbiamo semplificato la classe base: .alert
invece di .alert-message
. Abbiamo anche ridotto il markup minimo richiesto: non <p>
è richiesto per impostazione predefinita, solo il markup esterno <div>
.
Per un componente più duraturo con meno codice, abbiamo rimosso l'aspetto differenziante per gli avvisi di blocco, i messaggi che vengono forniti con più spaziatura interna e in genere più testo. Anche la classe è cambiata in .alert-block
.
Bootstrap viene fornito con un ottimo plug-in jQuery che supporta i messaggi di avviso, rendendone il licenziamento rapido e semplice.
Avvolgi il tuo messaggio e un'icona di chiusura opzionale in un div con classe semplice.
- < classe div = "avviso" >
- <a class = "chiudi" data-dismiss = "avviso" > × </a>
- <strong> Attenzione! </strong> Meglio controllarti, non stai molto bene.
- </div>
Estendi facilmente il messaggio di avviso standard con due classi opzionali: .alert-block
per più riempimento e controlli di testo e .alert-heading
per un'intestazione corrispondente.
Meglio controllarti, non stai molto bene. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "blocco avvisi di avviso" >
- <a class = "chiudi" data-dismiss = "avviso" > × </a>
- <h4 class = "intestazione di avviso" > Attenzione! </h4>
- Meglio controllarti, non sei...
- </div>
- <div class = "avviso di errore di avviso" >
- ...
- </div>
- <div class = "avviso di esito positivo" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Barra di avanzamento predefinita con gradiente verticale.
- < classe div = "progresso" >
- < classe div = "barra"
- style = " larghezza : 60 %; " ></div>
- </div>
Usa una sfumatura per creare un effetto a strisce.
- <div class = "progress progresso-info
- a strisce di avanzamento" >
- < classe div = "barra"
- style = " larghezza : 20 %; " ></div>
- </div>
Prende l'esempio a strisce e lo anima.
- <div class = "progresso progresso-pericolo
- stato di avanzamento attivo" >
- < classe div = "barra"
- style = " larghezza : 40 %; " ></div>
- </div>
Le barre di avanzamento utilizzano alcuni degli stessi nomi di classe dei pulsanti e degli avvisi per uno stile simile.
.progress-info
.progress-success
.progress-danger
In alternativa, puoi personalizzare i file LESS e arrotolare i tuoi colori e dimensioni.
Le barre di avanzamento utilizzano transizioni CSS3, quindi se regoli dinamicamente la larghezza tramite javascript, verrà ridimensionata senza problemi.
Se usi la .active
classe, le .progress-striped
barre di avanzamento animeranno le strisce da sinistra a destra.
Le barre di avanzamento utilizzano gradienti, transizioni e animazioni CSS3 per ottenere tutti i loro effetti. Queste funzionalità non sono supportate in IE7-8 o versioni precedenti di Firefox.
Opera non supporta le animazioni in questo momento.
Usa il pozzo come effetto semplice su un elemento per dargli un effetto di inserto.
- < classe div = "bene" >
- ...
- </div>
Usa l'icona di chiusura generica per ignorare contenuti come modali e avvisi.
- <a class = "chiudi" > × </a>