Numatytoji tinklelio sistema, pateikiama kaip „Bootstrap“ dalis, yra 940 pikselių pločio, 12 stulpelių tinklelis .

Jame taip pat yra keturi jautrūs įvairių įrenginių ir skiriamųjų gebų variantai: telefonas, planšetinio kompiuterio portretas, stalo kraštovaizdis ir maži staliniai kompiuteriai bei dideli plačiaekraniai staliniai kompiuteriai.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Kaip parodyta čia, pagrindinį išdėstymą galima sukurti su dviem „stulpeliais“, kurių kiekvienas apima 12 pagrindinių stulpelių, kuriuos apibrėžėme kaip savo tinklelio sistemos dalį.

Naudojant statinę (ne skystą) tinklelio sistemą „Bootstrap“, įdėti lizdus yra paprasta. Norėdami sudėti turinį, tiesiog pridėkite naują ir esamame stulpelyje .rowrinkinį stulpelių..span*.span*

Pavyzdys

<div class = "row" > 
  <div class = "span12" > 
    1 stulpelio lygis
    <div class = "row" > 
      <div class = "span6" > 2 lygis </div> 
      <div class = "span6" > 2 lygis </div> 
    </div>
  </div>
</div>

Kintamieji LESS

„Bootstrap“ yra keletas kintamųjų, skirtų tinkinti numatytąją 940 pikselių tinklelio sistemą, aprašyta aukščiau. Visi tinklelio kintamieji saugomi kintamuosiuose.mažiau.

Kaip pritaikyti

Keičiant tinklelį reikia pakeisti tris @grid*kintamuosius ir iš naujo kompiliuoti „Bootstrap“. Pakeiskite tinklelio kintamuosius kintamieji.less ir naudokite vieną iš keturių dokumentuose nurodytų būdų perkompiliuoti . Jei pridedate daugiau stulpelių, būtinai pridėkite CSS tiems, kurie yra grid.less.

Išlikti reaguoti

Tinklelio tinkinimas veikia tik numatytuoju lygiu, 940 pikselių tinkleliu. Kad išlaikytumėte reaguojančius „Bootstrap“ aspektus, taip pat turėsite tinkinti tinklelius responsive.less.

Fiksuotas išdėstymas

Numatytasis ir paprastas 940 pikselių pločio, centre išdėstytas išdėstymas beveik bet kuriai svetainei ar puslapiui, kurį teikia vienas <div class="container">.

<kūnas>
  <div class = "konteineris" > 
    ...
  </div>
</body>

Skysčių išdėstymas

<div class="container-fluid">suteikia lanksčią puslapio struktūrą, minimalų ir didžiausią plotį bei kairiąją šoninę juostą. Tai puikiai tinka programoms ir dokumentams.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Šoninės juostos turinys-->
    </div>
    <div class = "span10" > 
      <!--Kūno turinys-->
    </div>
  </div>
</div>

Palaikomi įrenginiai

„Bootstrap“ palaiko keletą medijos užklausų, kad jūsų projektai būtų tinkamesni įvairiems įrenginiams ir ekrano skyroms. Štai kas įtraukta:

Ką jie daro

Medijos užklausos leidžia tinkinti CSS, atsižvelgiant į daugybę sąlygų – santykį, plotį, rodymo tipą ir t. t., tačiau dažniausiai dėmesys sutelkiamas į min-widthir max-width.

• Pakeiskite stulpelio plotį mūsų tinklelyje
• Kur reikia, sudėkite elementus, o ne plūduriuokite
• Pakeiskite antraščių ir teksto dydį, kad jie labiau tiktų įrenginiams

„Bootstrap“ automatiškai neįtraukia šių medijos užklausų, tačiau jas suprasti ir pridėti yra labai paprasta ir reikia minimalios sąrankos. Turite keletą parinkčių, kaip įtraukti reaguojančias „Bootstrap“ funkcijas:

1. Naudokite sukompiliuotą interaktyvią versiją bootstrap-responsive.css
2. Pridėkite @import „responsive.less“ ir iš naujo sukompiliuokite „Bootstrap“.
3. Responsive.less modifikuoti ir perkompiliuoti kaip atskirą

Kodėl jo tiesiog neįtraukus? Tiesą pasakius, ne į viską reikia reaguoti. Užuot skatinę kūrėjus pašalinti šią funkciją, manome, kad geriausia ją įjungti.

  // Kraštovaizdžio telefonai ir žemyn
  @media ( maksimalus plotis : 480 piks . ) { ... }     
 
  // Iš telefono kraštovaizdžio į stačią planšetinį kompiuterį
  @media ( maksimalus plotis : 768px ) { ... } _     
 
  // Stačias planšetinis kompiuteris į gulsčią ir darbalaukį
  @media ( min . plotis : 768 piks. ) ir ( maksimalus plotis : 940 piks . ) { ... }        
 
  // Didelis darbalaukis
  @media ( min . plotis : 1200 piks . ) { .. }