Bootstrap

Rakennustelineet

Bootstrap on rakennettu reagoiville 12-sarakkeisille ruudukoille, asetteluille ja komponenteille.

Yleiset asetukset

Edellyttää HTML5-dokumenttityyppiä

Bootstrap käyttää tiettyjä HTML-elementtejä ja CSS-ominaisuuksia, jotka edellyttävät HTML5-dokumenttityypin käyttöä. Sisällytä se kaikkien projektiesi alkuun.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typografia ja linkit

Bootstrap määrittää yleiset perusnäytöt, typografian ja linkityylit. Erityisesti me:

  • Poista marginvartalosta
  • 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

Nämä tyylit löytyvät telineistä .

Nollaa Normalize-toiminnolla

Bootstrap 2:n myötä vanha nollauslohko on poistettu Normalize.css :n hyväksi, Nicolas Gallagherin projektiksi, joka toimii myös HTML5 Boilerplatea . Vaikka käytämme suurta osaa Normalizesta reset.less -tiedostossa , olemme poistaneet joitain elementtejä erityisesti Bootstrapia varten.

Oletusverkkojärjestelmä

Esimerkki live-ruudukosta

Oletus Bootstrap-ruudukkojärjestelmä käyttää 12 saraketta , mikä tekee 940 pikseliä leveästä säilöstä ilman reagoivia ominaisuuksia . Kun responsiivinen CSS-tiedosto on lisätty, ruudukko mukautuu 724 pikseliä ja 1 170 pikseliä leveäksi kuvaportistasi riippuen. 767 kuvapisteen näkymän alapuolella sarakkeet muuttuvat juokseviksi ja pinoutuvat pystysuunnassa.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Perusruudukko HTML

Jos haluat yksinkertaisen kahden sarakkeen asettelun, luo a .rowja lisää sopiva määrä .span*sarakkeita. Koska tämä on 12 sarakkeen ruudukko, jokainen .span*kattaa tietyn määrän näistä 12 sarakkeesta, ja jokaisen rivin (tai ylätason sarakkeiden lukumäärän) tulee aina olla 12.

  1. <div class = "rivi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Tässä esimerkissä meillä on .span4ja .span8, jolloin yhteensä 12 saraketta ja täydellinen rivi.

Sarakkeiden offsetointi

Siirrä sarakkeita oikealle .offset*luokkien avulla. Jokainen luokka lisää sarakkeen vasenta marginaalia kokonaisella sarakkeella. Esimerkiksi .offset4siirtyy .span4neljän sarakkeen yli.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "rivi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Sisäkkäiset sarakkeet

Jos haluat upottaa sisältösi oletusruudukkoon, lisää uusi .rowja joukko .span*sarakkeita olemassa olevaan .span*sarakkeeseen. Sisäkkäisten rivien tulee sisältää joukko sarakkeita, jotka laskevat yhteen sen ylätason sarakkeiden lukumäärän.

Tason 1 sarake
Taso 2
Taso 2 
  1. <div class = "rivi" > 
  2.   <div class = "span9" > 
  3.     Tason 1 sarake
  4.     <div class = "rivi" > 
  5.       <div class = "span6" > Taso 2 </div> 
  6.       <div class = "span3" > Taso 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Nesteverkkojärjestelmä

Esimerkki live-nesteverkosta

Nesteruudukkojärjestelmä käyttää prosenttiosuuksia pikseleiden sijasta sarakkeiden leveyksissä. Siinä on samat reagointiominaisuudet kuin kiinteässä ruudukkojärjestelmässämme, mikä varmistaa oikeat mittasuhteet avainnäytön resoluutioille ja laitteille.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Sujuva perusruudukko HTML

Tee mistä tahansa rivistä "nestemäinen" muuttamalla .rowmuotoon .row-fluid. Pylväsluokat pysyvät täsmälleen samoina, mikä helpottaa kiinteiden ja nestemäisten ristikoiden vaihtamista.

  1. <div class = "rivin neste" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Nesteen tasaus

Toimii samalla tavalla kuin kiinteä ruudukkojärjestelmän .offset*siirtymä: lisää mihin tahansa sarakkeeseen siirtyäksesi näin monella sarakkeella.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div class = "rivin neste" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Nesteen pesimä

Sisäkkäinen ruudukko on hieman erilainen: sisäkkäisten sarakkeiden lukumäärä ei saa vastata ylätason sarakkeiden määrää. Sen sijaan jokainen sisäkkäisten sarakkeiden taso nollataan, koska jokainen rivi vie 100 % yläsarakkeesta.

