sistema di rete Bootstrap
Questa sezione spiega il sistema di griglia Bootstrap (Grid System).
Bootstrap fornisce un sistema reattivo griglia flusso mobile preferito, con l'aumento delle dimensioni dello schermo o finestra (finestra), il sistema verrà automaticamente suddiviso in un massimo di 12.
Che cosa è una griglia (Grid)?
Da Wikipedia:
Nel disegno grafico, la griglia è una serie di linee rette utilizzato per organizzare contenuti dalla intersezione (orizzontale verticale) struttura composta (solitamente bidimensionale). È ampiamente usato nella progettazione del layout di stampa progettazione e struttura dei contenuti. Nel web design, si tratta di un usato per creare rapidamente un layout coerente ed efficace utilizzando HTML e CSS approccio.
In poche parole, griglia di web design per organizzare il contenuto in modo che il sito è facile da navigare, e per ridurre il carico del client.
Qual è il sistema di griglia Bootstrap (Grid System)?
Bootstrap documentazione ufficiale sul sistema di griglia Descrizione:
Cerchiamo di capire come la dichiarazione di cui sopra. Bootstrap 3 è una priorità dispositivo mobile, in questo senso, il codice di bootstrap per i dispositivi di piccole dimensioni dello schermo (come cellulari, tablet), poi esteso a dispositivi di schermo di grandi dimensioni (come computer portatili, computer desktop) sui componenti e la griglia.
Mobile prima strategia
- contenuto
- Decidere che cosa è più importante.
- disposizione
- Priorità progettato larghezza minore.
- CSS-based dispositivi mobili è una priorità, media query sono diretti ai computer tablet, computer desktop.
- progressive enhancement
- Con l'aumento delle dimensioni dello schermo e aggiungere elementi.
sistema di griglia Responsive all'aumentare schermo o dimensioni di visualizzazione (finestra), il sistema verrà automaticamente suddiviso in un massimo di 12.
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Sistema griglia Bootstrap opere (Grid System)
Il sistema di rete attraverso una serie di righe e colonne con contenuti per creare un layout di pagina. Di seguito sono elencati il sistema di griglia Bootstrap Ecco come funziona:
- Riga deve essere collocato in.container classe, al fine di ottenere un corretto allineamento (allineamento) e padding (padding).
- Utilizzare le linee per creare una serie orizzontale di colonne.
- Il contenuto deve essere collocato nella colonna, e la colonna può essere solo le righe figli diretti.
- classi di rete predefinito, ad.row e .col-XS-4,può essere utilizzato per creare rapidamente un layout a griglia. classe mista meno può essere utilizzato layout più semantici.
- Colonna per creare un divario tra i contenuti della colonna padding (padding). L'imbottitura è dall'esterno.Rows attraverso il (margine) la negazione, e l'ultima riga, prima colonna indica un offset.
- Il sistema di griglia è disponibile specificando i dodici colonne che si desidera creare una croce. Ad esempio, per creare tre colonne uguali, utilizzare tre.col-XS-4.
media query
media query sono molto chic "regole CSS condizionale." Si applica solo ad alcuni sulla base di alcuni criteri predeterminati CSS. Se tali condizioni sono soddisfatte, quindi applicare lo stile appropriato.
Bootstrap supporti query consentono di spostare in base alle dimensioni della finestra, spettacolo e contenuti nascondere. Le seguenti query multimediali utilizzando i file meno utilizzati per creare sistema di rete Bootstrap soglia punto di demarcazione critica.
/ * Dispositivi Ultra-piccola (cellulari, meno di 768px) * /
/ * Per impostazione predefinita, il Bootstrap nessun media query * /
/ * Dispositivi di piccole dimensioni (tablet, 768px in poi) * /
@media (min-width: @ screen-sm-min) {...}
/ * Dispositivi Media (desktop, 992px in poi) * /
@media (min-width: @ screen-md-min) {...}
/ * Attrezzature di grandi dimensioni (grandi computer desktop, 1200px poi) * /
@media (min-width: @ screen-lg-min) {...}
Noi volte contengonomax-width media query nel codice, che interesserà il CSS confinata all'interno di un intervallo più piccolo di dimensioni dello schermo.
@media (max-width: @ screen-xs-MAX) {...}
@media (min-width: @ screen-SM-min) e (max-width: @ screen-sm-max) {...}
@media (min-width: @ screen-md-min) e (max-width: @ screen-md-max) {...}
@media (min-width: @ screen-lg-min) {...}
media query ha due parti, prima di una specificazione del dispositivo, quindi una regola dimensioni. Nel caso di cui sopra, impostare le seguenti regole:
Diamo un'occhiata a questa riga di codice:
@media (min-width: @ screen-SM-min) e (max-width: @ screen-sm-max) {...}
Per tutti con unmin-width: @dispositivischermo-SM-minimo,se la larghezza dello schermo è inferiore a@ screen-SM-max,sarà fare un po 'di elaborazione.
Opzioni griglia
La seguente tabella riassume come il sistema a griglia Bootstrap su più dispositivi funziona:
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） | |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列?数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
La struttura di base della griglia
Ecco la struttura di base della griglia Bootstrap:
<Div class = "contenitore">
<Div class = "riga">
<Div class = "col - * - *"> </ div>
<Div class = "col - * - *"> </ div>
</ Div>
<Div class = "riga"> ... </ div>
</ Div>
<Div class = "contenitore"> ....
Lasciare alcuni semplici esempi guardiamo la griglia:
- Esempio: il livello di stack
- Esempio: medie e grandi attrezzature
- Esempi: telefoni cellulari, computer tablet, computer desktop
colonne Responsive azzerati
Il seguente esempio include quattro griglia, ma non si può determinare la posizione della griglia viene visualizzato in una piccola browsing dispositivo.
Per risolvere questo problema, è possibile utilizzare utilizzo.clearfix classe di utilità reattivo di risolvere, come illustrato nei seguenti esempi:
Esempi
Prova »
Browser ridimensionare la finestra per vedere i cambiamenti, o per visualizzare l'effetto sul telefono.
colonna Offset
L'offset è una funzione utile per più layout professionale. Essi possono essere utilizzati per rendere più spazio per la colonna. Adesempio, .col-xs = * classe non supporta offset, ma possono essere semplicemente utilizzando una cella vuota per ottenere l'effetto.
Per poter utilizzare l'offset su un grande schermo, utilizzare.col-MD-Offset- * categoria.Lasciato fuori queste classi sarebbe una colonna dalla (margine) è aumentato* colonna, dove *intervallo è1-11.
Nel seguente esempio, abbiamo <div class = "col-md -6"> .. </ div>, useremo.col-MD-Offset-3 di classe per centrare questo div.
Esempi
Prova »
I risultati sono i seguenti:
Colonna nidificati
Il valore di default per le reti annidati nel contenuto, aggiungere un nuovo.row, e all'interno di una colonna .col-MD-esistente*aggiungere un gruppo colonne.col-MD- *.righe nidificati dovrebbe contenere una serie di colonne, che ha fissato il numero di colonne non può essere superiore a 12 (in realtà, non vi è alcun requisito che è necessario compilare 12).
Nel seguente esempio, il layout ha due colonne, la seconda colonna viene suddiviso in due file di quattro scatole.
Esempi
Prova »
I risultati sono i seguenti:
ordinamento colonna
sistema di rete Bootstrap un'altra caratteristica ideale è che si può facilmente scrivere una colonna in un ordine, l'ordine viene visualizzata in un'altra colonna.
Si può facilmente cambiare l'ordine con.col-MD-push-costruito colonne della griglia *e.col-MD-pull *classe, dove*intervallo è1-11.
Nel seguente esempio, abbiamo un layout a due colonne, colonna di sinistra è molto stretta, come una barra laterale. Useremo.col-MD-push * e .col-MD-pull *di classe per scambiare l'ordine delle due colonne.
Esempi
Prova »
I risultati sono i seguenti:
