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.

Edellyttää HTML5-dokumenttityyppiä

Bootstrap käyttää HTML-elementtejä ja CSS-ominaisuuksia, jotka edellyttävät HTML5-dokumenttityypin käyttöä. Muista sisällyttää se projektisi jokaisen Bootstrapped-sivun alkuun.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Typografia ja linkit

Scaffolding.less - tiedostossa määritämme yleiset perusnäytöt, typografian ja linkityylit . Erityisesti me:

Poista marginaali rungosta
Aseta background-color: white;päällebody
Käytä attribuutteja @baseFontFamily, @baseFontSize, ja typografisena perustana@baseLineHeight
Aseta yleinen linkin väri @linkColorja käytä vain linkin alleviivauksia:hover

Nollaa Normalize-toiminnolla

Bootstrap 2:sta lähtien perinteinen CSS-nollaus on kehittynyt hyödyntämään Normalize.css -elementtejä, Nicolas Gallagherin projektia, joka toimii myös HTML5 Boilerplate -sovelluksena .

Uusi nollaus löytyy edelleen tiedostosta reset.less , mutta monet elementit on poistettu lyhyyden ja tarkkuuden vuoksi.

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

Sisäkkäisten rivien tulee sisältää joukko sarakkeita, jotka laskevat yhteen sen ylätason sarakkeiden lukumäärän. Esimerkiksi kaksi sisäkkäistä .span3saraketta tulisi sijoittaa .span6.

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>

Nestekolonnit

Prosentteja, ei pikseleitä

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.

Nestemäiset rivit

Tee mistä tahansa rivistä nestettä vaihtamalla .rowmuotoon .row-fluid. Sarakkeet pysyvät täsmälleen samoina, mikä tekee vaihtamisesta kiinteän ja nestemäisen asettelun välillä erittäin helppoa.

Merkintä

<div class = "rivin neste" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Nesteen pesimä

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.

Neste 12

Neste 6

<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

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 yksittäinen <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>

Responsiiviset laitteet

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

Käytä mediakyselyitä vastuullisesti ja vain aloituksena mobiiliyleisöillesi. Suuremmissa projekteissa harkitse omistettuja koodipohjaa eikä mediakyselyjen kerroksia.

Tuetut laitteet

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ä
Älypuhelimista tabletteihin	767px ja alle	Nestekolonnit, ei kiinteitä leveyksiä
Muotokuva-tabletit	768px ja enemmän	42px	20px
Oletus	980px ja enemmän	60 pikseliä	20px
Suuri näyttö	1200px ja enemmän	70 pikseliä	30 kuvapistettä

Vaatii sisällönkuvauskentän

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

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

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 ( suurin 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ä ) { .. }

Responsiiviset hyötyluokat

Mitä ne ovat

Mobiiliystävällisen kehityksen nopeuttamiseksi käytä näitä perushyödyllisyysluokkia sisällön näyttämiseen ja piilottamiseen laitteittain.

Milloin käyttää

Käytä rajoitetusti ja vältä täysin erilaisten versioiden luomista samasta sivustosta. Käytä niitä sen sijaan täydentämään kunkin laitteen esitystä.

Voit esimerkiksi näyttää <select>navigointielementin mobiiliasetteluissa, mutta et tableteissa tai pöytätietokoneissa.

Tukiluokat

Tässä näkyy taulukko tukemistamme luokista ja niiden vaikutuksista tiettyyn mediakyselyasetteluun (merkitty laitekohtaisesti). Ne löytyvät osoitteesta responsive.less.

Luokka	Puhelimet480px ja alle	Tabletit767px ja alle	Pöytäkoneet768px ja enemmän
`.visible-phone`	Näkyy	Piilotettu	Piilotettu
`.visible-tablet`	Piilotettu	Näkyy	Piilotettu
`.visible-desktop`	Piilotettu	Piilotettu	Näkyy
`.hidden-phone`	Piilotettu	Näkyy	Näkyy
`.hidden-tablet`	Näkyy	Piilotettu	Näkyy
`.hidden-desktop`	Näkyy	Näkyy	Piilotettu

Testitapaus

Muuta selaimesi kokoa tai lataa se eri laitteille testataksesi yllä olevia luokkia.

Näkyy osoitteessa...

Puhelin✔ Puhelin
Tabletti✔ Tabletti
Työpöytä✔ Työpöytä

Piilotettu...

Puhelin✔ Puhelin
Tabletti✔ Tabletti
Työpöytä✔ Työpöytä