Tellingud

Nõuab HTML5 doctype'i

Bootstrap kasutab teatud HTML-i elemente ja CSS-i atribuute, mis nõuavad HTML5 doctype'i kasutamist. Lisage see kõigi oma projektide algusesse.

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

Tüpograafia ja lingid

Bootstrap määrab põhilised globaalsed kuvamis-, tüpograafia- ja linkistiilid. Täpsemalt, me:

Eemaldage marginkehal
Seadke background-color: white;pealebody
Kasutage oma tüpograafilise alusena atribuute @baseFontFamily, @baseFontSize, ja@baseLineHeight
Määrake globaalse lingi värv läbi @linkColorja rakendage ainult lingi allakriipsutusi:hover

Neid stiile võib leida tellingutest.vähem .

Lähtestage Normaliseerimise kaudu

Bootstrap 2 puhul on vana lähtestamisplokk loobutud Normalize.css -i kasuks, Nicolas Gallagheri ja Jonathan Neali projektist, mis toidab ka HTML5 Boilerplate'i . Kuigi me kasutame oma reset.less kaudu suurt osa Normalize'ist , oleme eemaldanud mõned elemendid spetsiaalselt Bootstrapi jaoks.

Reaalajas ruudustiku näide

Vaikimisi Bootstrapi ruudustikusüsteem kasutab 12 veergu , mis teeb 940 piksli laiuse konteineri ilma reageerimisfunktsioonideta . Kui tundlik CSS-fail on lisatud, kohandub ruudustik olenevalt teie vaateavast laiuseks 724 ja 1170 pikslit. 767 piksli vaateavade all muutuvad veerud sujuvaks ja kuhjuvad vertikaalselt.

Põhivõrgu HTML

Lihtsa kahe veeru paigutuse jaoks looge a .rowja lisage sobiv arv .span*veerge. Kuna tegemist on 12-veerulise ruudustikuga, .span*katab igaüks neist 12-st veerust teatud arvu ja peaks iga rea (või vanema veergude arvu) kohta alati liitma 12.

<div class = "rida" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Antud näites on meil .span4ja .span8, mis teeb kokku 12 veergu ja terve rea.

Veergude tasaarvestamine

.offset*Liigutage veerge klasside abil paremale . Iga klass suurendab veeru vasakut veerist terve veeru võrra. Näiteks .offset4liigub .span4üle nelja veeru.

3 nihe 2

3 nihe 1

3 nihe 2

6 nihe 3

<div class = "rida" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Pesastusveerud

Sisu pesastamiseks vaikeruudustikuga lisage olemasolevasse veergu uus veergude .rowkomplekt . Pesastatud read peaksid sisaldama veergude komplekti, mis annavad kokku selle ülemveergude arvu..span*.span*

1. taseme veerg

2. tase

<div class = "rida" > 
  <div class = "span9" > 
    1. taseme veerg
    <div class = "rida" > 
      <div class = "span6" > 2. tase </div> 
      <div class = "span3" > 2. tase </div> 
    </div>
  </div>
</div>

Reaalajas vedeliku võrgu näide

Vedeliku ruudustiku süsteem kasutab veergude laiuste jaoks pikslite asemel protsente. Sellel on samad reageerimisvõimed kui meie fikseeritud ruudustikusüsteemil, tagades peamiste ekraanieraldusvõimete ja seadmete õiged proportsioonid.

Põhiline sujuva ruudustiku HTML

Muutke mis tahes rida vedelaks, muutes .rowväärtuseks .row-fluid. Veergude klassid jäävad täpselt samaks, mistõttu on lihtne fikseeritud ja vedelate võre vahel vahetada.

<div class = "reavedelik" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Vedeliku tasaarvestus

Toimib samamoodi nagu fikseeritud ruudustikusüsteemi nihe: lisage .offset*mis tahes veergu, et nihe nii paljude veergude võrra.

4 nihe 4

3 nihe 3

6 nihe 6

<div class = "reavedelik" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Vedeliku pesitsemine

Vedelvõrgud kasutavad pesastamist erinevalt: iga pesastatud veergude tase peaks kokku liitma kuni 12 veergu. Selle põhjuseks on asjaolu, et vedeliku ruudustik kasutab laiuste määramiseks protsente, mitte piksleid.

Vedelik 12

Vedelik 6

<div class = "reavedelik" > 
  <div class = "span12" > 
    Vedelik 12
    <div class = "reavedelik" > 
      <div class = "span6" > 
        Vedelik 6
        <div class = "reavedelik" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

Fikseeritud paigutus

Pakub ühist fikseeritud laiusega (ja valikuliselt tundliku) paigutust, mis on ainult <div class="container">nõutav.

<keha>
  <div class = "konteiner" > 
    ...
  </div>
</body>

Vedeliku paigutus

Looge sujuv <div class="container-fluid">kaheveeruline leht, mis sobib suurepäraselt rakenduste ja dokumentide jaoks.

