Esempi di avvio rapido

Hai bisogno di alcuni modelli veloci? Dai un'occhiata a questi esempi di base che abbiamo messo insieme:

Griglia predefinita

Il sistema di griglia predefinito fornito come parte di Bootstrap è una griglia a 16 colonne larga 940px. È un assaggio del popolare sistema a griglia 960, ma senza il margine/padding aggiuntivo sui lati sinistro e destro.

Esempio di markup della griglia

Come mostrato qui, è possibile creare un layout di base con due "colonne", ciascuna che copre un numero di 16 colonne di base che abbiamo definito come parte del nostro sistema di griglia. Vedere gli esempi seguenti per ulteriori variazioni.

< classe div = "riga" > 
  < classe div = "span6" > 
    ...
  </div>
  < classe div = "span10" > 
    ...
  </div>
</div>

Colonne di nidificazione

Annida i tuoi contenuti, se necessario, creando un .rowall'interno di una colonna esistente.

Esempio di colonne nidificate

< classe div = "riga" > 
  < classe div = "span12" > 
    Livello 1 della colonna
    < classe div = "riga" > 
      < classe div = "span6" > 
        Livello 2
      </div>
      < classe div = "span6" > 
        Livello 2
      </div>
    </div>
  </div>
</div>

Tira la tua griglia

In Bootstrap sono integrate alcune variabili per la personalizzazione del sistema di griglia predefinito da 940 pixel. Con un po' di personalizzazione, puoi modificare le dimensioni delle colonne, delle loro grondaie e del contenitore in cui risiedono.

Dentro la griglia

Le variabili necessarie per modificare il sistema della griglia attualmente risiedono tutte in preboot.less.

Ora da personalizzare

Modificare la griglia significa cambiare le tre @grid-*variabili e ricompilare i file Less.

Bootstrap è attrezzato per gestire un sistema a griglia con un massimo di 24 colonne; il valore predefinito è solo 16. Ecco come apparirebbero le variabili della griglia personalizzate su una griglia a 24 colonne.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Una volta ricompilato, sarai pronto!

Disposizione fissa

Il layout centrato e di 940 px di larghezza di default per quasi tutti i siti Web o le pagine forniti da un singolo file <div.container>.

<corpo>
  < classe div = "contenitore" > 
    ...
  </div>
</corpo>

Disposizione fluida

Una struttura della pagina fluida alternativa e flessibile con larghezze minime e massime e una barra laterale sinistra. Ottimo per app e documenti.

<corpo>
  < classe div = "fluido contenitore" > 
    < classe div = "barra laterale" > 
      ...
    </div>
    < classe div = "contenuto" > 
      ...
    </div>
  </div>
</corpo>

Intestazioni e copia

Una gerarchia tipografica standard per strutturare le tue pagine web.

L'intera griglia tipografica si basa su due variabili Less nel nostro file preboot.less: @basefonte @baseline. La prima è la dimensione del carattere di base utilizzata in tutto e la seconda è l'altezza della linea di base.

Usiamo queste variabili, e un po' di matematica, per creare i margini, i padding e le altezze delle linee di tutti i nostri tipi e altro ancora.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Esempio paragrafo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Esempio di intestazione Ha un sottotitolo...

Varie elementi

Utilizzo di enfasi, indirizzi e abbreviazioni

<strong> <em> <address> <abbr>

Quando usare

I tag di enfasi ( <strong>e <em>) dovrebbero essere utilizzati per indicare un'importanza o un'enfasi aggiuntiva di una parola o frase rispetto alla copia circostante. Utilizzare <strong>per l'importanza e <em>per enfatizzare lo stress .

Enfasi in un paragrafo

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenate faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: è ancora possibile utilizzare <b>e <i>tag in HTML5 e non devono essere contrassegnati rispettivamente in grassetto e corsivo (sebbene se esiste un elemento più semantico, utilizzalo). <b>ha lo scopo di evidenziare parole o frasi senza dare ulteriore importanza, mentre <i>è principalmente per voce, termini tecnici, ecc.

Indirizzi

