Perancah

Bootstrap dibangun ing kothak 12-kolom responsif. Kita uga wis klebu tetep- lan adi-jembar tata letak adhedhasar sistem sing.

Mbutuhake doctype HTML5

Bootstrap nggunakake unsur HTML lan properti CSS sing mbutuhake doctype HTML5. Priksa manawa sampeyan kalebu ing wiwitan saben kaca Bootstrapped ing proyek sampeyan.

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

Tipografi lan pranala

Ing file scaffolding.less , kita nyetel tampilan global dhasar, tipografi, lan gaya link. Khusus, kita:

Mbusak margin ing awak
Setel background-color: white;ingbody
Gunakake @baseFontFamily, @baseFontSize, lan @baseLineHeightatribut minangka basis tipografi kita
Setel werna link global liwat @linkColorlan aplikasi link underlines mung ing:hover

Reset liwat Normalize

Ing Bootstrap 2, reset CSS tradisional wis berkembang kanggo nggunakake unsur saka Normalize.css , proyek dening Nicolas Gallagher sing uga nguwasani HTML5 Boilerplate .

Reset anyar isih bisa ditemokaké ing reset.less , nanging karo akeh unsur dibusak kanggo brevity lan akurasi.

Sistem kothak standar sing disedhiyakake minangka bagéan saka Bootstrap yaiku kothak 940px-wide, 12-kolom .

Uga nduweni papat variasi responsif kanggo macem-macem piranti lan resolusi: telpon, potret tablet, lanskap tablet lan desktop cilik, lan desktop layar lebar gedhe.

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

Kaya sing dituduhake ing kene, tata letak dhasar bisa digawe kanthi rong "kolom", saben-saben nyakup sawetara 12 kolom dhasar sing ditetepake minangka bagean saka sistem kothak.

Ngimbangi kolom

4 ngimbangi 4

3 ngimbangi 3

8 uwal 4

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

Nesting kolom

Kanthi sistem grid statis (non-cair) ing Bootstrap, nesting gampang. Kanggo nggawe konten sampeyan, tambahake kolom anyar .rowlan .span*kolom ing .span*kolom sing wis ana.

Tuladha

Baris sing disusun kudu kalebu sakumpulan kolom sing ditambahake nganti jumlah kolom induke. Contone, rong .span3kolom nested kudu diselehake ing a .span6.

Level 1 kolom

Tingkat 2

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

Kolom fluida

Persen, dudu piksel

Sistem kothak cairan nggunakake persen kanggo jembar kolom tinimbang piksel tetep. Uga nduweni variasi responsif sing padha karo sistem kothak tetep kita, njamin proporsi sing tepat kanggo resolusi layar tombol lan piranti.

Cairan baris

Gawe cairan baris wae kanthi ngganti .rowdadi .row-fluid. Kolom tetep padha, nggawe gampang banget kanggo muter ing antarane tata letak tetep lan cairan.

Markup

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

Cairan nesting

Nyarang karo jaringan cairan rada beda: jumlah kolom sing disarang ora kudu cocog karo wong tuwa. Nanging, kolom sampeyan direset ing saben level amarga saben baris njupuk 100% saka kolom induk.

Cairan 12

Cairan 6

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

Variabel	Nilai standar	Katrangan
`@gridColumns`	12	Jumlah kolom
`@gridColumnWidth`	60px	Jembar saben kolom
`@gridGutterWidth`	20px	Spasi negatif antarane kolom

Variabel ing KURANG

Dibangun ing Bootstrap minangka sawetara variabel kanggo ngatur sistem kothak standar 940px, sing didokumentasikake ing ndhuwur. Kabeh variabel kanggo kothak disimpen ing variabel.kurang.

Carane ngatur

Ngowahi kothak tegese ngganti telung @grid*variabel lan recompiling Bootstrap. Ngganti variabel kothak ing variables.less lan gunakake salah siji saka patang cara sing didokumentasikake kanggo ngumpulake maneh . Yen sampeyan nambahake kolom liyane, priksa manawa sampeyan nambahake CSS kanggo sing ana ing grid.less.

Tetep responsif

Kustomisasi kothak mung bisa digunakake ing tingkat standar, kothak 940px. Kanggo njaga aspèk responsif Bootstrap, sampeyan uga kudu ngatur kothak ing responsif.kurang.

Tata letak tetep

Default lan prasaja 940px-wide, tata letak tengah kanggo meh wae situs web utawa kaca sing diwenehake dening siji <div class="container">.

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

Tata letak cairan

