Tellingud

Bootstrap on üles ehitatud tundlikule 12-veerulisele ruudustikule. Oleme lisanud ka sellel süsteemil põhinevad fikseeritud ja vedela laiusega paigutused.

Vaikimisi 940 piksli ruudustik

Bootstrapi osana pakutav vaikevõrgusüsteem on 940 piksli laiune 12-veeruline 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.

Veergude tasaarvestamine

4 nihe 4

3 nihe 3

8 nihe 4

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

Pesastusveerud

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

Näide

Veeru 1. tase

2. tase

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

Võrgu kohandamine

Muutuv	Vaikeväärtus	Kirjeldus
`@gridColumns`	12	Veergude arv
`@gridColumnWidth`	60 pikslit	Iga veeru laius
`@gridGutterWidth`	20 pikslit	Negatiivne ruum veergude vahel
`@siteWidth`	Kõigi sammaste ja vihmaveerennide arvutatud summa	`.container-fixed()`Segisti laiuse määramiseks loendab sammaste ja vihmaveerennide arvu

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 üksainus <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, et muuta teie projekte erinevate seadmete ja ekraani eraldusvõimega sobivamaks. Sisaldab järgmist:

Silt	Paigutuse laius	Veeru laius	Renni laius
Nutitelefonid	480 pikslit ja alla selle	Vedelkolonnid, fikseeritud laiused puuduvad
Portree tahvelarvutid	480 kuni 768 pikslit	Vedelkolonnid, fikseeritud laiused puuduvad
Maastikuga tahvelarvutid	768 kuni 940 pikslit	44 pikslit	20 pikslit
Vaikimisi	940 pikslit ja rohkem	60 pikslit	20 pikslit
Suur ekraan	1210 pikslit ja rohkem	70 pikslit	30 pikslit

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

Meediapäringute kasutamine

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.

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

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 : 940 pikslit ) { ... }        
 
  // Suur töölaud
  @media ( min - laius : 1200 pikslit ) { .. }