L' <address>elemento viene utilizzato per le informazioni di contatto per il suo antenato più vicino o per l'intero corpo del lavoro. Ecco due esempi di come potrebbe essere utilizzato:

Nota: ogni riga in un <address>deve terminare con un'interruzione di riga ( <br />) o essere racchiusa in un tag a livello di blocco (ad esempio, <p>) per strutturare correttamente il contenuto.

Abbreviazioni

Per abbreviazioni e acronimi, utilizzare il <abbr>tag ( <acronym>è deprecato in HTML5 ). Inserisci il modulo abbreviato all'interno del tag e imposta un titolo per il nome completo.

Citazioni in blocco

<blockquote> <p> <small>

Come citare

Per includere una citazione in blocco, avvolgi <blockquote>e <p>tagga <small>. Usa l' <small>elemento per citare la tua fonte e otterrai un trattino —prima.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Il dottor Julius Hibbert

<citazione in blocco>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Non ordinato<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Intero molestie lorem a massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibolo laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Senza stile<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Intero molestie lorem a massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibolo laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ordinato<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Intero molestie lorem a massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Descrizionedl

Elenchi di descrizione

Un elenco di descrizioni è perfetto per definire i termini.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Codice

<code> <pre>

Migliora il tuo codice con stile con due semplici tag. Per ancora più stupore tramite javascript, inserisci la libreria di prettify del codice di Google e sei pronto.

Codice di presentazione

Il codice, i blocchi o solo gli snippet in linea possono essere visualizzati con stile semplicemente avvolgendo il tag giusto. Per blocchi di codice che si estendono su più righe, utilizzare l' <pre>elemento. Per il codice inline, usa l' <code>elemento.

<div>
  <h1>Intestazione</h1>
  <p>Qualcosa proprio qui...</p>
</div>

<div> <h1> Intestazione </h1> <p> Qualcosa proprio qui... </p> </div>
  
  

Etichette in linea

<span class="label">

Richiama l'attenzione o segnala qualsiasi frase nel corpo del testo.

Etichetta qualsiasi cosa

Mai avuto bisogno di uno di quei nuovi fantasiosi ! o Flag importanti durante la scrittura del codice? Bene, ora li hai. Ecco cosa è incluso per impostazione predefinita:

Griglia multimediale

Visualizza miniature di varie dimensioni su pagine con un footprint HTML ridotto e stili minimi.

Esempio di miniature

Le miniature .media-gridpossono essere di qualsiasi dimensione, ma funzionano meglio se mappate direttamente sul sistema di griglia Bootstrap integrato. Le larghezze dell'immagine come 90, 210 e 330 si combinano con alcuni pixel di riempimento per eguagliare le dimensioni .span2, .span4e delle .span6colonne.

Di grandi dimensioni

medio

Piccolo

Codificarli

Le griglie multimediali sono facili da usare e piuttosto semplici dal lato del markup. Le loro dimensioni si basano esclusivamente sulla dimensione delle immagini incluse.

<ul class = "griglia multimediale" > 
  <li>
    <a href = "#" > 
      <img class = "miniatura" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "miniatura" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Costruire tavoli

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

I tavoli sono fantastici, per molte cose. Le grandi tabelle, tuttavia, hanno bisogno di un po' di attenzione per il markup per essere utili, scalabili e leggibili (a livello di codice). Ecco alcuni suggerimenti per aiutare.

Avvolgi sempre le intestazioni di colonna in modo <thead>tale che la gerarchia sia <thead>> <tr>> <th>.

Simile alle intestazioni di colonna, tutto il contenuto del corpo della tabella dovrebbe essere racchiuso in un <tbody>modo che la tua gerarchia sia <tbody>> <tr>> <td>.

Esempio: stili di tabella predefiniti

Tutte le tabelle verranno automaticamente stilizzate con solo i bordi essenziali per garantire la leggibilità e mantenere la struttura. Non c'è bisogno di aggiungere classi o attributi aggiuntivi.

<tabella>
  ...
</tabella>

Esempio: zebrato

Crea un po' di fantasia con i tuoi tavoli aggiungendo strisce zebrate: aggiungi semplicemente la .zebra-stripedclasse.

