Rakennustelineet

Bootstrap on rakennettu reagoivaan 12 sarakkeen ruudukkoon. Olemme myös sisällyttäneet tähän järjestelmään kiinteän ja nestemäisen leveyden asettelut.

Oletusruudukko 940 pikseliä

Bootstrapin osana toimitettu oletusruudukkojärjestelmä on 940 pikseliä leveä, 12 sarakkeen ruudukko .

Siinä on myös neljä responsiivista muunnelmaa eri laitteille ja resoluutioille: puhelin, tabletti pysty, pöytävaaka ja pienet pöytäkoneet sekä suuret laajakuvapöytäkoneet.

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

Kuten tässä näkyy, perusasettelu voidaan luoda kahdella "sarakkeella", joista kukin kattaa useita 12 perussaraketta, jotka määritimme osaksi ruudukkojärjestelmäämme.

Sarakkeiden offsetointi

4 offset 4

3 offset 3

8 offset 4

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

Sisäkkäiset sarakkeet

Bootstrapin staattisen (ei nestemäisen) ruudukkojärjestelmän avulla sisäkkäisyys on helppoa. Sisällytäksesi sisältösi, lisää vain uusi sarakesarja olemassa olevaan .rowsarakkeeseen ..span*.span*

Esimerkki

Sarakkeen taso 1

Taso 2

<div class = "rivi" > 
  <div class = "span12" > 
    Sarakkeen taso 1
    <div class = "rivi" > 
      <div class = "span6" > Taso 2 </div> 
      <div class = "span6" > Taso 2 </div> 
    </div>
  </div>
</div>

Ruudukon mukauttaminen

Muuttuva	Oletusarvo	Kuvaus
`@gridColumns`	12	Kolumnien numerot
`@gridColumnWidth`	60 pikseliä	Jokaisen sarakkeen leveys
`@gridGutterWidth`	20px	Negatiivinen tila sarakkeiden välillä
`@siteWidth`	Kaikkien pylväiden ja kourujen laskettu summa	`.container-fixed()`Laskee pylväiden ja kourujen lukumäärän sekoituksen leveyden määrittämiseksi

Muuttujat VÄHEMMÄSSÄ

Bootstrapiin on sisäänrakennettu kourallinen muuttujia oletusarvoisen 940 pikselin ruudukkojärjestelmän mukauttamiseen, kuten yllä on dokumentoitu. Kaikki ruudukon muuttujat tallennetaan muuttujiin.less.

Kuinka muokata

Ruudukon muokkaaminen tarkoittaa kolmen @grid*muuttujan vaihtamista ja Bootstrapin uudelleenkääntämistä. Muuta ruudukkomuuttujia muuttujassa.less ja käytä yhtä neljästä dokumentoidusta tavasta kääntää uudelleen . Jos lisäät sarakkeita, muista lisätä grid.less-sarakkeiden CSS.

Pysyä reagoiva

Ruudukon mukauttaminen toimii vain oletustasolla, 940 kuvapisteen ruudukossa. Bootstrapin responsiivisten ominaisuuksien ylläpitämiseksi sinun on myös mukautettava responsive.less-ruudukot.

Kiinteä asettelu

Oletus- ja yksinkertainen 940 pikseliä leveä, keskitetty asettelu melkein mille tahansa verkkosivustolle tai sivulle, jonka tarjoaa yhden <div class="container">.

<body>
  <div class = "säilö" > 
    ...
  </div>
</body>

Nestemäinen asettelu

<div class="container-fluid">tarjoaa joustavan sivurakenteen, vähimmäis- ja enimmäisleveydet sekä vasemman sivupalkin. Se sopii erinomaisesti sovelluksiin ja asiakirjoihin.

<div class = "container-fluid" > 
  <div class = "rivin neste" > 
    <div class = "span2" > 
      <!--Sivupalkin sisältö-->
    </div>
    <div class = "span10" > 
      <!--Kehosisältö-->
    </div>
  </div>
</div>

Tuetut laitteet

Bootstrap tukee kourallista mediakyselyitä, jotka auttavat tekemään projekteistasi sopivampia eri laitteille ja näytön resoluutioille. Tässä on mitä sisältyy:

Label	Asettelun leveys	Sarakkeen leveys	Kourujen leveys
Älypuhelimet	480px ja alle	Nestekolonnit, ei kiinteitä leveyksiä
Muotokuva-tabletit	480 - 768 pikseliä	Nestekolonnit, ei kiinteitä leveyksiä
Maisema-tabletit	768 - 940 pikseliä	44px	20px
Oletus	940 pikseliä ja enemmän	60 pikseliä	20px
Suuri näyttö	1210px ja enemmän	70 pikseliä	30 kuvapistettä

Mitä he tekevät

Mediakyselyt mahdollistavat mukautetun CSS:n useiden ehtojen perusteella – suhteet, leveydet, näyttötyyppi jne. – mutta yleensä keskittyvät ympärille min-widthja max-width.

Muokkaa sarakkeen leveyttä ruudukossamme
Pinoa elementit kellumisen sijaan aina tarvittaessa
Muuta otsikoiden ja tekstin kokoa sopiviksi laitteille

Mediakyselyiden käyttäminen

Bootstrap ei sisällytä näitä mediakyselyitä automaattisesti, mutta niiden ymmärtäminen ja lisääminen on erittäin helppoa ja vaatii vain vähän asennusta. Sinulla on muutama vaihtoehto Bootstrapin responsiivisten ominaisuuksien sisällyttämiseen:

Käytä koottua responsiivista versiota bootstrap-responsive.css
Lisää @import "responsive.less" ja käännä Bootstrap uudelleen
Muokkaa ja käännä responsive.less uudelleen erillisenä

Mikset vain sisällytä sitä? Totta puhuen, kaiken ei tarvitse reagoida. Sen sijaan, että kannustaisimme kehittäjiä poistamaan tämän ominaisuuden, meidän on parasta ottaa se käyttöön.

  // Vaakapuhelimet ja alas
  @media ( max - leveys : 480 pikseliä ) { ... }     
 
  // Vaakapuhelimesta pystysuuntaiseen tablettiin
  @media ( suurin leveys : 768 kuvapistettä ) { ... }     
 
  // Pysty tabletti vaakasuuntaan ja työpöydälle
  @media ( min - leveys : 768px ) ja ( max - leveys : 940px ) { ... }        
 
  // Suuri työpöytä
  @media ( min - leveys : 1200 kuvapistettä ) { .. }