Perancah

Bootstrap dibina pada grid 12 lajur responsif. Kami juga telah memasukkan susun atur lebar tetap dan lebar bendalir berdasarkan sistem itu.

Grid 940px lalai

Sistem grid lalai yang disediakan sebagai sebahagian daripada Bootstrap ialah grid 940px lebar, 12 lajur .

Ia juga mempunyai empat variasi responsif untuk pelbagai peranti dan resolusi: telefon, potret tablet, landskap meja dan desktop kecil serta desktop skrin lebar yang besar.

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

Seperti yang ditunjukkan di sini, reka letak asas boleh dibuat dengan dua "lajur", setiap satu merangkumi beberapa 12 lajur asas yang kami takrifkan sebagai sebahagian daripada sistem grid kami.

Mengimbangi lajur

4 mengimbangi 4

3 mengimbangi 3

8 mengimbangi 4

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

Lajur bersarang

Dengan sistem grid statik (bukan bendalir) dalam Bootstrap, sarang adalah mudah. Untuk menyarangkan kandungan anda, cuma tambahkan lajur baharu .rowdan set .span*lajur dalam .span*lajur sedia ada.

Contoh

Tahap 1 lajur

Tahap 2

<div class = "baris" > 
  <div class = "span12" > 
    Tahap 1 lajur
    <div class = "baris" > 
      <div class = "span6" > Tahap 2 </div> 
      <div class = "span6" > Tahap 2 </div> 
    </div>
  </div>
</div>

Penyesuaian grid

Pembolehubah	Nilai asal	Penerangan
`@gridColumns`	12	Bilangan lajur
`@gridColumnWidth`	60px	Lebar setiap lajur
`@gridGutterWidth`	20px	Ruang negatif antara lajur
`@siteWidth`	Jumlah dikira semua lajur dan longkang	Mengira bilangan lajur dan longkang untuk menetapkan lebar `.container-fixed()`campuran

Pembolehubah dalam KURANG

Dibina dalam Bootstrap ialah segelintir pembolehubah untuk menyesuaikan sistem grid lalai 940px, yang didokumenkan di atas. Semua pembolehubah untuk grid disimpan dalam pembolehubah.kurang.

Bagaimana untuk menyesuaikan

Mengubah suai grid bermakna menukar tiga @grid*pembolehubah dan menyusun semula Bootstrap. Tukar pembolehubah grid dalam pembolehubah.kurang dan gunakan salah satu daripada empat cara yang didokumenkan untuk menyusun semula . Jika anda menambah lebih banyak lajur, pastikan anda menambah CSS untuk mereka dalam grid.less.

Kekal responsif

Penyesuaian grid hanya berfungsi pada tahap lalai, grid 940px. Untuk mengekalkan aspek responsif Bootstrap, anda juga perlu menyesuaikan grid dalam responsive.less.

Susun atur tetap

Reka letak berpusat 940px lebar lalai dan ringkas untuk hampir mana-mana tapak web atau halaman yang disediakan oleh satu <div class="container">.

<badan>
  <div class = "bekas" > 
    ...
  </div>
</body>

Susun atur cecair

<div class="container-fluid">memberikan struktur halaman yang fleksibel, lebar min dan maks, dan bar sisi sebelah kiri. Ia bagus untuk apl dan dokumen.

<div class = "bendalir bekas" > 
  <div class = "cecair baris" > 
    <div class = "span2" > 
      <!--Kandungan bar sisi-->
    </div>
    <div class = "span10" > 
      <!--Kandungan badan-->
    </div>
  </div>
</div>

Peranti yang disokong

Bootstrap menyokong beberapa pertanyaan media untuk membantu menjadikan projek anda lebih sesuai pada peranti dan resolusi skrin yang berbeza. Inilah yang disertakan:

Label	Lebar reka letak	Lebar lajur	Lebar longkang
Telefon pintar	480px dan ke bawah	Lajur bendalir, tiada lebar tetap
Tablet potret	480px hingga 768px	Lajur bendalir, tiada lebar tetap
Tablet landskap	768px hingga 940px	44px	20px
Lalai	940px dan ke atas	60px	20px
Paparan besar	1210px dan ke atas	70px	30px

Apa yang mereka lakukan

Pertanyaan media membenarkan CSS tersuai berdasarkan beberapa syarat—nisbah, lebar, jenis paparan, dll—tetapi biasanya memfokuskan pada min-widthdan max-width.

Ubah suai lebar lajur dalam grid kami
Tumpukan elemen dan bukannya terapung di mana-mana perlu
Ubah saiz tajuk dan teks agar lebih sesuai untuk peranti

Menggunakan pertanyaan media

Bootstrap tidak menyertakan pertanyaan media ini secara automatik, tetapi memahami dan menambahkannya adalah sangat mudah dan memerlukan persediaan yang minimum. Anda mempunyai beberapa pilihan untuk memasukkan ciri responsif Bootstrap:

Gunakan versi responsif yang disusun, bootstrap-responsive.css
Tambah @import "responsive.less" dan susun semula Bootstrap
Ubah suai dan susun semula responsif.kurang sebagai berasingan

Mengapa tidak dimasukkan sahaja? Sejujurnya, tidak semuanya perlu responsif. Daripada menggalakkan pembangun untuk mengalih keluar ciri ini, kami fikir lebih baik untuk mendayakannya.

  // Telefon landskap dan ke bawah
  @media ( maks - lebar : 480px ) { ... }     
 
  // Telefon landskap ke tablet potret
  @media ( maks - lebar : 768px ) { ... }     
 
  // Potret tablet ke landskap dan desktop
  @media ( min - lebar : 768px ) dan ( maks - lebar : 940px ) { ... }        
 
  // Desktop besar
  @media ( min - lebar : 1200px ) { .. }