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

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.

Példa

A beágyazott soroknak olyan oszlopokat kell tartalmazniuk, amelyek összeadják a szülő oszlop oszlopainak számát. Például két egymásba ágyazott .span3oszlopot kell elhelyezni egy .span6.

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

Százalék, nem pixel

A folyékony rácsrendszer az oszlopszélességekhez százalékokat használ rögzített képpontok helyett. Ugyanazokkal az érzékeny variációkkal rendelkezik, mint a fix rácsrendszerünk, biztosítva a megfelelő arányokat a kulcsfontosságú képernyőfelbontásokhoz és eszközökhöz.

Folyékony sorok

Bármilyen sort gördülékenyebbé tehet, egyszerűen váltson .rowa következőre .row-fluid. Az oszlopok ugyanazok maradnak, ami rendkívül egyszerűvé teszi a fix és a folyékony elrendezések közötti váltást.

Jelölés

<div class = "sor-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

A folyékony rácsokkal való beágyazás egy kicsit más: a beágyazott oszlopok számának nem kell egyeznie a szülővel. Ehelyett az oszlopok minden szinten visszaállnak, mert minden sor a szülőoszlop 100%-át foglalja el.

<div class = "sor-fluid" > 
  <div class = "span12" > 
    Az oszlop 1. szintje
    <div class = "sor-fluid" > 
      <div class = "span6" > 2. szint </div> 
      <div class = "span6" > 2. szint </div> 
    </div>
  </div>
</div>

Változók LESS-ben

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 testreszabás módja

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.

Reagáló készség

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.

Fix elrendezés

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>

Folyékony elrendezés

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

Támogatott eszközök

A Bootstrap egy maroknyi médialekérdezést támogat egyetlen fájlban, 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:

Metatag szükséges

Annak érdekében, hogy az eszközök megfelelően jelenítsék meg az adaptív oldalakat, vegye fel a nézetablak metacímkéjét.

<meta name = "viewport" content = "width=device-width, inicial-scale=1.0" >  

Mit csinálnak

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.

• Módosítsa az oszlop szélességét a rácsunkban
• Lebegtetés helyett rakja egymásra az elemeket, ahol szükséges
• Méretezze át a címsorokat és a szöveget, hogy jobban megfeleljen az eszközöknek

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:

1. Használja a lefordított reszponzív verziót, a bootstrap-responsive.css-t
2. Adja hozzá az @import "responsive.less" kifejezést, és fordítsa újra a Bootstrapet
3. A responsive.less módosítása és újrafordítása külön fájlként

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 : 980 képpont ) { ... }        
 
  // Nagy asztal
  @media ( min - szélesség : 1200 képpont ) { .. }