<div class="container-fluid">menehi struktur kaca fleksibel, min- lan max-widths, lan sidebar sisih kiwa. Iku apik kanggo app lan docs.

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

Piranti responsif

Apa sing ditindakake

Pitakonan media ngidini CSS khusus adhedhasar sawetara kondisi-rasio, jembar, jinis tampilan, etc-nanging biasane fokus watara min-widthlan max-width.

Ngowahi jembaré kolom ing kothak kita
Tumpukan unsur tinimbang ngambang ing ngendi wae perlu
Owahi ukuran judhul lan teks dadi luwih cocog kanggo piranti

Gunakake pitakon media kanthi tanggung jawab lan mung minangka wiwitan pamirsa seluler. Kanggo proyek sing luwih gedhe, nimbang basis kode khusus lan dudu lapisan pitakon media.

Piranti sing didhukung

Bootstrap ndhukung sawetara pitakon media ing file siji kanggo mbantu nggawe proyek sampeyan luwih cocog ing macem-macem piranti lan resolusi layar. Punika ingkang kalebet:

Label	jembaré tata letak	Jembaré kolom	Jembaré talang
Smartphone	480px lan ngisor	Cairan kolom, ora jembaré tetep
Smartphone kanggo tablet	767px lan ngisor	Cairan kolom, ora jembaré tetep
Tablet potret	768px lan ndhuwur	42 px	20px
Default	980px lan munggah	60px	20px
Tampilan gedhe	1200px lan munggah	70px	30px

Mbutuhake tag meta

Kanggo mesthekake piranti nampilake kaca responsif kanthi bener, lebokake tag meta viewport.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Nggunakake pitakon media

Bootstrap ora kanthi otomatis nyakup pitakon media kasebut, nanging ngerti lan nambahake iku gampang banget lan mbutuhake persiyapan minimal. Sampeyan duwe sawetara opsi kanggo kalebu fitur responsif Bootstrap:

Gunakake versi responsif kompilasi, bootstrap-responsive.css
Tambah @import "responsive.less" lan recompile Bootstrap
Ngowahi lan recompile responsive.less minangka file kapisah

Apa ora mung kalebu? Bener, ora kabeh kudu responsif. Tinimbang nyengkuyung pangembang kanggo mbusak fitur iki, luwih becik ngaktifake.

  // telpon Landskap lan mudhun
  @media ( maks - jembaré : 480px ) { ... }     
 
  // Telpon malang menyang tablet mujur
  @media ( maks - jembaré : 767px ) { ... }     
 
  // Potret tablet menyang malang lan desktop
  @media ( min - jembaré : 768px ) lan ( max - jembaré : 979px ) { ... }        
 
  // Desktop gedhe
  @media ( min - jembaré : 1200px ) { ... }

Kelas utilitas responsif

Apa padha

Kanggo pangembangan seluler sing luwih cepet, gunakake kelas sarana dhasar iki kanggo nuduhake lan ndhelikake konten miturut piranti.

Nalika nggunakake

Gunakake kanthi winates lan aja nggawe versi sing beda-beda saka situs sing padha. Nanging, gunakake kanggo nglengkapi presentasi saben piranti.

Contone, sampeyan bisa nuduhake <select>unsur kanggo nav ing noto seluler, nanging ora ing tablet utawa desktop.

Dhukungan kelas

Ditampilake ing kene yaiku tabel kelas sing didhukung lan pengaruhe ing tata letak pitakon media tartamtu (dilabeli miturut piranti). Padha bisa ditemokaké ing responsive.less.

kelas	Telpon480px lan ngisor	Tablet767px lan ngisor	Desktop768px lan ndhuwur
`.visible-phone`	Katon	didhelikake	didhelikake
`.visible-tablet`	didhelikake	Katon	didhelikake
`.visible-desktop`	didhelikake	didhelikake	Katon
`.hidden-phone`	didhelikake	Katon	Katon
`.hidden-tablet`	Katon	didhelikake	Katon
`.hidden-desktop`	Katon	Katon	didhelikake

Kasus tes

Ganti ukuran browser utawa mbukak ing piranti beda kanggo nyoba kelas ndhuwur.

Katon ing...

Centhang ijo nuduhake yen kelas katon ing viewport sampeyan saiki.

Telpon✔ Telpon
Tablet✔ Tablet
Desktop✔ Desktop

Didhelikake ing ...

Ing kene, centhang ijo nuduhake yen kelas didhelikake ing viewport sampeyan saiki.

Telpon✔ Telpon
Tablet✔ Tablet
Desktop✔ Desktop