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="en">
  ...
</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 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.

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="row">
  <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 labi, 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="row">
  <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*

1. līmeņa kolonna

2. līmenis

<div class="row">
  <div class="span9">
    1. līmeņa kolonna
    <div class="row">
      <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

Šķ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

<div class="row-fluid">
  <div class="span12">
    Šķidrums 12
    <div class="row-fluid">
      <div class="span6">
        Šķidrums 6
        <div class="row-fluid">
          <div class="span6">6. šķidrums</div>
          <div class="span6">6. šķidrums</div>
        </div>
      </div>
      <div class="span6">6. šķidrums</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="container">
    ...
  </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="width=device-width, original-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

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, 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

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

/* Liela darbvirsma */
@media (minimālais platums: 1200 pikseļi) { ... }

/* Portreta planšetdators uz ainavu un darbvirsmu */
@media (minimālais platums: 768 pikseļi) un (maksimālais platums: 979 pikseļi) { ... }

/* Ainava no tālruņa uz portreta planšetdatoru */
@media (maksimālais platums: 767 pikseļi) { ... }

/* Ainavas tālruņi un uz leju */
@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ņi 767 pikseļi un mazāki	Planšetdatori 979 pikseļi līdz 768 pikseļi	Galddatori pēc noklusējuma
`.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. 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

Globālie iestatījumi