A Bootstrap egy érzékeny, 12 oszlopos rácsra épül. Ezen a rendszeren alapuló fix és fluid szélességű elrendezéseket is beépítettünk.
A Bootstrap részeként biztosított alapértelmezett rácsrendszer egy 940 képpont széles, 12 oszlopos rács .
Négy érzékeny változata is van különféle eszközökhöz és felbontásokhoz: telefon, táblagép álló, fekvő és kis asztali számítógépek, valamint nagy szélesvásznú asztali számítógépek.
- <div class = "sor" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Amint az itt látható, egy alapvető elrendezés két "oszlopból" is létrehozható, amelyek mindegyike a rácsrendszerünk részeként meghatározott 12 alaposzlop közül többre terjed ki.
- <div class = "sor" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
A Bootstrap statikus (nem folyékony) rácsrendszerével a beágyazás egyszerű. A tartalom beágyazásához adjon hozzá egy újat .row
és .span*
egy oszlopkészletet egy meglévő .span*
oszlopon belül.
- <div class = "sor" >
- <div class = "span12" >
- Az oszlop 1. szintje
- <div class = "sor" >
- <div class = "span6" > 2. szint </div>
- <div class = "span6" > 2. szint </div>
- </div>
- </div>
- </div>
Változó | Alapértelmezett érték | Leírás |
---|---|---|
@gridColumns |
12 | Oszlopok száma |
@gridColumnWidth |
60 képpont | Minden oszlop szélessége |
@gridGutterWidth |
20 képpont | Negatív térköz az oszlopok között |
@siteWidth |
Az összes oszlop és ereszcsatorna kiszámított összege | Számolja az oszlopok és ereszcsatornák számát a .container-fixed() mixin szélességének beállításához |
A Bootstrapbe beépített néhány változó található az alapértelmezett 940 képpontos rácsrendszer testreszabásához, amelyeket fentebb dokumentáltunk. A rács összes változója változókban van tárolva.kevesebb.
A rács módosítása a három @grid*
változó megváltoztatását és a Bootstrap újrafordítását jelenti. Módosítsa a rácsváltozókat a változók.lessben, és használja a négy dokumentált módszer egyikét az újrafordításhoz . Ha több oszlopot ad hozzá, ügyeljen arra, hogy a grid.lessben lévőkhöz adja hozzá a CSS-t.
A rács testreszabása csak az alapértelmezett szinten, a 940 képpontos rácson működik. A Bootstrap reszponzív jellemzőinek fenntartásához a responsive.less rácsjait is testre kell szabnia.
Az alapértelmezett és egyszerű, 940 képpont széles, középre igazított elrendezés szinte minden webhelyhez vagy oldalhoz, amelyet egyetlen <div class="container">
.
- <test>
- <div class = "tároló" >
- ...
- </div>
- </body>
<div class="container-fluid">
rugalmas oldalszerkezetet, minimális és maximális szélességet, valamint bal oldali oldalsávot biztosít. Alkalmazásokhoz és dokumentumokhoz nagyszerű.
- <div class = "container-fluid" >
- <div class = "sor-fluid" >
- <div class = "span2" >
- <!--Sidebar tartalom-->
- </div>
- <div class = "span10" >
- <!--Testtartalom-->
- </div>
- </div>
- </div>
A Bootstrap néhány médialekérdezést támogat, hogy a projektjeit megfelelőbbé tegye a különböző eszközökön és képernyőfelbontásokon. A következőket tartalmazza:
Címke | Elrendezési szélesség | Oszlop szélesség | Az ereszcsatorna szélessége |
---|---|---|---|
Okostelefonok | 480 képpont és az alatti | Folyadékoszlopok, nincs rögzített szélesség | |
Portré táblagépek | 480 képpont és 768 képpont között | Folyadékoszlopok, nincs rögzített szélesség | |
Táj táblagépek | 768 képpont és 940 képpont között | 44 képpont | 20 képpont |
Alapértelmezett | 940 képpont és több | 60 képpont | 20 képpont |
Nagy kijelző | 1210 képpont és több | 70 képpont | 30 képpont |
A médialekérdezések lehetővé teszik az egyéni CSS-t számos feltétel alapján – arányok, szélességek, megjelenítési típus stb. –, de általában a min-width
és köré fókuszálnak max-width
.
A Bootstrap nem tartalmazza automatikusan ezeket a médialekérdezéseket, de megértése és hozzáadása nagyon egyszerű, és minimális beállítást igényel. Néhány lehetőség közül választhat a Bootstrap reszponzív funkcióinak beépítéséhez:
Miért nem csak belefoglalja? Az igazat megvallva nem kell mindennek reagálnia. Ahelyett, hogy a fejlesztőket arra ösztönöznénk, hogy távolítsák el ezt a funkciót, úgy gondoljuk, a legjobb, ha engedélyezzük.
- // Fekvő telefonok és le
- @media ( max - szélesség : 480 képpont ) { ... }
- // Fekvő telefonról álló táblagépre
- @media ( max . szélesség : 768px ) { ... }
- // Álló táblagép fekvőre és asztalra
- @media ( min - szélesség : 768 képpont ) és ( max - szélesség : 940 képpont ) { ... }
- // Nagy asztal
- @media ( min - szélesség : 1200 képpont ) { .. }