Bootstrap

Sastatnes

Bootstrap pamatā ir atsaucīgi 12 kolonnu režģi, izkārtojumi un komponenti.

Globālie iestatījumi

Nepieciešams HTML5 doctype

Bootstrap izmanto noteiktus HTML elementus un CSS rekvizītus, kuriem nepieciešams izmantot HTML5 doctype. Iekļaujiet to visu savu projektu sākumā.

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

Tipogrāfija un saites

Bootstrap iestata pamata globālo displeju, tipogrāfiju un saišu stilus. Konkrēti, mēs:

  • Noņemt marginuz ķermeņa
  • Iestatiet background-color: white;uzbody
  • Izmantojiet atribūtus @baseFontFamily, @baseFontSize, un @baseLineHeightkā mūsu tipogrāfisko bāzi
  • Iestatiet globālās saites krāsu @linkColorun izmantojiet tikai saites pasvītrojumus:hover

Šos stilus var atrast sastatnēs.mazāk .

Atiestatīt, izmantojot Normalizēt

Izmantojot Bootstrap 2, vecais atiestatīšanas bloks ir atcelts par labu Normalize.css — Nikolā Galahera un Džonatana Nīla projektam, kas arī nodrošina HTML5 Boilerplate darbību . Lai gan mēs izmantojam lielu daļu Normalize savā reset.less , esam noņēmuši dažus elementus, kas īpaši paredzēti Bootstrap.

Noklusējuma režģa sistēma

Tiešā režģa piemērs

Noklusējuma Bootstrap režģa sistēmā tiek izmantotas 12 kolonnas , tādējādi nodrošinot 940 pikseļus platu konteineru bez iespējotām adaptīvām funkcijām . Ja ir pievienots adaptīvais CSS fails, režģis pielāgojas 724 pikseļu un 1170 pikseļu platumam atkarībā no jūsu skata loga. Zem 767 pikseļu skata vietām kolonnas kļūst plūstošas ​​un sakrājas vertikāli.

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

Pamata režģa HTML

Vienkāršam divu kolonnu izkārtojumam izveidojiet a .rowun pievienojiet atbilstošu .span*kolonnu skaitu. Tā kā šis ir 12 kolonnu režģis, katra .span*aptver vairākas no šīm 12 slejām, un katrai rindai (vai kolonnu skaitam vecākajā) vienmēr ir jāsaskaita līdz 12.

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

Šajā piemērā mums ir .span4un .span8, kas kopā veido 12 kolonnas un pilnu rindu.

Kolonnu nobīde

Pārvietojiet kolonnas pa labi, izmantojot .offset*klases. Katra klase palielina kolonnas kreiso malu par veselu kolonnu. Piemēram, .offset4pārvietojas .span4pa četrām kolonnām.

4
3 nobīde 2
3 nobīde 1
3 nobīde 2
6 nobīde 3 
  1. <div class = "rinda" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Ligzdošanas kolonnas

Lai ligzdotu saturu ar noklusējuma režģi, esošajā kolonnā pievienojiet jaunu kolonnu .rowkopu . Ligzdotajās rindās ir jāietver kolonnu kopa, kas kopā veido tās vecāk kolonnu skaitu..span*.span*

1. līmeņa kolonna
2. līmenis
2. līmenis 
  1. <div class = "rinda" > 
  2.   <div class = "span9" > 
  3.     1. līmeņa kolonna
  4.     <div class = "rinda" > 
  5.       <div class = "span6" > 2. līmenis </div> 
  6.       <div class = "span3" > 2. līmenis </div> 
  7.     </div>
  8.   </div>
  9. </div>

Šķidruma režģa sistēma

Dzīvā šķidruma režģa piemērs

Šķidruma režģa sistēma kolonnu platumam pikseļu vietā izmanto procentus. Tam ir tādas pašas reaģēšanas iespējas kā mūsu fiksētajai režģa sistēmai, nodrošinot pareizas proporcijas galvenajām ekrāna izšķirtspējām un ierīcēm.

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

Pamata šķidrā režģa HTML

Padariet jebkuru rindu par "plūstošu", mainot .rowuz .row-fluid. Kolonnu klases paliek tieši tādas pašas, tāpēc ir viegli pārslēgties starp fiksētajiem un šķidrajiem režģiem.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Šķidruma kompensācija

Darbojas tāpat kā fiksētā režģa sistēmas nobīde: pievienojiet .offset*jebkurai kolonnai, lai kompensētu par tik daudzām kolonnām.

4
4 nobīde 4
3 nobīde 3
3 nobīde 3
6 nobīde 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Šķidruma ligzdošana

Šķidrajos režģos ligzdošana tiek izmantota atšķirīgi: katram ligzdotajam kolonnu līmenim ir jāpievieno līdz 12 kolonnām. Tas ir tāpēc, ka šķidrais režģis platuma iestatīšanai izmanto procentus, nevis pikseļus.

Šķidrums 12
Šķidrums 6
Šķidrums 6
Šķidrums 6
Šķidrums 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Šķidrums 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Šķidrums 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > 6. šķidrums </div> 
  9.           <div class = "span6" > 6. šķidrums </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > 6. šķidrums </div> 
  13.     </div>
  14.   </div>
  15. </div>

Izkārtojumi

Fiksēts izkārtojums

