Parancah

Merlukeun HTML5 doctype

Bootstrap ngagunakeun elemen HTML tangtu jeung sipat CSS nu merlukeun pamakéan doctype HTML5. Lebetkeun éta dina awal sadaya proyék anjeun.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Tipografi sareng tautan

Bootstrap nyetél tampilan global dasar, tipografi, sareng gaya tautan. Sacara husus, urang:

Leupaskeun marginkana awak
Disetél background-color: white;dinabody
Anggo @baseFontFamily, @baseFontSize, sareng @baseLineHeightatribut salaku dasar tipografi urang
Setel warna link global via @linkColorjeung nerapkeun link underlines ngan dina:hover

Gaya ieu tiasa dipendakan dina parancah.less .

Reset via Normalize

Kalawan Bootstrap 2, blok reset heubeul geus turun dina ni'mat Normalize.css , proyék ku Nicolas Gallagher nu ogé kakuatan HTML5 Boilerplate . Nalika kami nganggo seueur Normalize dina reset.less kami , kami parantos ngaleungitkeun sababaraha elemen khusus pikeun Bootstrap.

conto Live grid

Sistem grid Bootstrap standar ngagunakeun 12 kolom , sahingga wadahna lega 940px tanpa fitur responsif diaktipkeun. Jeung file CSS responsif ditambahkeun, grid nu diluyukeun jadi 724px na 1170px lega gumantung kana viewport Anjeun. Handapeun viewports 767px, kolom jadi cair jeung tumpukan vertikal.

Dasar grid HTML

Pikeun perenah dua kolom basajan, nyieun hiji .rowtur nambahkeun jumlah luyu .span*kolom. Kusabab ieu grid 12-kolom, unggal .span*ngawengku jumlah maranéhanana 12 kolom, sarta kudu salawasna nambahan nepi ka 12 pikeun tiap baris (atawa jumlah kolom dina indungna).

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

Dibikeun conto ieu, urang kudu .span4na .span8, sahingga pikeun 12 total kolom sarta baris lengkep.

Ngimbangkeun kolom

Mindahkeun kolom ka kénca ngagunakeun .offset*kelas. Unggal kelas ngaronjatkeun margin kénca kolom ku sakabeh kolom. Contona, .offset4ngalir .span4ngaliwatan opat kolom.

3 ngébréhkeun 2

3 nyelap 1

3 ngébréhkeun 2

6 udag 3

<div class = "baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Kolom nyarang

Pikeun nyarang eusi anjeun sareng grid standar, tambahkeun kolom anyar .rowsareng set dina .span*kolom anu tos aya .span*. Baris bersarang kedah kalebet sakumpulan kolom anu nambihan kana jumlah kolom indungna.

Contona

Di dieu dua kolom nested .span4disimpen dina hiji .span8.

Tingkat 1 kolom

Tingkat 2

<div class = "baris" > 
  <div class = "span9" > 
    Kolom Level 1
    <div class = "baris" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span3" > Level 2 </div> 
    </div>
  </div>
</div>

conto grid cairan hirup

Sistem grid cairan ngagunakeun persen tinimbang piksel pikeun rubak kolom. Éta gaduh kamampuan responsif anu sami sareng sistem grid tetep urang, mastikeun proporsi anu pas pikeun résolusi layar konci sareng alat.

Dasar cairan grid HTML

Jieun sagala baris "cairan" ku ngarobah .rowkana .row-fluid. Kelas kolom tetep sami, sahingga gampang flip antara grid tetep sareng cairan.

<div class = "baris-cairan" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Ngurangan cairan

Ngoperasikeun cara nu sarua salaku sistem grid tetep offsetting: tambahkeun .offset*ka kolom mana wae pikeun offset ku nu loba kolom.

4 nyelap 4

3 ngébréhkeun 3

6 uwih 6

<div class = "baris-cairan" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Cairan nyarang

Nyarang sareng jaringan cairan rada béda: jumlah kolom anu disarangkeun teu kedah cocog sareng jumlah kolom indungna. Gantina, unggal tingkat kolom nested direset sabab unggal baris nyokot 100% tina kolom indungna.

Cairan 12

Cairan 6

<div class = "baris-cairan" > 
  <div class = "span12" > 
    Tingkat 1 kolom
    <div class = "baris-cairan" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

perenah maneuh

Nyayogikeun perenah lebar tetep (sareng opsional responsif) kalayan ngan ukur <div class="container">diperyogikeun.

<awak>
  <div class = "wadah" > 
    ...
  </div>
</awak>

Susunan cairan