<div class = "container-fluid" > 
  <div class = "reavedelik" > 
    <div class = "span2" > 
      <!--Külgriba sisu-->
    </div>
    <div class = "span10" > 
      <!--Keha sisu-->
    </div>
  </div>
</div>

Reageerivate funktsioonide lubamine

Lülitage oma projektis sisse reageeriv CSS, lisades oma dokumendile õige metasildi ja täiendava laaditabeli <head>. Kui kompileerisite Bootstrapi lehel Kohandamine, peate lisama ainult metasildi.

<meta name = "vaateava" content = "width = seadme laius, esialgne skaala = 1,0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "laadileht" >

Pea püsti!Bootstrap ei sisalda praegu vaikimisi reageerivaid funktsioone, kuna kõik ei pea reageerima. Selle asemel, et julgustada arendajaid seda funktsiooni eemaldama, arvame, et parim on see vastavalt vajadusele lubada.

Reageeriva Bootstrapi kohta

Meediumipäringud võimaldavad kohandatud CSS-i, mis põhineb mitmel tingimusel (suhted, laiused, kuvamise tüüp jne), kuid tavaliselt keskenduvad min-widthja ümber max-width.

Muutke meie ruudustiku veeru laiust
Virna elemendid hõljumise asemel kõikjal, kus vaja
Muutke pealkirjade ja teksti suurust, et need oleksid seadmetele sobivamad

Kasutage meediapäringuid vastutustundlikult ja ainult oma mobiilsete vaatajaskondade jaoks. Suuremate projektide puhul kaaluge spetsiaalseid koodibaase, mitte meediumipäringute kihte.

Toetatud seadmed

Bootstrap toetab käputäis meediumipäringuid ühes failis, et muuta teie projektid erinevatele seadmetele ja ekraani eraldusvõimetele sobivamaks. Sisaldab järgmist:

Silt	Paigutuse laius	Veeru laius	Renni laius
Suur ekraan	1200 pikslit ja rohkem	70 pikslit	30 pikslit
Vaikimisi	980 pikslit ja rohkem	60 pikslit	20 pikslit
Portree tahvelarvutid	768 pikslit ja rohkem	42 pikslit	20 pikslit
Telefonidest tahvelarvutitesse	767 pikslit ja alla selle	Vedelkolonnid, fikseeritud laiused puuduvad
Telefonid	480 pikslit ja alla selle	Vedelkolonnid, fikseeritud laiused puuduvad

/* Suur töölaud */
@media ( min - laius : 1200 pikslit ) { ... }     
 
/* Portree tahvelarvuti horisontaalpaigutusse ja töölauale */
@media ( min - laius : 768 pikslit ) ja ( max - laius : 979 pikslit ) { ... }        
 
/* Telefoni horisontaalpaigutusega portree-tahvelarvutisse */
@media ( maksimaalne laius : 767px ) { ... } _     
 
/* Rõhtpaigutustelefonid ja alla */
@media ( maksimaalne laius : 480 pikslit ) { ... }

Vastuvõtlikud kommunaalklassid

Kiiremaks mobiilisõbralikuks arendamiseks kasutage neid utiliidiklasse sisu kuvamiseks ja peitmiseks seadme kaupa. Allpool on tabel saadaolevate klasside ja nende mõju kohta antud meediumipäringu paigutusele (märgistatud seadme järgi). Neid võib leida responsive.less.

Klass	Telefonid767 pikslit ja alla selle	Tabletid979 kuni 768 pikslit	LauaarvutidVaikimisi
`.visible-phone`	Nähtav	Peidetud	Peidetud
`.visible-tablet`	Peidetud	Nähtav	Peidetud
`.visible-desktop`	Peidetud	Peidetud	Nähtav
`.hidden-phone`	Peidetud	Nähtav	Nähtav
`.hidden-tablet`	Nähtav	Peidetud	Nähtav
`.hidden-desktop`	Nähtav	Nähtav	Peidetud

Millal kasutada

Kasutage piiratud arvul ja vältige samast saidist täiesti erinevate versioonide loomist. Selle asemel kasutage neid iga seadme esitluse täiendamiseks. Reageerivaid utiliite ei tohiks tabelitega kasutada ja seetõttu neid ei toetata.

Reageerivate kommunaalteenuste testjuhtum

Ülaltoodud klasside testimiseks muutke brauseri suurust või laadige see erinevatesse seadmetesse.

Nähtav aadressil...

Rohelised linnukesed näitavad, et klass on teie praeguses vaateaknas nähtav.

Telefon✔ Telefon
Tahvelarvuti✔ Tahvelarvuti
Töölaud✔ Töölaud

Peidetud...

Siin näitavad rohelised linnukesed, et klass on teie praeguses vaateaknas peidetud.

Telefon✔ Telefon
Tahvelarvuti✔ Tahvelarvuti
Töölaud✔ Töölaud

Globaalsed seaded