Sastatnes

Bootstrap ir veidots uz atsaucīga 12 kolonnu režģa. Mēs esam iekļāvuši arī fiksēta un mainīga platuma izkārtojumus, kuru pamatā ir šī sistēma.

Noklusējuma 940 pikseļu režģis

Noklusējuma režģa sistēma, kas tiek nodrošināta kā daļa no Bootstrap, ir 940 pikseļus plats, 12 kolonnu režģis .

Tam ir arī četri reaģējoši varianti dažādām ierīcēm un izšķirtspējām: tālrunis, planšetdatora portrets, galda ainava un mazi galddatori un lieli platekrāna galddatori.

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

Kā parādīts šeit, pamata izkārtojumu var izveidot ar divām “kolonnām”, no kurām katra aptver vairākas no 12 pamata kolonnām, kuras definējām kā daļu no mūsu režģa sistēmas.

Kolonnu nobīde

4 nobīde 4

3 nobīde 3

8 nobīde 4

<div class = "rinda" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Ligzdošanas kolonnas

Izmantojot Bootstrap statisko (neplūstošo) režģa sistēmu, ligzdošana ir vienkārša. Lai ievietotu saturu, vienkārši pievienojiet jaunu kolonnu .rowkopu .span*esošai .span*kolonnai.

Piemērs

Kolonnas 1. līmenis

2. līmenis

<div class = "rinda" > 
  <div class = "span12" > 
    Kolonnas 1. līmenis
    <div class = "rinda" > 
      <div class = "span6" > 2. līmenis </div> 
      <div class = "span6" > 2. līmenis </div> 
    </div>
  </div>
</div>

Režģa pielāgošana

Mainīgs	Noklusējuma vērtība	Apraksts
`@gridColumns`	12	Kolonnu skaits
`@gridColumnWidth`	60 pikseļi	Katras kolonnas platums
`@gridGutterWidth`	20 pikseļi	Negatīvā atstarpe starp kolonnām
`@siteWidth`	Aprēķināta visu kolonnu un notekcauruļu summa	Uzskaita kolonnu un noteku skaitu, lai iestatītu `.container-fixed()`maisītāja platumu

Mainīgie MAZĀK

Programmā Bootstrap ir iebūvēti daži mainīgie, lai pielāgotu noklusējuma 940 pikseļu režģa sistēmu, kas dokumentēta iepriekš. Visi režģa mainīgie tiek glabāti mainīgajos.mazāk.

Kā pielāgot

Modificēt režģi nozīmē mainīt trīs @grid*mainīgos un pārkompilēt Bootstrap. Mainiet režģa mainīgos mainīgos.less un izmantojiet vienu no četriem dokumentētajiem pārkompilēšanas veidiem . Ja pievienojat vairāk kolonnu, noteikti pievienojiet CSS tiem, kas atrodas grid.less.

Paliek atsaucīgam

Režģa pielāgošana darbojas tikai noklusējuma līmenī — 940 pikseļu režģī. Lai saglabātu Bootstrap atsaucīgos aspektus, jums būs arī jāpielāgo režģi responsive.less.

Fiksēts izkārtojums

Noklusējuma un vienkāršais 940 pikseļu platums, centrēts izkārtojums gandrīz jebkurai vietnei vai lapai, ko nodrošina viens <div class="container">.

<body>
  <div class = "konteineris" > 
    ...
  </div>
</body>

Šķidruma izkārtojums

<div class="container-fluid">nodrošina elastīgu lapas struktūru, minimālo un maksimālo platumu, kā arī kreiso sānjoslu. Tas ir lieliski piemērots lietotnēm un dokumentiem.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sānjoslas saturs-->
    </div>
    <div class = "span10" > 
      <!--Ķermeņa saturs-->
    </div>
  </div>
</div>

Atbalstītās ierīces

Bootstrap atbalsta dažus multivides vaicājumus, lai palīdzētu padarīt jūsu projektus piemērotākus dažādām ierīcēm un ekrāna izšķirtspējām. Lūk, kas ir iekļauts:

Etiķete	Izkārtojuma platums	Kolonnas platums	Notekas platums
Viedtālruņi	480 pikseļi un mazāk	Šķidruma kolonnas, bez fiksēta platuma
Portreta planšetdatori	480 pikseļi līdz 768 pikseļi	Šķidruma kolonnas, bez fiksēta platuma
Ainavu planšetdatori	768 pikseļi līdz 940 pikseļi	44 pikseļi	20 pikseļi
Noklusējums	940 pikseļi un vairāk	60 pikseļi	20 pikseļi
Liels displejs	1210 pikseļi un vairāk	70 pikseļi	30 pikseļi

Ko viņi dara

Multivides vaicājumi ļauj pielāgot CSS, pamatojoties uz vairākiem nosacījumiem — proporcijām, platumiem, attēlojuma veidu utt., bet parasti koncentrējas uz min-widthun max-width.

Mainiet kolonnas platumu mūsu režģī
Sakraujiet elementus, nevis pludiniet visur, kur nepieciešams
Mainiet virsrakstu un teksta izmērus, lai tie būtu piemērotāki ierīcēm

Izmantojot multivides vaicājumus

Bootstrap automātiski neietver šos multivides vaicājumus, taču to izpratne un pievienošana ir ļoti vienkārša un prasa minimālu iestatīšanu. Jums ir dažas iespējas, kā iekļaut Bootstrap adaptīvās funkcijas:

Izmantojiet apkopoto adaptīvo versiju bootstrap-responsive.css
Pievienojiet @import "responsive.less" un atkārtoti kompilējiet Bootstrap
Modificējiet un pārkompilējiet responsive.less kā atsevišķu

Kāpēc to vienkārši neiekļaut? Patiesību sakot, ne visam ir jābūt atsaucīgam. Tā vietā, lai mudinātu izstrādātājus noņemt šo funkciju, mēs domājam, ka vislabāk ir to iespējot.

  // Ainava telefoni un uz leju
  @media ( maksimālais platums : 480 pikseļi ) { ... }     
 
  // Ainava no tālruņa uz portreta planšetdatoru
  @media ( maksimālais platums : 768 pikseļi ) { ... }     
 
  // Portreta planšetdators uz ainavu un darbvirsmu
  @media ( minimālais platums : 768 pikseļi ) un ( maks . platums : 940 pikseļi ) { ... }        
 
  // Liela darbvirsma
  @media ( min platums : 1200 pikseļi ) { .. }