Bootstrap

Sastatnes

Bootstrap ir veidots uz atsaucīga 12 kolonnu režģa. Mēs esam iekļāvuši arī fiksēta un mainīga platuma izkārtojumus, kuru pamatā ir šī sistēma.

Globālie stili CSS atiestatīšanai, tipogrāfijai un saitēm

Nepieciešams HTML5 doctype

Bootstrap izmanto HTML elementus un CSS rekvizītus, kuriem nepieciešams izmantot HTML5 doctype. Noteikti iekļaujiet to katras projekta Bootstrapped lapas sākumā.

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

Tipogrāfija un saites

Failā scaffolding.less mēs iestatām pamata globālo displeju, tipogrāfiju un saišu stilus. Konkrēti, mēs:

  • Noņemiet malu uz korpusa
  • Iestatiet background-color: white;uzbody
  • Izmantojiet atribūtus , un kā mūsu @baseFontFamilytipogrāfisko @baseFontSizebāzi@baseLineHeight
  • Iestatiet globālās saites krāsu @linkColorun izmantojiet tikai saites pasvītrojumus:hover

Atiestatīt, izmantojot Normalizēt

Sākot ar Bootstrap 2, tradicionālā CSS atiestatīšana ir attīstījusies, lai izmantotu elementus no Normalize.css — Nikolasa Galahera projekta, kas arī nodrošina HTML5 Boilerplate darbību .

Jauno atiestatīšanu joprojām var atrast vietnē reset.less , taču daudzi elementi ir noņemti īsuma un precizitātes labad.

Noklusējuma režģa sistēma 12 kolonnas ar atsaucīgu pagriezienu

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

Noklusējuma režģa sistēma, kas tiek nodrošināta kā daļa no Bootstrap, ir 940 pikseļus plats, 12 kolonnu režģis .

Tam ir arī četri reaģējoši varianti dažādām ierīcēm un izšķirtspējām: tālrunis, planšetdatora portrets, planšetdatora ainava un mazi galddatori un lieli platekrāna galddatori.

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

Kā parādīts šeit, pamata izkārtojumu var izveidot ar divām "kolonnām", no kurām katra aptver vairākas no 12 pamata kolonnām, kuras definējām kā daļu no mūsu režģa sistēmas.


Kolonnu nobīde

4
4 nobīde 4
3 nobīde 3
3 nobīde 3
8 nobīde 4 
  1. <div class = "rinda" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Ligzdošanas kolonnas

Izmantojot Bootstrap statisko (neplūstošo) režģa sistēmu, ligzdošana ir vienkārša. Lai ievietotu saturu, vienkārši pievienojiet jaunu kolonnu .rowkopu .span*esošai .span*kolonnai.

Piemērs

Ligzdotajās rindās ir jāietver kolonnu kopa, kas kopā veido tās vecāk kolonnu skaitu. Piemēram, divas ligzdotas .span3kolonnas ir jāievieto .span6.

Kolonnas 1. līmenis
2. līmenis
2. līmenis 
  1. <div class = "rinda" > 
  2.   <div class = "span12" > 
  3.     Kolonnas 1. līmenis
  4.     <div class = "rinda" > 
  5.       <div class = "span6" > 2. līmenis </div> 
  6.       <div class = "span6" > 2. līmenis </div> 
  7.     </div>
  8.   </div>
  9. </div>

Šķidruma režģa sistēma 12 atsaucīgas, uz procentiem balstītas kolonnas

Šķidruma kolonnas

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

Procenti, nevis pikseļi

Šķidruma režģa sistēma kolonnu platumam izmanto procentus, nevis fiksētus pikseļus. Tam ir arī tādas pašas adaptīvās variācijas kā mūsu fiksētā režģa sistēmai, nodrošinot atbilstošas ​​proporcijas galvenajām ekrāna izšķirtspējām un ierīcēm.

Šķidruma rindas

Padariet jebkuru rindu šķidru, vienkārši mainot .rowuz .row-fluid. Kolonnas paliek tieši tādas pašas, tāpēc ir ļoti vienkārši pārslēgties starp fiksēto un mainīgo izkārtojumu.

Atzīmes

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

Šķidruma ligzdošana

Ligzdošana ar šķidriem režģiem ir nedaudz atšķirīga: ligzdoto kolonnu skaitam nav jāatbilst vecākajam. Tā vietā jūsu kolonnas tiek atiestatītas katrā līmenī, jo katra rinda aizņem 100% no vecākkolonnas.

Šķidrums 12
Šķidrums 6
Šķidrums 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Kolonnas 1. līmenis
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 2. līmenis </div> 
  6.       <div class = "span6" > 2. līmenis </div> 
  7.     </div>
  8.   </div>
  9. </div>

Režģa pielāgošana

