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.
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.
- <div class = "rivi" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
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 .row
sarakkeeseen ..span*
.span*
- <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>
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 |
Bootstrapiin on sisäänrakennettu kourallinen muuttujia oletusarvoisen 940 pikselin ruudukkojärjestelmän mukauttamiseen, kuten yllä on dokumentoitu. Kaikki ruudukon muuttujat tallennetaan muuttujiin.less.
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.
Ruudukon mukauttaminen toimii vain oletustasolla, 940 kuvapisteen ruudukossa. Bootstrapin responsiivisten ominaisuuksien ylläpitämiseksi sinun on myös mukautettava responsive.less-ruudukot.
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>
<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>
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ä |
Mediakyselyt mahdollistavat mukautetun CSS:n useiden ehtojen perusteella – suhteet, leveydet, näyttötyyppi jne. – mutta yleensä keskittyvät ympärille min-width
ja max-width
.
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:
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ä ) { .. }