Sastatnes

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ā.

<!DOCTYPE html>
<html lang = "lv" > 
  ...
</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 , un kā mūsu @baseFontFamilytipogrāfisko @baseFontSizebāzi@baseLineHeight
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 projektam, kas nodrošina arī 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.

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.

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.

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

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

Kolonnu nobīde

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

3 nobīde 2

3 nobīde 1

3 nobīde 2

6 nobīde 3

<div class = "rinda" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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*

Piemērs

Šeit divas ligzdotas .span4kolonnas ir ievietotas .span8.

Kolonnas 1. līmenis

2. līmenis

<div class = "rinda" > 
  <div class = "span9" > 
    1. līmeņa kolonna
    <div class = "rinda" > 
      <div class = "span6" > 2. līmenis </div> 
      <div class = "span3" > 2. līmenis </div> 
    </div>
  </div>
</div>

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.

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.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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 nobīde 4

3 nobīde 3

6 nobīde 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Šķidruma ligzdošana

Ligzdošana ar šķidriem režģiem ir nedaudz atšķirīga: ligzdoto kolonnu skaitam nav jāatbilst vecāka kolonnu skaitam. Tā vietā katrs ligzdoto kolonnu līmenis tiek atiestatīts, jo katra rinda aizņem 100% no vecākkolonnas.

Šķidrums 12

Šķidrums 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Kolonnas 1. līmenis
    <div class = "row-fluid" > 
      <div class = "span6" > 2. līmenis </div> 
      <div class = "span6" > 2. līmenis </div> 
    </div>
  </div>
</div>

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.

<body>
  <div class = "konteiners" > 
    ...
  </div>
</body>

Šķidruma izkārtojums

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

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sānjoslas saturs-->
    </div>
    <div class = "span10" > 
      <!--Ķermeņa saturs-->
    </div>
  </div>
</div>

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.

<meta name = "viewport" content = "platums=ierīces platums, sākotnējais mērogs=1,0" >  
<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

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
Tālruņi	480 pikseļi un mazāk	Šķidruma kolonnas, bez fiksēta platuma
Telefoni 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

/* Ainavas tālruņi un uz leju */
@media ( maksimālais platums : 480 pikseļi ) { ... }     
 
/* Ainava no tālruņa uz portreta planšetdatoru */
@media ( maksimālais platums : 767 pikseļi ) { ... }     
 
/* Portreta planšetdators uz ainavu un darbvirsmu */
@media ( minimālais platums : 768 pikseļi ) un ( maks . platums : 979 pikseļi ) { ... }        
 
/* Liela darbvirsma */
@media ( min platums : 1200 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	Slēpts	Slēpts
`.visible-tablet`	Slēpts	Redzams	Slēpts
`.visible-desktop`	Slēpts	Slēpts	Redzams
`.hidden-phone`	Slēpts	Redzams	Redzams
`.hidden-tablet`	Redzams	Slēpts	Redzams
`.hidden-desktop`	Redzams	Redzams	Slēpts

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.

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

Globālie iestatījumi