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.

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, galda 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
@siteWidth Aprēķināta visu kolonnu un notekcauruļu summa Uzskaita kolonnu un noteku skaitu, lai iestatītu .container-fixed()maisītāja platumu

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

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
Portreta planšetdatori 480 pikseļi līdz 768 pikseļi Šķidruma kolonnas, bez fiksēta platuma
Ainavu planšetdatori 768 pikseļi līdz 979 pikseļi 42 pikseļi 20 pikseļi
Noklusējums 980 pikseļi un vairāk 60 pikseļi 20 pikseļi
Liels displejs 1210 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" >

Ko viņi dara

Multivides vaicājumi ļauj pielāgot CSS, pamatojoties uz vairākiem nosacījumiem — proporcijām, platumiem, attēlojuma veidu utt., bet parasti koncentrējas uz 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

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 : 768 pikseļi ) { ... }     
  6.  
  7.   // Portreta planšetdators uz ainavu un darbvirsmu
  8.   @media ( minimālais platums : 768 pikseļi ) un ( maks . platums : 980 pikseļi ) { ... }        
  9.  
  10.   // Liela darbvirsma
  11.   @media ( min platums : 1200 pikseļi ) { .. }