Mainīgs Noklusējuma vērtība Apraksts
@gridColumns 12 Kolonnu skaits
@gridColumnWidth 60 pikseļi Katras kolonnas platums
@gridGutterWidth 20 pikseļi Negatīvā atstarpe starp kolonnām

Mainīgie MAZĀK

Programmā Bootstrap ir iebūvēti daži mainīgie, lai pielāgotu noklusējuma 940 pikseļu režģa sistēmu, kas dokumentēta iepriekš. Visi režģa mainīgie tiek glabāti mainīgajos.mazāk.

Kā pielāgot

Modificēt režģi nozīmē mainīt trīs @grid*mainīgos un pārkompilēt Bootstrap. Mainiet režģa mainīgos mainīgos.less un izmantojiet vienu no četriem dokumentētajiem pārkompilēšanas veidiem . Ja pievienojat vairāk kolonnu, noteikti pievienojiet CSS tiem, kas atrodas grid.less.

Paliek atsaucīgam

Režģa pielāgošana darbojas tikai noklusējuma līmenī — 940 pikseļu režģī. Lai saglabātu Bootstrap atsaucīgos aspektus, jums būs arī jāpielāgo režģi responsive.less.

Izkārtojumi Pamata veidnes tīmekļa lapu izveidei

Fiksēts izkārtojums

Noklusējuma un vienkāršais 940 pikseļu platums, centrēts izkārtojums gandrīz jebkurai vietnei vai lapai, ko nodrošina viens <div class="container">.

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

Šķidruma izkārtojums

<div class="container-fluid">nodrošina elastīgu lapas struktūru, minimālo un maksimālo platumu, kā arī kreiso sānjoslu. Tas ir lieliski piemērots lietotnē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>

Adaptīvs dizains Multivides vaicājumi dažādām ierīcēm un izšķirtspējām

Atsaucīgas ierīces

Ko viņi dara

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
Viedtālruņi 480 pikseļi un mazāk Šķidruma kolonnas, bez fiksēta platuma
Viedtālruņi uz planšetdatoriem 767 pikseļi un mazāk Šķidruma kolonnas, bez fiksēta platuma
Portreta planšetdatori 768 pikseļi un vairāk 42 pikseļi 20 pikseļi
Noklusējums 980 pikseļi un vairāk 60 pikseļi 20 pikseļi
Liels displejs 1200 pikseļi un vairāk 70 pikseļi 30 pikseļi

Nepieciešams metatags

Lai nodrošinātu, ka ierīces pareizi parāda adaptīvās lapas, iekļaujiet skatvietas metatagu.

  1. <meta name = "viewport" content = "platums=ierīces platums, sākotnējais mērogs=1,0" >

Izmantojot multivides vaicājumus

Bootstrap automātiski neietver šos multivides vaicājumus, taču to izpratne un pievienošana ir ļoti vienkārša un prasa minimālu iestatīšanu. Jums ir dažas iespējas, kā iekļaut Bootstrap adaptīvās funkcijas:

  1. Izmantojiet apkopoto adaptīvo versiju bootstrap-responsive.css
  2. Pievienojiet @import "responsive.less" un atkārtoti kompilējiet Bootstrap
  3. Modificējiet un pārkompilējiet responsive.less kā atsevišķu failu

Kāpēc to vienkārši neiekļaut? Patiesību sakot, ne visam ir jābūt atsaucīgam. Tā vietā, lai mudinātu izstrādātājus noņemt šo funkciju, mēs domājam, ka vislabāk ir to iespējot.

  1.   // Ainava telefoni un uz leju
  2.   @media ( maksimālais platums : 480 pikseļi ) { ... }     
  3.  
  4.   // Ainava no tālruņa uz portreta planšetdatoru
  5.   @media ( maksimālais platums : 767 pikseļi ) { ... }     
  6.  
  7.   // Portreta planšetdators uz ainavu un darbvirsmu
  8.   @media ( minimālais platums : 768 pikseļi ) un ( maks . platums : 979 pikseļi ) { ... }        
  9.  
  10.   // Liela darbvirsma
  11.   @media ( min platums : 1200 pikseļi ) { ... }

Atsaucīgas komunālās klases

Kas viņi ir

Ātrākai mobilajām ierīcēm draudzīgai izstrādei izmantojiet šīs pamata utilītu klases satura rādīšanai un slēpšanai pēc ierīces.

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.

Piemēram, varat rādīt <select>navigācijas elementu mobilajos izkārtojumos, bet ne planšetdatoros vai galddatoros.

Atbalsta nodarbības

Šeit ir parādīta mūsu atbalstīto 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ņi480 pikseļi un mazāk Tabletes767 pikseļi un mazāk Galddatori768 pikseļi un vairāk
.visible-phone Redzams
.visible-tablet Redzams
.visible-desktop Redzams
.hidden-phone Redzams Redzams
.hidden-tablet Redzams Redzams
.hidden-desktop Redzams Redzams

Pārbaudes 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