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.

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

Disposizione fissa

Un layout contenitore centrato e largo 940 pixel per quasi tutti i siti o le pagine.

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

Disposizione fluida

Una struttura della pagina fluida o liquida flessibile con larghezze minime e massime e una barra laterale sinistra. Ottimo per le app.

<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.

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...

Puoi anche aggiungere sottotitoli con <strong>e<em>

Varie elementi

Utilizzo di enfasi, indirizzi e abbreviazioni

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

Quando usare

I tag di enfasi ( <strong>e <em>) dovrebbero essere usati per aggiungere una distinzione visiva tra una parola o una frase e la sua copia circostante. Utilizzare <strong>per la semplice vecchia attenzione e <em>per l' attenzione e i titoli lucidi.

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.

Indirizzi

L' addresselemento è usato per—avete indovinato!—indirizzi. Ecco come appare:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nota: ogni riga in un addressdeve terminare con un'interruzione di riga ( <br />) per strutturare correttamente il contenuto così come viene letto nella vita reale senza alcuno stile applicato.

Abbreviazioni

Per abbreviazioni e acronimi, utilizzare il abbrtag ( 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> <cite>

Assicurati di avvolgere il tuo blockquoteintorno paragraphe i citetag. Quando si cita una fonte, utilizzare l' citeelemento. Il CSS premette automaticamente un nome con un trattino em (—).

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

Il dottor Julius Hibbert

Non ordinato<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• I miei compagni di squadra
  • Giorgio Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Uomo nuovo
• Giovanni Giacobbe
• Paolo Pierce
• Kevin Garnett

Senza stile<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• I miei compagni di squadra
  • Giorgio Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Uomo nuovo
• Giovanni Giacobbe
• Paolo Pierce
• Kevin Garnett

Ordinato<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. I miei compagni di squadra
   1. Giorgio Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Uomo nuovo
6. Giovanni Giacobbe
7. Paolo Pierce
8. Kevin Garnett

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.

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 theadtale che la gerarchia sia thead> tr> th.

Simile alle intestazioni di colonna, tutto il contenuto del corpo della tabella dovrebbe essere racchiuso in un tbodymodo 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.

#	Nome di battesimo	Cognome	Lingua
1	Alcuni	Uno	inglese
2	Gio	Confezione da sei	inglese
3	Stu	Ammaccatura	Codice

<table class="tabella-comune"> class = "tabella comune" >
  ...
</tabella>

Esempio: zebrato

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

#	Nome di battesimo	Cognome	Lingua
1	Alcuni	Uno	inglese
2	Gio	Confezione da sei	inglese
3	Stu	Ammaccatura	Codice

<table class="tavolo comune zebrato"> class = "tavola comune zebrata" >
...
</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.

#	Nome di battesimo	Cognome	Lingua
1	Tuo	Uno	inglese
2	Gio	Confezione da sei	inglese
3	Stu	Ammaccatura	Codice

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> tipo = "testo/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< tipo di script = "testo/javascript" > 
  $ ( documento ). pronto ( funzione () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
< classe tabella = "tabella comune zebrata" > 
  ...
</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.

Esempio di legenda del modulo

Ingresso X-Grande

Selezionare

1 2 3 4 5

Selezionare

1 2 3 4 5

Input non modificabile

Qualche valore qui

Ingresso disabilitato

Ingresso X-Grande

Piccolo frammento di testo della guida

Esempio di legenda del modulo

Testo anteposto

@

Casella di controllo anteposta

Casella di controllo aggiunta

Input di file

Esempio di legenda del modulo

Elenco di opzioni

• L'opzione uno è questo e quello: assicurati di includere perché è fantastico
• L'opzione due può anche essere verificata e inclusa nei risultati del modulo
• L'opzione tre può, sì, hai indovinato, anche essere verificata e inclusa nei risultati del modulo
• L'opzione quattro non può essere selezionata in quanto è disabilitata.

Nota: le etichette circondano tutte le opzioni per aree di clic molto più grandi e un modulo più utilizzabile.

Intervallo di date

a Tutti gli orari sono indicati come Pacific Standard Time (GMT -08:00).

Area di testo

Blocco di testo della guida per descrivere il campo sopra, se necessario.

Elenco di opzioni

• L'opzione uno è questo e quello: assicurati di includere perché è fantastico
• L'opzione due può anche essere verificata e inclusa nei risultati del modulo

Salvare le modifiche Annulla

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.

Esempio di legenda del modulo

Ingresso X-Grande

Selezionare

1 2 3 4 5

Esempio di legenda del modulo

Elenco di opzioni

• L'opzione uno è questo e quello: assicurati di includere perché è fantastico
• L'opzione due può anche essere verificata e inclusa nei risultati del modulo

Nota: le etichette circondano tutte le opzioni per aree di clic molto più grandi e un modulo più utilizzabile.

Salvare le modifiche Annulla

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 .primaryè disponibile una classe blu. Inoltre, arrotolare i tuoi stili è facile.

Esempio di pulsanti

Gli stili dei pulsanti possono essere applicati a qualsiasi cosa con .btnapplicato. In genere ti consigliamo di applicarli solo a a, buttone selezionare inputelementi. 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 buttongli 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.

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

<ul class="schede"> classe = "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"> classe = "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>

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.

<div class="impaginazione"> class = "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

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

Blocca i messaggi

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.

Modali

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

Popover

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

Bootstrap è stato creato con Preboot , un pacchetto open source di mixin e variabili da utilizzare insieme a Less , un preprocessore CSS per uno sviluppo web più semplice e veloce.

Scopri come abbiamo utilizzato Preboot in Bootstrap e come puoi utilizzarlo se scegli di eseguire Less sul tuo prossimo progetto.

Come usarlo

Usa questa opzione per sfruttare appieno le variabili Less, i mixin e la nidificazione di Bootstrap in CSS tramite javascript nel tuo browser.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
< tipo di script = "testo/javascript" src = "js/less-1.0.41.min.js" ></script>  

Non senti la soluzione .js? Prova l'app Less Mac o usa Node.js per compilare quando distribuisci il codice.

Cosa è incluso

Ecco alcuni dei punti salienti di ciò che è incluso in Twitter Bootstrap come parte di Bootstrap. Vai al sito Web Bootstrap o alla pagina del progetto Github per scaricare e saperne di più.

Variabili di colore

Le variabili in Less sono perfette per mantenere e aggiornare il tuo CSS senza mal di testa. Quando vuoi cambiare un valore di colore o un valore usato di frequente, aggiornalo in un punto e sei pronto.

// Collegamenti
@linkColore : #8b59c2;         
@linkColorHover :     scurisce ( @linkColor , 10 ); 
// Grigi
@nero : #000;             
@grayDark :           schiarisce ( @nero , 25 %); 
@grigio :               schiarire ( @nero , 50 %); 
@grayLight :          schiarire ( @black , 70 %); 
@grayLighter :        schiarire ( @black , 90 %); 
@bianco : #fff;             
// Colori accentati
@blu : #08b5fb;              
@verde : #46a546;             
@rosso : #9d261d;               
@giallo : #ffc40d;            
@arancione : #f89406;            
@rosa : #c3325f;              
@viola : #7a43b6;            
// Base
@linea di base : 20px ;          

Commentando

Less fornisce anche un altro stile di commento oltre alla normale /* ... */sintassi dei CSS.

// Questo è un commento
/* Anche questo è un commento */

Mescola il wazoo

I mixin sono fondamentalmente include o parziali per CSS, consentendoti di combinare un blocco di codice in uno solo. Sono ideali per proprietà con prefisso del fornitore come box-shadow, gradienti tra browser, pile di caratteri e altro ancora. Di seguito è riportato un esempio dei mixin inclusi in Bootstrap.

Pile di caratteri

#carattere {
  . stenografia ( @weight : normale , @ size : 14px , @lineHeight : 20px ) {     
dimensione del     carattere : @dimensione ; 
    font - weight : @weight ; 
altezza della     linea : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @ size : 14px , @lineHeight : 20px ) {     
    font - famiglia : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
dimensione del     carattere : @dimensione ; 
    font - weight : @weight ; 
altezza della     linea : @lineHeight ; 
  }
  . serif ( @weight : normale , @ size : 14px , @lineHeight : 20px ) {     
    font - famiglia : "Georgia" , Times New Roman , Times , sans - serif ;     
dimensione del     carattere : @dimensione ; 
    font - weight : @weight ; 
altezza della     linea : @lineHeight ; 
  }
  . monospazio ( @weight : normale , @size : 12px , @lineHeight : 20px ) {     
    font - famiglia : "Monaco" , Courier New , monospace ;   
dimensione del     carattere : @dimensione ; 
    font - weight : @weight ; 
altezza della     linea : @lineHeight ; 
  }
}

Gradienti

#gradiente {
  . orizzontale ( @startColor : #555, @endColor: #333) { 
colore di     sfondo : @endColor ; 
    sfondo - ripetizione : ripetizione - x ;
    sfondo - immagine : - khtml - gradiente ( lineare , in alto a sinistra, in alto a destra , da ( @startColor ), a ( @endColor )); // Conquistatore   
immagine di     sfondo : -moz - linear - gradiente ( a sinistra , @startColor , @endColor ); // FF 3.6+    
immagine di     sfondo : -ms - linear - gradiente ( sinistra , @startColor , @endColor ) ; // IE10    
    sfondo - immagine : - webkit - gradiente ( lineare , in alto a sinistra, in alto a destra , colore - stop ( 0 %, @startColor ), colore - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
immagine di     sfondo : -webkit -lineare - gradiente ( sinistra , @startColor , @endColor ) ; _ // Safari 5.1+, Chrome 10+    
immagine di     sfondo : -o - linear - gradiente ( a sinistra , @startColor , @endColor ); // Opera 11.10    
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 e IE7 
immagine di     sfondo : gradiente lineare ( sinistra , @startColor , @endColor ) ; // Lo standard   
  }
  . verticale ( @startColor : #555, @endColor: #333) { 
colore di     sfondo : @endColor ; 
    sfondo - ripetizione : ripetizione - x ;
    sfondo - immagine : - khtml - gradiente ( lineare , in alto a sinistra , in basso a sinistra , da ( @startColor ), a ( @endColor )); // Conquistatore   
immagine di     sfondo : -moz -lineare - gradiente ( @startColor , @endColor ) ; _ // FF 3.6+   
immagine di     sfondo : -ms -lineare - gradiente ( @startColor , @endColor ) ; _ // IE10   
    sfondo - immagine : - webkit - gradiente ( lineare , in alto a sinistra , in basso a sinistra , colore - stop ( 0 %, @startColor ), colore - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
immagine di     sfondo : -webkit -lineare - gradiente ( @startColor , @endColor ) ; _ // Safari 5.1+, Chrome 10+   
immagine di     sfondo : -o - gradiente lineare ( @startColor , @endColor ) ; _ // Opera 11.10   
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 e IE7 
immagine di     sfondo : gradiente lineare ( @startColor , @endColor ) ; // Lo standard  
  }
  . direzionale ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . verticale - tre - colori ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operazioni e sistema di rete

Divertiti ed esegui un po' di matematica per generare mixin flessibili e potenti come quello qui sotto.

// Griglia
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistema a griglia
. contenitore {
  larghezza : @larghezza sito ; 
  margine : 0 automatico ;  
  . clearfix ();
}
. colonne ( @columnSpan : 1 ) {  
  display : in linea ; 
  galleggiante : sinistra ;
  larghezza : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margine sinistro : @gridGutterWidth ; _ 
  &: primo - figlio {
    margine sinistro : 0 ; _ 
  }
}
. offset ( @columnOffset : 1 ) {  
  margine sinistro : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ) ) ! importante ;          
}