Ti bootstrap ket naibangon iti makasungbat a 12-kolum a grid. Inramanmi met dagiti fixed- ken fluid-width a layout a naibatay iti dayta a sistema.
Ti kasisigud a sistema ti grid a naited a kas paset ti Bootstrap ket ti 940px-a kalawa, 12-kolum a grid .
Daytoy ket addaan pay kadagiti uppat a makasungbat a panagduduma para kadagiti nadumaduma nga alikamen ken resolusion: telepono, ladawan ti tablet, landscape ti lamisaan ken dagiti babassit a desktop, ken dagiti dadakkel a widescreen a desktop.
- <div klase = "hilera" >
- <div klase = "span4" > ... </div>
- <div klase = "span8" > ... </div>
- </div>
Kas naipakita ditoy, ti batayan a layout ket mabalin a maparsua babaen ti dua a "adigi," tunggal maysa ket mangsaklaw ti bilang dagiti 12 a pundasional nga adigi nga inkeddengmi a kas paset ti sistema ti gridmi.
- <div klase = "hilera" >
- <div klase = "span4" > ... </div>
- <div klase = "span4 nga offset4" > ... </div>
- </div>
Iti estatiko (saan a pluido) a sistema ti grid iti Bootstrap, nalaka ti panagumok. Tapno mai-nest ti linaonmo, mangnayon laeng iti baro .row
ken set dagiti .span*
kolum iti uneg ti addan a .span*
kolum.
Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti bilang dagiti adigi ti nagannakna. Kas pagarigan, dua a naisanglad a .span3
kolum ti rumbeng a maikabil iti uneg ti maysa a .span6
.
- <div klase = "hilera" >
- < klase ti div = "span12" >
- Level 1 ti kolum
- <div klase = "hilera" >
- <div klase = "span6" > Antas 2 </div>
- <div klase = "span6" > Antas 2 </div>
- </div>
- </div>
- </div>
Ti sistema ti grid ti pluido ket agus-usar kadagiti porsiento para kadagiti kalawa ti adigi imbes a dagiti naikeddeng a pixel. Daytoy ket addaan pay kadagiti isu met laeng a makasungbat a panagduduma a kas ti sistemami a naikeddeng a grid, a mangipasigurado kadagiti umno a proporsion para kadagiti resolusion ti tulbek nga iskrin ken dagiti alikamen.
Aramiden ti aniaman a linia a pluido babaen laeng ti panagbalbaliw .row
iti .row-fluid
. Agtalinaed nga eksakto nga agpapada dagiti adigi, a mamagbalin a super diretso ti ag-flip iti nagbaetan dagiti naipasdek ken pluido a layout.
- <div klase = "hilera-a-pluido" >
- <div klase = "span4" > ... </div>
- <div klase = "span8" > ... </div>
- </div>
Ti panagumok kadagiti pluido a grid ket naiduma bassit: ti bilang dagiti naisanglad a kolum ket saan a kasapulan a maipada iti nagannak. Imbes ketdi, dagiti kolummo ket mai-reset iti tunggal maysa a lebel gapu ta tunggal maysa a hilera ket mangala ti 100% ti nagannak a kolum.
- <div klase = "hilera-a-pluido" >
- < klase ti div = "span12" >
- Level 1 ti kolum
- <div klase = "hilera-a-pluido" >
- <div klase = "span6" > Antas 2 </div>
- <div klase = "span6" > Antas 2 </div>
- </div>
- </div>
- </div>
Variable nga | Default nga pateg | Panangiladawan |
---|---|---|
@gridColumns |
12 nga | Bilang dagiti kolum |
@gridColumnWidth |
60px nga | Kalawa ti tunggal adigi |
@gridGutterWidth |
20px nga | Negatibo nga espasio iti nagbaetan dagiti adigi |
@siteWidth |
Nakuenta a kaadu ti amin nga adigi ken kanal | Bilangenna ti bilang dagiti adigi ken gutters tapno maikeddeng ti kalawa ti .container-fixed() mixin |
Naibangon iti Bootstrap ket dagiti sumagmamano a variable para iti panagpasayaat ti default a 940px a sistema ti grid, a nadokumento iti ngato. Amin a variable para iti grid ket naidulin kadagiti variable.less.
Ti panangbalbaliw ti grid ket kayatna a sawen ti panangbalbaliw kadagiti tallo @grid*
a variable ken panagtipon manen ti Bootstrap. Baliwan dagiti grid variables kadagiti variables.less ken usaren ti maysa kadagiti uppat a wagas a nadokumento a mangtipon manen . No manginayonka kadagiti ad-adu a kolum, siguraduem nga inayon ti CSS para kadagidiay adda iti grid.less.
Ti panagpasayaat ti grid ket agtrabaho laeng iti default a lebel, ti 940px a grid. Tapno mataginayon dagiti responsive nga aspeto ti Bootstrap, masapul met nga i-customize-mo dagiti grid iti responsive.less.
Ti default ken simple a 940px-a kalawa, naisentro a layout para iti dandani laeng ania man a website wenno panid nga inted babaen ti maymaysa <div class="container">
.
- <bagi> nga
- <div klase = "laon" >
- ...
- </div>
- </bagi>
<div class="container-fluid">
mangted ti nalaka a maibagay nga estruktura ti panid, min- ken max-a kalawa, ken ti kannigid a sidebar. Nasayaat dayta para kadagiti apps ken docs.
- <div klase = "paglaon-a-pluido" >
- <div klase = "hilera-a-pluido" >
- < klase ti div = "span2" >
- <!--Linaon ti sidebar-->
- </div>
- < klase ti div = "span10" >
- <!--Linaon ti bagi-->
- </div>
- </div>
- </div>
Ti Bootstrap ket mangsuporta ti sumagmamano a panagsaludsod ti media iti maymaysa a file tapno makatulong a mangaramid kadagiti proyektom nga ad-adda a maitutop kadagiti nadumaduma nga alikamen ken dagiti resolusion ti iskrin. Ania ti nairaman:
Marka | Lawa ti layout | Kalawa ti adigi | Lapad ti kanal |
---|---|---|---|
Dagiti smartphone | 480px ken iti baba | Pluido nga adigi, awan ti naikeddeng a kalawa | |
Dagiti tableta ti retrato | 480px agingga iti 768px | Pluido nga adigi, awan ti naikeddeng a kalawa | |
Dagiti tapi ti landscape | 768px agingga iti 979px | 42px nga | 20px nga |
Default | 980px ken agpangato | 60px nga | 20px nga |
Dakkel a display | 1210px ken agpangato | 70px nga | 30px nga |
Tapno masigurado a dagiti alikamen ket mangipakitada a nasayaat kadagiti sumungsungbat a panid, iraman ti meta tag ti viewport.
- <meta name = "viewport" content = "kalawa=kalawa-ti-alikamen, umuna-a-timbangan=1.0" >
Dagiti panagsaludsod ti media ket mangipalubos ti kostumbre a CSS a naibatay kadagiti sumagmamano a kondision—dagiti ratio, kalawa, kita ti display, kdpy—ngem kadawyan a mangipamaysa iti aglawlaw min-width
ken max-width
.
Ti Bootstrap ket saan nga automatiko a mangiraman kadagitoy a panagsaludsod ti media, ngem ti pannakaawat ken pananginayon kadagitoy ket nalaka unay ken kasapulan ti bassit a panagisaad. Addaanka iti sumagmamano a pagpilian para iti panangiraman kadagiti makasungbat a tampok ti Bootstrap:
Apay a dimo iraman laeng dayta? Pudno a kunaen, saan nga amin ket kasapulan a makasungbat. Imbes a paregtaen dagiti developer a mangikkat iti daytoy a feature, panunotenmi a kasayaatan no mapalubosan dayta.
- // Landscape dagiti telepono ken agpababa
- @media ( max - lawa : 480px ) { ... }.
- // Landscape telepono iti ladawan a tablet
- @media ( max - lawa : 768px ) { ... }.
- // Retrato ti tablet iti landscape ken desktop
- @media ( min - kalawa : 768px ) ken ( max - kalawa : 980px ) { ... }
- // Dakkel nga desktop
- @media ( min - lawa : 1200px ) { . }.