Jieun kaca cair, dua-kolom kalayan <div class="container-fluid">—saé pikeun aplikasi sareng dokumén.

<div class = "wadah-cairan" > 
  <div class = "baris-cairan" > 
    <div class = "span2" > 
      <!--Eusi sidebar-->
    </div>
    <div class = "span10" > 
      <!--Eusi awak-->
    </div>
  </div>
</div>

Aktipkeun fitur responsif

Hurungkeun CSS responsif dina proyék anjeun ku ngalebetkeun tag meta anu leres sareng stylesheet tambahan dina <head>dokumen anjeun. Upami anjeun parantos nyusun Bootstrap tina halaman Sesuaikeun, anjeun ngan ukur kedah ngalebetkeun tag meta.

<meta name = "viewport" eusi = "lebar = lebar alat, skala awal = 1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Mastaka tegak! Bootstrap henteu kalebet fitur responsif sacara standar dina waktos ayeuna sabab henteu sadayana kedah responsif. Tinimbang nyorong pamekar pikeun ngahapus fitur ieu, kami panginten langkung saé pikeun ngaktifkeunana upami diperyogikeun.

Ngeunaan Bootstrap responsif

Média queries ngidinan pikeun custom CSS dumasar kana sababaraha kaayaan-babandingan, rubak, tipe tampilan, jsb-tapi biasana museurkeun sabudeureun min-widthtur max-width.

Robah lebar kolom dina grid urang
Tumpukan elemen tinimbang ngambang dimana wae diperlukeun
Robah ukuran judul sareng téks janten langkung pas pikeun alat

Anggo patarosan média sacara tanggung jawab sareng ngan ukur pikeun ngamimitian pamirsa sélulér anjeun. Pikeun proyék-proyék anu langkung ageung, pertimbangkeun dasar kode khusus sareng sanés lapisan patarosan média.

Alat anu dirojong

Bootstrap ngadukung sababaraha patarosan média dina hiji file pikeun ngabantosan proyék anjeun langkung pas dina alat sareng résolusi layar anu béda. Ieu naon anu kalebet:

Label	Lebar perenah	rubak kolom	Lebar talang
Telepon	480px sareng handap	Kolom cairan, henteu lebar tetep
Telepon kana tablet	767px sareng handap	Kolom cairan, henteu lebar tetep
Tablet Potrét	768px ka luhur	42px	20px
Default	980px sareng ka luhur	60px	20px
tampilan badag	1200px sareng ka luhur	70px	30px

/* Telepon lanskap sareng handap */
@media ( max - rubak : 480px ) { ... }     
 
/* Telepon bentang ka tablet potret */
@media ( max - rubak : 767px ) { ... }     
 
/* Potrét tablet ka lanskap sareng desktop */
@media ( mnt - rubak : 768px ) jeung ( max - rubak : 979px ) { ... }        
 
/* Desktop ageung */
@media ( rubak min - 1200px ) { ... } _

kelas utiliti responsif

Pikeun pangwangunan anu ramah-seluler anu langkung gancang, paké kelas utilitas ieu pikeun nunjukkeun sareng nyumputkeun eusi ku alat. Di handap ieu tabel tina kelas sadia tur pangaruh maranéhanana dina perenah query média dibikeun (dilabélan ku alat). Éta bisa kapanggih dina responsive.less.

Kelas	Telepon767px sareng handap	Tablet979px nepi ka 768px	DesktopsDefault
`.visible-phone`	Katingali	Disumputkeun	Disumputkeun
`.visible-tablet`	Disumputkeun	Katingali	Disumputkeun
`.visible-desktop`	Disumputkeun	Disumputkeun	Katingali
`.hidden-phone`	Disumputkeun	Katingali	Katingali
`.hidden-tablet`	Katingali	Disumputkeun	Katingali
`.hidden-desktop`	Katingali	Katingali	Disumputkeun

Nalika ngagunakeun

Paké dina dasar kawates sarta ulah nyieun versi sagemblengna béda tina situs sarua. Gantina, make eta pikeun ngalengkepan presentasi unggal alat urang.

Utiliti responsif test case

Ganti ukuran browser anjeun atanapi muatkeun dina alat anu béda pikeun nguji kelas di luhur.

Katingali dina...

Tanda centang héjo nunjukkeun yén kelas katingali dina viewport anjeun ayeuna.

Telepon✔ Telepon
Tablét✔ Tablet
Desktop✔ Desktop

Disumputkeun dina...

Di dieu, centang héjo nunjukkeun yén kelas disumputkeun dina viewport anjeun ayeuna.

Telepon✔ Telepon
Tablét✔ Tablet
Desktop✔ Desktop

Setélan global