Bootstrap

Tellingud

Bootstrap on üles ehitatud tundlikele 12-veerulistele võrgustikele, paigutustele ja komponentidele.

Globaalsed seaded

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.

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

Vaikimisi võrgusüsteem

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.

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

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.

  1. <div class = "rida" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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.

4
3 nihe 2
3 nihe 1
3 nihe 2
6 nihe 3 
  1. <div class = "rida" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </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
2. tase 
  1. <div class = "rida" > 
  2.   <div class = "span9" > 
  3.     1. taseme veerg
  4.     <div class = "rida" > 
  5.       <div class = "span6" > 2. tase </div> 
  6.       <div class = "span3" > 2. tase </div> 
  7.     </div>
  8.   </div>
  9. </div>

Vedeliku võrgusüsteem

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.

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

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.

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

Vedeliku tasaarvestus

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

4
4 nihe 4
3 nihe 3
3 nihe 3
6 nihe 6 
  1. <div class = "reavedelik" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </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
Vedelik 6
Vedelik 6
Vedelik 6 
  1. <div class = "reavedelik" > 
  2.   <div class = "span12" > 
  3.     Vedelik 12
  4.     <div class = "reavedelik" > 
  5.       <div class = "span6" > 
  6.         Vedelik 6
  7.         <div class = "reavedelik" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Paigutused

Fikseeritud paigutus

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

  1. <keha>
  2.   <div class = "konteiner" > 
  3.     ...
  4.   </div>
  5. </body>

Vedeliku paigutus

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

  1. <div class = "container-fluid" > 
  2.   <div class = "reavedelik" > 
  3.     <div class = "span2" > 
  4.       <!--Külgriba sisu-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Keha sisu-->
  8.     </div>
  9.   </div>
  10. </div>

Tundlik disain

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.

  1. <meta name = "vaateava" content = "width = seadme laius, esialgne skaala = 1,0" >  
  2. <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

Reageerivad seadmed

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 
  1. /* Suur töölaud */
  2. @media ( min - laius : 1200 pikslit ) { ... }     
  3.  
  4. /* Portree tahvelarvuti horisontaalpaigutusse ja töölauale */
  5. @media ( min - laius : 768 pikslit ) ja ( max - laius : 979 pikslit ) { ... }        
  6.  
  7. /* Telefoni horisontaalpaigutusega portree-tahvelarvutisse */
  8. @media ( maksimaalne laius : 767px ) { ... } _     
  9.  
  10. /* Rõhtpaigutustelefonid ja alla */
  11. @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
.visible-tablet Nähtav
.visible-desktop Nähtav
.hidden-phone Nähtav Nähtav
.hidden-tablet Nähtav Nähtav
.hidden-desktop Nähtav Nähtav

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