Neste 12
Neste 6
Neste 6 
  1. <div class = "rivin neste" > 
  2.   <div class = "span12" > 
  3.     Neste 12
  4.     <div class = "rivin neste" > 
  5.       <div class = "span6" > Neste 6 </div> 
  6.       <div class = "span6" > Neste 6 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Asettelut

Kiinteä asettelu

Tarjoaa yhteisen kiinteän leveyden (ja valinnaisesti reagoivan) asettelun, joka <div class="container">vaaditaan vain.

  1. <body>
  2.   <div class = "säilö" > 
  3.     ...
  4.   </div>
  5. </body>

Nestemäinen asettelu

Luo sujuva, <div class="container-fluid">kaksisarakkeinen sivu, joka sopii erinomaisesti sovelluksiin ja asiakirjoihin.

  1. <div class = "container-fluid" > 
  2.   <div class = "rivin neste" > 
  3.     <div class = "span2" > 
  4.       <!--Sivupalkin sisältö-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Kehosisältö-->
  8.     </div>
  9.   </div>
  10. </div>

Responsiivinen muotoilu

Responsiivisten ominaisuuksien käyttöönotto

Ota responsiivinen CSS käyttöön projektissasi sisällyttämällä oikea sisällönkuvauskenttä ja ylimääräinen tyylitaulukko <head>dokumenttiin. Jos olet koonnut Bootstrapin Mukauta-sivulta, sinun tarvitsee vain sisällyttää sisällönkuvauskenttä.

  1. <meta name = "viewport" content = "width=device-width, original-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "tyylitaulukko" >

Varoitus!Bootstrap ei sisällä oletusarvoisesti reagoivia ominaisuuksia tällä hetkellä, koska kaiken ei tarvitse olla responsiivista. Sen sijaan, että kannustaisimme kehittäjiä poistamaan tämän ominaisuuden, meidän on parasta ottaa se käyttöön tarpeen mukaan.

Tietoja responsiivisesta Bootstrapista

Responsiiviset laitteet

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
Suuri näyttö 1200px ja enemmän 70 pikseliä 30 kuvapistettä
Oletus 980px ja enemmän 60 pikseliä 20px
Muotokuva-tabletit 768px ja enemmän 42px 20px
Puhelimet tabletteihin 767px ja alle Nestekolonnit, ei kiinteitä leveyksiä
Puhelimet 480px ja alle Nestekolonnit, ei kiinteitä leveyksiä 
  1. /* Iso työpöytä */
  2. @media ( min - leveys : 1200 pikseliä ) { ... }     
  3.  
  4. /* Pysty tabletista vaakasuuntaan ja työpöydälle */
  5. @media ( min - leveys : 768px ) ja ( max - leveys : 979px ) { ... }        
  6.  
  7. /* Vaakasuuntainen puhelin pystysuuntaiseen tablettiin */
  8. @media ( max - leveys : 767px ) { ... }     
  9.  
  10. /* Vaakapuhelimet ja alas */
  11. @media ( max - leveys : 480 pikseliä ) { ... }

Responsiiviset hyötyluokat

Mobiiliystävällisen kehityksen nopeuttamiseksi käytä näitä hyödyllisyysluokkia sisällön näyttämiseen ja piilottamiseen laitteittain. Alla on taulukko käytettävissä olevista luokista ja niiden vaikutuksista tiettyyn mediakyselyasetteluun (merkitty laitekohtaisesti). Ne löytyvät osoitteesta responsive.less.

Luokka Puhelimet767px ja alle Tabletit979 - 768 pikseliä PöytäkoneetOletus
.visible-phone Näkyy
.visible-tablet Näkyy
.visible-desktop Näkyy
.hidden-phone Näkyy Näkyy
.hidden-tablet Näkyy Näkyy
.hidden-desktop Näkyy Näkyy

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ä. Responsiivisia apuohjelmia ei tule käyttää taulukoiden kanssa, joten niitä ei tueta.

Responsiivisten apuohjelmien testitapaus

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

Näkyy osoitteessa...

Vihreät valintamerkit osoittavat, että luokka näkyy nykyisessä näkymässäsi.

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

Piilotettu...

Tässä vihreät valintamerkit osoittavat, että luokka on piilotettu nykyiseen katseluporttiin.

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