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

Įdėtose eilutėse turėtų būti stulpelių rinkinys, kuris sudaro pirminio stulpelių skaičių. Pavyzdžiui, du įdėtieji .span3stulpeliai turėtų būti dedami į .span6.

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

Procentai, o ne pikseliai

Skysčiojo tinklelio sistemoje vietoj fiksuotų pikselių naudojami procentai stulpelių pločiui. Jis taip pat turi tokius pat jautrius variantus kaip ir mūsų fiksuoto tinklelio sistema, užtikrinanti tinkamas pagrindinių ekrano skiriamųjų gebų ir įrenginių proporcijas.

Skysčių eilės

Paverskite bet kurią eilutę sklandžią tiesiog pakeisdami .rowį .row-fluid. Stulpeliai išlieka tokie patys, todėl labai paprasta perjungti fiksuotą ir sklandų išdėstymą.

Žymėjimas

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

Įdėjimas naudojant sklandžius tinklelius yra šiek tiek kitoks: įdėtųjų stulpelių skaičius neturi atitikti pirminio. Vietoj to, jūsų stulpeliai kiekviename lygyje nustatomi iš naujo, nes kiekviena eilutė užima 100 % pirminio stulpelio.

<div class = "row-fluid" > 
  <div class = "span12" > 
    1 stulpelio lygis
    <div class = "row-fluid" > 
      <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ų viename faile, kad jūsų projektai būtų tinkamesni skirtinguose įrenginiuose ir ekrano skyra. Štai kas įtraukta:

Reikalinga metažyma

Norėdami užtikrinti, kad įrenginiai tinkamai rodytų interaktyvius puslapius, įtraukite peržiūros srities metažymą.

<meta name = "peržiūros sritis" content = "plotis = įrenginio plotis, pradinė skalė = 1,0" >  

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. Modifikuokite ir perkompiliuokite responsive.less kaip atskirą failą

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 : 980 piks . ) { ... }        
 
  // Didelis darbalaukis
  @media ( min . plotis : 1200 piks . ) { .. }