Parancah

Bootstrap diwangun dina grid 12-kolom responsif. Urang ogé geus kaasup dibereskeun- sarta perenah lebar cairan dumasar kana sistem éta.

Kisi standar 940px

Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 940px-lega, 12-kolom .

Éta ogé ngagaduhan opat variasi responsif pikeun sababaraha alat sareng résolusi: telepon, potret tablet, bentang méja sareng desktop leutik, sareng desktop layar lebar ageung.

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

Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 12 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami.

Ngimbangkeun kolom

4 nyelap 4

3 ngébréhkeun 3

8 udag 4

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

Kolom nyarang

Kalayan sistem grid statik (non-cair) dina Bootstrap, nyarang gampang. Pikeun nyarang eusi anjeun, cukup tambahkeun kolom anyar .rowsareng set dina .span*kolom anu tos aya .span*.

Contona

Tingkat 1 kolom

Tingkat 2

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

Kustomisasi grid

Variabel	Nilai standar	Katerangan
`@gridColumns`	12	Jumlah kolom
`@gridColumnWidth`	60px	Lebar unggal kolom
`@gridGutterWidth`	20px	spasi négatip antara kolom
`@siteWidth`	Jumlah diitung sadaya kolom sareng talang	Ngitung jumlah kolom sareng talang pikeun nyetél lebar `.container-fixed()`mixin

Variabel dina KURANG

Diwangun kana Bootstrap mangrupakeun sakeupeul variabel pikeun ngaropéa sistem grid standar 940px, documented luhur. Sadaya variabel pikeun grid disimpen dina variables.less.

Kumaha carana ngaropea

Ngarobah grid hartina ngarobah tilu @grid*variabel jeung recompiling Bootstrap. Robah variabel grid dina variables.less sareng nganggo salah sahiji tina opat cara anu didokumentasikeun pikeun nyusun ulang . Upami anjeun nambihan langkung seueur kolom, pastikeun pikeun nambihan CSS pikeun anu aya dina grid.less.

Tetep responsif

Kustomisasi grid ngan tiasa dianggo dina tingkat standar, grid 940px. Pikeun ngajaga aspék responsif tina Bootstrap, Anjeun ogé bakal kudu ngaluyukeun grids di responsive.less.

perenah maneuh

Tata letak standar sareng saderhana 940px-lega, dipuseurkeun pikeun situs wéb atanapi halaman anu disayogikeun ku hiji <div class="container">.

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

Susunan cairan

<div class="container-fluid">méré struktur kaca fléksibel, min- jeung max-lebar, sarta sidebar kénca-leungeun. Éta 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>

Alat anu dirojong

Bootstrap ngadukung sababaraha patarosan média 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
Smartphone	480px sareng handap	Kolom cairan, henteu lebar tetep
Tablet Potrét	480px ka 768px	Kolom cairan, henteu lebar tetep
Tablet bentang	768px nepi ka 940px	44px	20px
Default	940px sareng ka luhur	60px	20px
tampilan badag	1210px sareng ka luhur	70px	30px

Naon maranehna ngalakukeun

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

Ngagunakeun queries média

Bootstrap henteu otomatis ngalebetkeun patarosan média ieu, tapi ngartos sareng nambihanana gampang pisan sareng peryogi pangaturan minimal. Anjeun gaduh sababaraha pilihan pikeun kalebet fitur responsif Bootstrap:

Paké versi responsif disusun, bootstrap-responsive.css
Tambahkeun @import "responsive.less" na recompile Bootstrap
Ngaropéa sarta recompile responsif.kirang salaku misah

Naha henteu ngan kaasup? Kaleresan nyarios, henteu sadayana kedah responsif. Gantina nyorong pamekar pikeun ngahapus fitur ieu, kami panginten langkung saé pikeun ngaktifkeunana.

  // telepon Lansekap tur handap
  @media ( max - rubak : 480px ) { ... }     
 
  // telepon bentang ka tablet potret
  @media ( max - rubak : 768px ) { ... }     
 
  // Potrét tablet ka lanskap sareng desktop
  @media ( mnt - rubak : 768px ) jeung ( max - rubak : 940px ) { ... }        
 
  // Desktop badag
  @media ( mnt - rubak : 1200px ) { .. }