Bootstrapi osana pakutav vaikevõrgusüsteem on 940 piksli laiune 12 veeruga ruudustik .

Sellel on ka neli tundliku variatsiooni erinevate seadmete ja eraldusvõimete jaoks: telefon, tahvelarvuti portree, laudmaastik ja väikesed lauaarvutid ning suured laiekraaniga lauaarvutid.

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

Nagu siin näidatud, saab põhipaigutuse luua kahe "veeruga", millest igaüks hõlmab mitut 12 põhiveeru, mille määratlesime oma ruudustikusüsteemi osana.

Bootstrapi staatilise (mittevedeliku) võrgusüsteemiga on pesastamine lihtne. Sisu pesastamiseks lisage lihtsalt olemasolevasse veergu uus veergude .rowkomplekt ..span*.span*

Näide

Pesastatud read peaksid sisaldama veergude komplekti, mis annavad kokku selle ülemveergude arvu. Näiteks kaks pesastatud .span3veergu tuleks paigutada veergu .span6.

<div class = "rida" > 
  <div class = "span12" > 
    Veeru 1. tase
    <div class = "rida" > 
      <div class = "span6" > 2. tase </div> 
      <div class = "span6" > 2. tase </div> 
    </div>
  </div>
</div>

Protsendid, mitte pikslid

Vedeliku ruudustiku süsteem kasutab veergude laiuste jaoks protsente fikseeritud pikslite asemel. Sellel on ka samad reageerivad variatsioonid kui meie fikseeritud ruudustikusüsteemil, tagades peamiste ekraanieraldusvõimete ja seadmete õiged proportsioonid.

Vedeliku read

Muutke mis tahes rida vedelaks, muutes lihtsalt .rowväärtuseks .row-fluid. Veerud jäävad täpselt samaks, mistõttu on fikseeritud ja sujuva paigutuse vahel vahetamine ülimalt lihtne.

Märgistus

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

Sujuva ruudustikuga pesastamine on veidi erinev: pesastatud veergude arv ei pea vastama vanemale. Selle asemel lähtestatakse teie veerud igal tasemel, kuna iga rida võtab enda alla 100% emaveerust.

<div class = "reavedelik" > 
  <div class = "span12" > 
    Veeru 1. tase
    <div class = "reavedelik" > 
      <div class = "span6" > 2. tase </div> 
      <div class = "span6" > 2. tase </div> 
    </div>
  </div>
</div>

Muutujad VÄHEM

Bootstrapi on sisse ehitatud käputäis muutujaid 940 piksli vaikevõrgusüsteemi kohandamiseks, mis on dokumenteeritud ülal. Kõik ruudustiku muutujad salvestatakse muutujatesse.vähem.

Kuidas kohandada

Ruudustiku muutmine tähendab kolme @grid*muutuja muutmist ja Bootstrapi uuesti kompileerimist. Muutke ruudustiku muutujaid failis variables.less ja kasutage ümberkompileerimiseks ühte neljast dokumenteeritud viisist . Kui lisate rohkem veerge, lisage kindlasti grid.less veergude CSS.

Vastuvõtlikuks jäämine

Ruudustiku kohandamine töötab ainult vaiketasemel, 940 piksli ruudustikul. Bootstrapi tundlike aspektide säilitamiseks peate kohandama ka responsive.less võrgustikke.

Fikseeritud paigutus

Vaikimisi lihtne ja lihtne 940 piksli laiune tsentreeritud paigutus peaaegu iga veebisaidi või lehe jaoks, mille pakub üks <div class="container">.

<keha>
  <div class = "konteiner" > 
    ...
  </div>
</body>

Vedeliku paigutus

<div class="container-fluid">annab paindliku lehe struktuuri, minimaalse ja maksimaalse laiuse ning vasakpoolse külgriba. See on suurepärane rakenduste ja dokumentide jaoks.

<div class = "container-fluid" > 
  <div class = "reavedelik" > 
    <div class = "span2" > 
      <!--Külgriba sisu-->
    </div>
    <div class = "span10" > 
      <!--Keha sisu-->
    </div>
  </div>
</div>

Toetatud seadmed

Bootstrap toetab käputäis meediumipäringuid ühes failis, et muuta teie projektid erinevatele seadmetele ja ekraani eraldusvõimetele sobivamaks. Sisaldab järgmist:

Nõuab metasilti

Tagamaks, et seadmed kuvavad automaatselt reageerivaid lehti õigesti, lisage vaateava metasilt.

<meta name = "vaateava" content = "width = seadme laius, esialgne skaala = 1,0" >  

Mida nad teevad

Meediumipäringud võimaldavad kohandatud CSS-i, mis põhineb mitmel tingimusel (suhted, laiused, kuvamise tüüp jne), kuid tavaliselt keskenduvad min-widthja ümber max-width.

• Muutke meie ruudustiku veeru laiust
• Virna elemendid hõljumise asemel kõikjal, kus vaja
• Muutke pealkirjade ja teksti suurust, et need oleksid seadmetele sobivamad

Bootstrap ei kaasa neid meediumipäringuid automaatselt, kuid nende mõistmine ja lisamine on väga lihtne ja nõuab minimaalset seadistamist. Teil on Bootstrapi tundlike funktsioonide kaasamiseks mõned võimalused.

1. Kasutage kompileeritud reageerivat versiooni bootstrap-responsive.css
2. Lisage @import "responsive.less" ja kompileerige Bootstrap uuesti
3. Muutke ja kompileerige responsive.less uuesti eraldi failina

Miks mitte seda lihtsalt lisada? Tõtt-öelda ei pea kõik reageerima. Selle asemel, et julgustada arendajaid seda funktsiooni eemaldama, arvame, et parim on see lubada.

  // Maastikutelefonid ja alla
  @media ( maksimaalne laius : 480 pikslit ) { ... }     
 
  // Telefoni horisontaalpaigutusega tahvelarvutisse
  @media ( maksimaalne laius : 768 pikslit ) { ... }     
 
  // Portree tahvelarvuti horisontaalpaigutamiseks ja töölauale
  @media ( min - laius : 768 pikslit ) ja ( max - laius : 980 pikslit ) { ... }        
 
  // Suur töölaud
  @media ( min - laius : 1200 pikslit ) { .. }