Bootstrap on rakennettu reagoivaan 12 sarakkeen ruudukkoon. Olemme myös sisällyttäneet tähän järjestelmään kiinteän ja tasaisen 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*
Sisäkkäisten rivien tulee sisältää joukko sarakkeita, jotka laskevat yhteen sen ylätason sarakkeiden lukumäärän. Esimerkiksi kaksi sisäkkäistä .span3
saraketta tulisi sijoittaa .span6
.
- <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>
Nesteruudukkojärjestelmä käyttää sarakkeiden leveyksiin prosentteja kiinteiden pikselien sijaan. Siinä on myös samat responsiiviset muunnelmat kuin kiinteässä ruudukkojärjestelmässämme, mikä varmistaa oikeat mittasuhteet avainnäytön resoluutioille ja laitteille.
Tee mistä tahansa rivistä nestettä vaihtamalla .row
muotoon .row-fluid
. Sarakkeet pysyvät täsmälleen samoina, mikä tekee vaihtamisesta kiinteän ja nestemäisen asettelun välillä erittäin helppoa.
- <div class = "rivin neste" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Sisäkkäisten ruudukoiden yhdistäminen on hieman erilaista: sisäkkäisten sarakkeiden lukumäärän ei tarvitse vastata ylätason sarakkeita. Sen sijaan sarakkeet nollataan kullakin tasolla, koska jokainen rivi vie 100 % yläsarakkeesta.
- <div class = "rivin neste" >
- <div class = "span12" >
- Sarakkeen taso 1
- <div class = "rivin neste" >
- <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ä yhdessä tiedostossa, mikä auttaa 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 - 979 pikseliä | 42px | 20px |
Oletus | 980px ja enemmän | 60 pikseliä | 20px |
Suuri näyttö | 1210px ja enemmän | 70 pikseliä | 30 kuvapistettä |
Varmista, että laitteet näyttävät responsiiviset sivut oikein, lisäämällä näkymän sisällönkuvauskenttä.
- <meta name = "viewport" content = "width=device-width, original-scale=1.0" >
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 : 980px ) { ... }
- // Suuri työpöytä
- @media ( min - leveys : 1200 kuvapistettä ) { .. }