Nota: lo striping Zebra è un miglioramento progressivo non disponibile per i browser meno recenti come IE8 e precedenti.

< classe tabella = "a strisce zebrate" > 
...
</tabella>

Esempio: strisce zebrate con TableSorter.js

Prendendo l'esempio precedente, miglioriamo l'utilità delle nostre tabelle fornendo funzionalità di ordinamento tramite jQuery e il plug-in Tablesorter . Fare clic sull'intestazione di qualsiasi colonna per modificare l'ordinamento.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funzione () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< classe tabella = "a strisce zebrate" > 
  ...
</tabella>

Stili predefiniti

A tutti i moduli vengono assegnati stili predefiniti per presentarli in modo leggibile e scalabile. Gli stili sono forniti per input di testo, elenchi di selezione, aree di testo, pulsanti di opzione, caselle di controllo e pulsanti.

Moduli impilati

Aggiungi .form-stackedall'HTML del tuo modulo e avrai le etichette in cima ai loro campi invece che alla loro sinistra. Funziona benissimo se i tuoi moduli sono brevi o hai due colonne di input per moduli più pesanti.

Dimensioni campo modulo

Personalizza qualsiasi modulo input, selecto textarealarghezza aggiungendo solo alcune classi al tuo markup.

A partire dalla v1.3.0, abbiamo aggiunto le classi di dimensionamento basate sulla griglia per gli elementi del modulo. Si prega di utilizzare questi sulle classi esistenti .mini, .small, ecc.

Bottoni

Per convenzione, i pulsanti vengono utilizzati per le azioni mentre i collegamenti vengono utilizzati per gli oggetti. Ad esempio, "Download" potrebbe essere un pulsante e "attività recenti" potrebbe essere un collegamento.

Per impostazione predefinita, tutti i pulsanti hanno uno stile grigio chiaro, ma è possibile applicare un certo numero di classi funzionali per stili di colore diversi. Queste classi includono una .primaryclasse blu, una classe azzurra .info, una classe verde .successe una classe rossa .danger.

Esempio di pulsanti

Gli stili dei pulsanti possono essere applicati a qualsiasi cosa con .btnapplicato. In genere ti consigliamo di applicarli solo a <a>, <button>e selezionare <input>elementi. Ecco come appare:

Dimensioni alternative

Ti piacciono i pulsanti più grandi o più piccoli? Fallo!

Stato disabile

Per i pulsanti che non sono attivi o sono disabilitati dall'app per un motivo o per l'altro, utilizzare lo stato disabilitato. Questo è .disabledper i collegamenti e :disabledper <button>gli elementi.

Collegamenti

Bottoni

Che cos'è

La nostra barra superiore è una barra fissa che ospita il logo o il nome di un sito Web, la navigazione principale e il modulo di ricerca.

Personalizzabile

Tutti gli elementi all'interno, e anche l'intera barra in alto, sono opzionali. Puoi scegliere di includere un logo/nome, nav, ricerca e un nav secondario o qualsiasi combinazione di questi.

Dropdown inclusi

Come parte della navigazione principale, abbiamo incluso la possibilità di aggiungere menu a discesa al tuo nav. Controlla il nav secondario sopra (allineato a destra) per vedere come è fatto. liI tag dei menu a discesa supportano anche la .activevisualizzazione della selezione della pagina corrente.

Compresse e pillole

Crea una semplice navigazione secondaria con un file <ul>. Scambia tra schede o pillole aggiungendo la classe appropriata.

Ottimo per sottosezioni di contenuti come le nostre pagine delle impostazioni dell'account e le tempistiche degli utenti per passare da una pagina a un'altra con contenuti simili. Disponibile in stili a schede o pillola.

• Casa
• Profilo
• Messaggi
• Impostazioni
• Contatto
• Cadere in picchiata
  • Collegamento secondario
  • Qualcos'altro qui
  • Un altro collegamento

<ul class = "schede" > 
  <li class = "attivo" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profilo </a></li> 
  <li><a href = "#" > Messaggi </a></li> 
  <li><a href = "#" > Impostazioni </a></li> 
  <li><a href = "#" > Contatto </a></li> 
</ul>