Nodrošina kopīgu fiksēta platuma (un pēc izvēles arī atsaucīgu) izkārtojumu, tikai <div class="container">nepieciešams.

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

Šķidruma izkārtojums

Izveidojiet plūstošu, divu sleju lapu ar<div class="container-fluid"> — lieliski piemērota lietojumprogrammām un dokumentiem.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sānjoslas saturs-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Ķermeņa saturs-->
  8.     </div>
  9.   </div>
  10. </div>

Atsaucīgs dizains

Adaptīvo funkciju iespējošana

Ieslēdziet adaptīvo CSS savā projektā, iekļaujot dokumentā atbilstošu metatagu un papildu stila lapu <head>. Ja esat apkopojis Bootstrap no lapas Pielāgot, jums jāiekļauj tikai metatags.

  1. <meta name = "viewport" content = "platums=ierīces platums, sākotnējais mērogs=1,0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stila lapa" >

Uzmanību!Bootstrap pašlaik pēc noklusējuma neietver atsaucīgus līdzekļus, jo ne visam ir jābūt atsaucīgam. Tā vietā, lai mudinātu izstrādātājus noņemt šo funkciju, mēs uzskatām, ka vislabāk ir to iespējot pēc vajadzības.

Par responsīvo Bootstrap

Atsaucīgas ierīces

Multivides vaicājumi ļauj pielāgot CSS, pamatojoties uz vairākiem nosacījumiem — proporcijām, platumiem, displeja veidu utt., bet parasti koncentrējas ap min-widthun max-width.

  • Mainiet kolonnas platumu mūsu režģī
  • Sakraujiet elementus, nevis pludiniet visur, kur nepieciešams
  • Mainiet virsrakstu un teksta izmērus, lai tie būtu piemērotāki ierīcēm

Izmantojiet multivides vaicājumus atbildīgi un tikai kā sākumu mobilajām ierīcēm. Lielākiem projektiem apsveriet īpašas kodu bāzes, nevis multivides vaicājumu slāņus.

Atbalstītās ierīces

Bootstrap atbalsta dažus multivides vaicājumus vienā failā, lai palīdzētu padarīt jūsu projektus piemērotākus dažādām ierīcēm un ekrāna izšķirtspējām. Lūk, kas ir iekļauts:

Etiķete Izkārtojuma platums Kolonnas platums Notekas platums
Liels displejs 1200 pikseļi un vairāk 70 pikseļi 30 pikseļi
Noklusējums 980 pikseļi un vairāk 60 pikseļi 20 pikseļi
Portreta planšetdatori 768 pikseļi un vairāk 42 pikseļi 20 pikseļi
Telefoni uz planšetdatoriem 767 pikseļi un mazāk Šķidruma kolonnas, bez fiksēta platuma
Tālruņi 480 pikseļi un mazāk Šķidruma kolonnas, bez fiksēta platuma 
  1. /* Liela darbvirsma */
  2. @media ( min platums : 1200 pikseļi ) { ... }     
  3.  
  4. /* Portreta planšetdators uz ainavu un darbvirsmu */
  5. @media ( minimālais platums : 768 pikseļi ) un ( maks . platums : 979 pikseļi ) { ... }        
  6.  
  7. /* Ainava no tālruņa uz portreta planšetdatoru */
  8. @media ( maksimālais platums : 767 pikseļi ) { ... }     
  9.  
  10. /* Ainavas tālruņi un uz leju */
  11. @media ( maksimālais platums : 480 pikseļi ) { ... }

Atsaucīgas komunālās klases

Ātrākai mobilajām ierīcēm draudzīgai izstrādei izmantojiet šīs utilītas klases satura rādīšanai un slēpšanai pēc ierīces. Tālāk ir redzama pieejamo klašu tabula un to ietekme uz konkrēto multivides vaicājuma izkārtojumu (iezīmēta pēc ierīces). Tos var atrast responsive.less.

Klase Tālruņi767 pikseļi un mazāk Tabletes979 pikseļi līdz 768 pikseļi GalddatoriNoklusējums
.visible-phone Redzams
.visible-tablet Redzams
.visible-desktop Redzams
.hidden-phone Redzams Redzams
.hidden-tablet Redzams Redzams
.hidden-desktop Redzams Redzams

Kad lietot

Izmantojiet ierobežotā daudzumā un izvairieties no vienas un tās pašas vietnes pilnīgi atšķirīgu versiju izveides. Tā vietā izmantojiet tos, lai papildinātu katras ierīces prezentāciju. Adaptīvās utilītas nedrīkst izmantot kopā ar tabulām, un tāpēc tās netiek atbalstītas.

Atsaucīgu komunālo pakalpojumu testa gadījums

Mainiet pārlūkprogrammas izmērus vai ielādējiet dažādas ierīces, lai pārbaudītu iepriekš minētās klases.

Redzams uz...

Zaļās atzīmes norāda, ka klase ir redzama jūsu pašreizējā skata logā.

  • Tālrunis✔ Tālrunis
  • Planšetdators✔ Planšetdators
  • Darbvirsma✔ Darbvirsma

Paslēpts uz...

Šeit zaļās atzīmes norāda, ka klase ir paslēpta jūsu pašreizējā skata logā.

  • Tālrunis✔ Tālrunis
  • Planšetdators✔ Planšetdators
  • Darbvirsma✔ Darbvirsma