Bootstrap

Rakennustelineet

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.

Yleiset tyylit CSS-nollausta, typografiaa ja linkkejä varten

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.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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.

Oletusruudukkojärjestelmä 12 saraketta reagoivalla kierteellä

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

Bootstrapin oletusruudukkojärjestelmä käyttää 12 saraketta , joiden leveys on 724 pikseliä, 940 pikseliä (oletus ilman reagoivaa CSS:ää) ja 1 170 pikseliä. 767 kuvapisteen näkymän alapuolella sarakkeet muuttuvat juokseviksi ja pinoutuvat pystysuunnassa.

  1. <div class = "rivi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div class = "rivi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Taso 2 
  1. <div class = "rivi" > 
  2.   <div class = "span6" > 
  3.     Tason 1 sarake
  4.     <div class = "rivi" > 
  5.       <div class = "span3" > Taso 2 </div> 
  6.       <div class = "span3" > Taso 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid-ruudukkojärjestelmä 12 reagoivaa, prosenttipohjaista saraketta

Nestekolonnit

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

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ä

  1. <div class = "rivin neste" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Neste 6 
  1. <div class = "rivin neste" > 
  2.   <div class = "span12" > 
  3.     Sarakkeen taso 1
  4.     <div class = "rivin neste" > 
  5.       <div class = "span6" > Taso 2 </div> 
  6.       <div class = "span6" > Taso 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Ruudukon mukauttaminen

Muuttuva Oletusarvo Kuvaus
@gridColumns 12 Kolumnien numerot
@gridColumnWidth 60 pikseliä Jokaisen sarakkeen leveys
@gridGutterWidth 20px Negatiivinen tila sarakkeiden välillä

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.

Layouts Perusmallit verkkosivujen luomiseen

Kiinteä asettelu

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

  1. <body>
  2.   <div class = "säilö" > 
  3.     ...
  4.   </div>
  5. </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.

  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 suunnittelu Mediakyselyt erilaisille laitteille ja resoluutioille

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

  1. <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:

  1. Käytä koottua responsiivista versiota bootstrap-responsive.css
  2. Lisää @import "responsive.less" ja käännä Bootstrap uudelleen
  3. 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.

  1.   /* Vaakapuhelimet ja alas */
  2.   @media ( max - leveys : 480 pikseliä ) { ... }     
  3.  
  4.   /* Vaakasuuntainen puhelin pystysuuntaiseen tablettiin */
  5.   @media ( max - leveys : 767px ) { ... }     
  6.  
  7.   /* Pysty tabletista vaakasuuntaan ja työpöydälle */
  8.   @media ( min - leveys : 768px ) ja ( max - leveys : 979px ) { ... }        
  9.  
  10.   /* Iso työpöytä */
  11.   @media ( min - leveys : 1200 pikseliä ) { ... }

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

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ä