• Casa
• Profilo
• Messaggi
• Impostazioni
• Contatto

<ul class = "pillole" > 
  <li class = "attivo" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profilo </a></li> 
  <li><a href = "#" > Messaggi </a></li> 
  <li><a href = "#" > Impostazioni </a></li> 
  <li><a href = "#" > Contatto </a></li> 
</ul>

Briciole di pane

La navigazione breadcrumb viene utilizzata per mostrare agli utenti dove si trovano all'interno di un'app o di un sito, ma non per la navigazione principale.

• Casa

• casa /
• Pagina di mezzo

• casa /
• Pagina centrale /
• Un altro

• casa /
• Pagina centrale /
• Un altro /
• Tu sei qui

<ul class = "briciole di pane" > 
  <li><a href = "#" > Home </a> <span class = "divisore" > / </span></li>   
  <li><a href = "#" > Pagina centrale </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Un altro </a> <span class = "divider" > / </span></li>   
  <li class = "attivo" > Sei qui </li> 
</ul>

Impaginazione

Impaginazione ultra semplicistica e dallo stile minimale ispirata a Rdio. Il blocco grande è difficile da perdere, facilmente scalabile e offre ampie aree di clic.

< classe div = "impaginazione" > 
  <ul>
    <li class = "prec disabilitato" ><a href = "#" > ← Precedente </a></li>  
    <li class = "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 = "#" > 5 </a></li> 
    <li class = "successivo" ><a href = "#" > Avanti → </a></li>  
  </ul>
</div>

Avvisi di base

.alert-message

Messaggi di una riga per evidenziare il fallimento, il possibile fallimento o il successo di un'azione. Particolarmente utile per i moduli.

Ottieni il javascript »

Codice di esempio

<div class = "avviso di messaggio di avviso" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Santo guacamole! </strong> Meglio controllarti, non stai molto bene. </p>
</div>

Blocca i messaggi

.alert-message.block-message

Per i messaggi che richiedono un po' di spiegazione, abbiamo avvisi sullo stile del paragrafo. Questi sono perfetti per generare messaggi di errore più lunghi, avvisare un utente di un'azione in sospeso o semplicemente presentare informazioni per dare maggiore enfasi alla pagina.

Ottieni il javascript »

Codice di esempio

<div class = "avviso messaggio di blocco messaggio di avviso" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Santo guacamole! Questo è un avvertimento! </strong> Meglio controllarti, non stai molto bene. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  < classe div = "azioni di avviso" > 
    <a class = "btn small" href = "#" > Esegui questa azione </a> <a class = "btn small" href = "#" > Oppure esegui questa operazione </a>     
  </div>
</div>

Modali

I modali, finestre di dialogo o lightbox, sono ottimi per azioni contestuali in situazioni in cui è importante mantenere il contesto in background.

Ottieni il javascript »

Suggerimenti

I Twipsies sono super utili per aiutare un utente confuso e indirizzarlo nella giusta direzione.

Ottieni il javascript »

Popover

Usa i popover per fornire informazioni sottotestuali a una pagina senza influire sul layout.

Ottieni il javascript »

Iniziare

L'integrazione di javascript con la libreria Bootstrap è semplicissima. Di seguito esaminiamo le basi e ti forniamo alcuni fantastici plugin per iniziare!

Visualizza i documenti javascript »

Cosa è incluso

Dai vita ad alcuni dei componenti primari di Bootstrap con i nuovi plugin personalizzati che funzionano con jQuery ed Ender . Ti invitiamo ad estenderli e modificarli per adattarli alle tue esigenze di sviluppo specifiche.

Javascript è necessario?

No! Bootstrap è progettato prima di tutto per essere una libreria CSS. Questo javascript fornisce un livello interattivo di base sopra gli stili inclusi.

Tuttavia, per coloro che hanno bisogno di javascript, abbiamo fornito i plug-in sopra per aiutarti a capire come integrare Bootstrap con javascript e per offrirti subito un'opzione rapida e leggera per le funzionalità di base.

Per ulteriori informazioni e per vedere alcune demo dal vivo, fare riferimento alla nostra pagina di documentazione del plug -in .