Perancah

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

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

Uga duwe papat variasi responsif kanggo macem-macem piranti lan resolusi: telpon, potret tablet, lanskap meja 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
`@siteWidth`	Jumlah total kabeh kolom lan talang	Ngetung nomer kolom lan talang kanggo nyetel jembar `.container-fixed()`mixin

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 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
Tablet potret	480px nganti 768px	Cairan kolom, ora jembaré tetep
Tablet lanskap	768px kanggo 979px	42 px	20px
Default	980px lan munggah	60px	20px
Tampilan gedhe	1210px 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" >

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

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é : 768px ) { ... }     
 
  // Potret tablet menyang malang lan desktop
  @media ( min - jembaré : 768px ) lan ( maks - jembaré : 980px ) { ... }        
 
  // Desktop gedhe
  @media ( min - jembaré : 1200px ) { .. }