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.

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

Baris bersarang hendaklah mengandungi set lajur yang menjumlahkan sehingga bilangan lajur induknya. Sebagai contoh, dua .span3lajur bersarang hendaklah diletakkan dalam .span6.

<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>

Peratusan, bukan piksel

Sistem grid bendalir menggunakan peratus untuk lebar lajur dan bukannya piksel tetap. Ia juga mempunyai variasi responsif yang sama seperti sistem grid tetap kami, memastikan perkadaran yang betul untuk resolusi skrin utama dan peranti.

Barisan bendalir

Buat sebarang bendalir baris hanya dengan menukar .rowkepada .row-fluid. Lajur kekal sama, menjadikannya sangat mudah untuk menyelak antara reka letak tetap dan cecair.

Penanda

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

Bersarang dengan grid bendalir agak berbeza: bilangan lajur bersarang tidak perlu sepadan dengan induk. Sebaliknya, lajur anda ditetapkan semula pada setiap peringkat kerana setiap baris mengambil 100% daripada lajur induk.

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

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 segelintir pertanyaan media dalam satu fail untuk membantu menjadikan projek anda lebih sesuai pada peranti dan resolusi skrin yang berbeza. Inilah yang disertakan:

Memerlukan tag meta

Untuk memastikan peranti memaparkan halaman responsif dengan betul, sertakan teg meta port pandang.

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

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

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:

1. Gunakan versi responsif yang disusun, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media ( min - lebar : 768px ) dan ( maks - lebar : 980px ) { ... }        
 
  // Desktop besar
  @media ( min - lebar : 1200px ) { .. }