Bootstrap estas konstruita sur respondema 12-kolumna krado. Ni ankaŭ inkludis fiksajn kaj fluidajn larĝajn aranĝojn bazitajn sur tiu sistemo.
La defaŭlta kradsistemo provizita kiel parto de Bootstrap estas 940px-larĝa, 12-kolumna krado .
Ĝi ankaŭ havas kvar respondemajn variaĵojn por diversaj aparatoj kaj rezolucioj: telefono, tablojda portreto, tablopejzaĝo kaj malgrandaj labortabloj, kaj grandaj larĝekranaj labortabloj.
- <div klaso = "vico" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Kiel montrite ĉi tie, baza aranĝo povas esti kreita kun du "kolumnoj", ĉiu ampleksanta kelkajn el la 12 fundamentaj kolumnoj, kiujn ni difinis kiel parto de nia kradsistemo.
- <div klaso = "vico" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Kun la senmova (ne-fluida) kradsistemo en Bootstrap, nestado estas facila. Por nesti vian enhavon, simple aldonu novan .row
kaj aron da .span*
kolumnoj en ekzistanta .span*
kolumno.
Nestitaj vicoj devus inkluzivi aron da kolumnoj, kiuj sumiĝas al la nombro da kolumnoj de ĝia gepatro. Ekzemple, du nestitaj .span3
kolumnoj devus esti metitaj ene de .span6
.
- <div klaso = "vico" >
- <div class = "span12" >
- Nivelo 1 de kolumno
- <div klaso = "vico" >
- <div class = "span6" > Nivelo 2 </div>
- <div class = "span6" > Nivelo 2 </div>
- </div>
- </div>
- </div>
La fluida kradsistemo uzas procentojn por kolumnlarĝoj anstataŭe de fiksaj pikseloj. Ĝi ankaŭ havas la samajn respondemajn variojn kiel nia fiksa kradsistemo, certigante taŭgajn proporciojn por ŝlosilaj ekranrezolucioj kaj aparatoj.
Faru ajnan vicon fluida simple ŝanĝante .row
al .row-fluid
. La kolumnoj restas ekzakte la samaj, igante ĝin tre simpla ŝanĝi inter fiksaj kaj fluidaj aranĝoj.
- <div class = "vic-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Nestumado kun fluidaj kradoj estas iom malsama: la nombro da nestitaj kolumnoj ne bezonas kongrui kun la gepatro. Anstataŭe, viaj kolumnoj estas rekomencigitaj ĉe ĉiu nivelo ĉar ĉiu vico okupas 100% de la gepatra kolumno.
- <div class = "vic-fluid" >
- <div class = "span12" >
- Nivelo 1 de kolumno
- <div class = "vic-fluid" >
- <div class = "span6" > Nivelo 2 </div>
- <div class = "span6" > Nivelo 2 </div>
- </div>
- </div>
- </div>
Variablo | Defaŭlta valoro | Priskribo |
---|---|---|
@gridColumns |
12 | Nombro da kolumnoj |
@gridColumnWidth |
60 px | Larĝo de ĉiu kolumno |
@gridGutterWidth |
20px | Negativa spaco inter kolumnoj |
@siteWidth |
Komputila sumo de ĉiuj kolonoj kaj defluiloj | Nombras nombron da kolumnoj kaj defluiloj por fiksi larĝon de la .container-fixed() miksaĵo |
Enkonstruita en Bootstrap estas manpleno da variabloj por agordi la defaŭltan 940px kradsistemon, dokumentita supre. Ĉiuj variabloj por la krado estas stokitaj en variabloj.malpli.
Modifi la kradon signifas ŝanĝi la tri @grid*
variablojn kaj rekompili Bootstrap. Ŝanĝu la kradajn variablojn en variables.less kaj uzu unu el la kvar manieroj dokumentitaj por rekompili . Se vi aldonas pliajn kolumnojn, nepre aldonu la CSS por tiuj en grid.less.
Personigo de la krado funkcias nur ĉe la defaŭlta nivelo, la 940px krado. Por konservi la respondemajn aspektojn de Bootstrap, vi ankaŭ devos personecigi la kradojn en responsive.less.
La defaŭlta kaj simpla 940px-larĝa, centrita aranĝo por preskaŭ ajna retejo aŭ paĝo provizita de ununura <div class="container">
.
- <korpo>
- <div class = "ujo" >
- ...
- </div>
- </korpo>
<div class="container-fluid">
donas flekseblan paĝan strukturon, min- kaj max-larĝojn, kaj maldekstran flankbreton. Ĝi estas bonega por programoj kaj dokumentoj.
- <div class = "ujo-fluido" >
- <div class = "vic-fluid" >
- <div klaso = "span2" >
- <!--Flankmenuo enhavo-->
- </div>
- <div class = "span10" >
- <!--Korpa enhavo-->
- </div>
- </div>
- </div>
Bootstrap subtenas kelkajn amaskomunikilajn demandojn en ununura dosiero por helpi fari viajn projektojn pli taŭgaj en malsamaj aparatoj kaj ekranrezolucioj. Jen kio estas inkluzivita:
Etikedo | Larĝeco de aranĝo | Larĝo de kolumno | Larĝo de kanaleto |
---|---|---|---|
Smartphones | 480px kaj malsupre | Fluaj kolumnoj, sen fiksaj larĝoj | |
Portretaj tabuletoj | 480 px ĝis 768 px | Fluaj kolumnoj, sen fiksaj larĝoj | |
Pejzaĝaj tabuletoj | 768 px ĝis 979 px | 42 px | 20px |
Defaŭlte | 980 px kaj pli | 60 px | 20px |
Granda ekrano | 1210px kaj pli | 70 px | 30 px |
Por certigi, ke aparatoj montras respondajn paĝojn ĝuste, inkluzivu la meta-etikedon de vidpunkto.
- <meta name = "vidportujo" content = "width=device-width, initial-scale=1.0" >
Amaskomunikilaraj demandoj ebligas kutiman CSS bazitan sur kelkaj kondiĉoj - proporcioj, larĝoj, ekrantipo, ktp - sed kutime fokusiĝas ĉirkaŭ min-width
kaj max-width
.
Bootstrap ne aŭtomate inkluzivas ĉi tiujn amaskomunikilajn demandojn, sed kompreni kaj aldoni ilin estas tre facila kaj postulas minimuman agordon. Vi havas kelkajn eblojn por inkluzivi la respondemajn funkciojn de Bootstrap:
Kial ne simple inkluzivi ĝin? Verdire, ne ĉio devas esti respondema. Anstataŭ instigi programistojn forigi ĉi tiun funkcion, ni pensas, ke plej bone ebligu ĝin.
- // Pejzaĝaj telefonoj kaj malsupren
- @media ( maks - larĝo : 480 px ) { ... }
- // Pejzaĝa telefono al portreta tablojdo
- @media ( maks - larĝo : 768 px ) { ... }
- // Portreta tablojdo al pejzaĝo kaj labortablo
- @media ( min - larĝo : 768 px ) kaj ( max - width : 980 px ) { ... }
- // Granda labortablo
- @media ( min - larĝa : 1200 px ) { .. }