Perancah

Bootstrap dibangun di atas grid 12 kolom yang responsif. Kami juga menyertakan tata letak lebar tetap dan lancar berdasarkan sistem itu.

Membutuhkan doctype HTML5

Bootstrap memanfaatkan elemen HTML dan properti CSS yang memerlukan penggunaan doctype HTML5. Pastikan untuk memasukkannya di awal setiap halaman Bootstrap di proyek Anda.

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

Tipografi dan tautan

Di dalam file scaffolding.less , kami mengatur tampilan global dasar, tipografi, dan gaya tautan. Secara khusus, kami:

Hapus margin pada tubuh
Tetapkan background-color: white;padabody
Gunakan @baseFontFamily, @baseFontSize, dan @baseLineHeightatribut sebagai dasar tipografi kami
Atur warna tautan global melalui @linkColordan terapkan garis bawah tautan hanya di:hover

Setel ulang melalui Normalisasi

Pada Bootstrap 2, reset CSS tradisional telah berevolusi untuk memanfaatkan elemen dari Normalize.css , sebuah proyek oleh Nicolas Gallagher yang juga mendukung HTML5 Boilerplate .

Reset baru masih dapat ditemukan di reset.less , tetapi dengan banyak elemen yang dihapus karena singkatnya dan akurasinya.

Sistem grid default yang disediakan sebagai bagian dari Bootstrap adalah grid 12 kolom dengan lebar 940px .

Ini juga memiliki empat variasi responsif untuk berbagai perangkat dan resolusi: ponsel, potret tablet, lanskap meja dan desktop kecil, dan desktop layar lebar besar.

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

Seperti yang ditunjukkan di sini, tata letak dasar dapat dibuat dengan dua "kolom", masing-masing mencakup sejumlah 12 kolom dasar yang kami definisikan sebagai bagian dari sistem grid kami.

Mengimbangi kolom

4 offset 4

3 offset 3

8 offset 4

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

Kolom bersarang

Dengan sistem grid statis (non-fluid) di Bootstrap, bersarang menjadi mudah. Untuk menyarangkan konten Anda, cukup tambahkan satu .rowset .span*kolom baru di dalam kolom yang ada .span*.

Contoh

Baris bersarang harus menyertakan sekumpulan kolom yang menambahkan hingga jumlah kolom induknya. Misalnya, dua .span3kolom bersarang harus ditempatkan dalam file .span6.

Level 1 kolom

Level 2

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

Kolom cairan

Persen, bukan piksel

Sistem grid fluid menggunakan persen untuk lebar kolom, bukan piksel tetap. Ini juga memiliki variasi responsif yang sama dengan sistem jaringan tetap kami, memastikan proporsi yang tepat untuk resolusi layar utama dan perangkat.

Baris cairan

Buat baris apa pun lancar hanya dengan mengubah .rowke .row-fluid. Kolom tetap sama persis, membuatnya sangat mudah untuk beralih antara tata letak tetap dan lancar.

Markup

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

Bersarang cairan

Bersarang dengan kisi cair sedikit berbeda: jumlah kolom bersarang tidak harus sesuai dengan induknya. Sebagai gantinya, kolom Anda disetel ulang di setiap level karena setiap baris menempati 100% dari kolom induk.

Cairan 12

Cairan 6

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

Variabel	Nilai default	Keterangan
`@gridColumns`	12	Jumlah kolom
`@gridColumnWidth`	60px	Lebar setiap kolom
`@gridGutterWidth`	20px	Ruang negatif antar kolom
`@siteWidth`	Jumlah yang dihitung dari semua kolom dan talang	Menghitung jumlah kolom dan talang untuk mengatur lebar `.container-fixed()`mixin

Variabel dalam KURANG

Dibangun ke dalam Bootstrap adalah beberapa variabel untuk menyesuaikan sistem grid 940px default, yang didokumentasikan di atas. Semua variabel untuk grid disimpan dalam variabel.less.

Bagaimana menyesuaikan

Memodifikasi grid berarti mengubah ketiga @grid*variabel dan mengkompilasi ulang Bootstrap. Ubah variabel grid dalam variabel.less dan gunakan salah satu dari empat cara yang didokumentasikan untuk mengkompilasi ulang . Jika Anda menambahkan lebih banyak kolom, pastikan untuk menambahkan CSS untuk yang ada di grid.less.

Tetap responsif

Kustomisasi kisi hanya berfungsi pada tingkat default, kisi 940px. Untuk mempertahankan aspek responsif dari Bootstrap, Anda juga harus menyesuaikan kisi-kisi di responsive.less.

Tata letak tetap

Default dan sederhana, lebar 940px, tata letak terpusat untuk hampir semua situs web atau halaman yang disediakan oleh satu file <div class="container">.

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

Tata letak cairan

<div class="container-fluid">memberikan struktur halaman yang fleksibel, lebar minimum dan maksimum, dan bilah sisi kiri. Ini bagus untuk aplikasi dan dokumen.

<div class = "container-fluid" > 
  <div class = "baris-cairan" > 
    <div kelas = "span2" > 
      <!--Konten bilah sisi-->
    </div>
    <div kelas = "span10" > 
      <!--Isi isi-->
    </div>
  </div>
</div>

Perangkat responsif

Apa yang mereka lakukan

Kueri media memungkinkan CSS khusus berdasarkan sejumlah kondisi—rasio, lebar, jenis tampilan, dll—tetapi biasanya berfokus di sekitar min-widthdan max-width.

Ubah lebar kolom di kisi kami
Tumpuk elemen alih-alih mengapung di mana pun diperlukan
Ubah ukuran judul dan teks agar lebih sesuai untuk perangkat

Gunakan kueri media secara bertanggung jawab dan hanya sebagai awal untuk audiens seluler Anda. Untuk proyek yang lebih besar, pertimbangkan basis kode khusus dan bukan lapisan kueri media.

Perangkat yang didukung

Bootstrap mendukung beberapa kueri media dalam satu file untuk membantu membuat proyek Anda lebih sesuai pada perangkat dan resolusi layar yang berbeda. Inilah yang termasuk:

Label	Lebar tata letak	Lebar kolom	lebar selokan
Smartphone	480px dan di bawah	Kolom fluida, tidak ada lebar tetap
Smartphone ke tablet	767px dan di bawah	Kolom fluida, tidak ada lebar tetap
Tablet potret	768px ke atas	42px	20px
Bawaan	980px dan lebih tinggi	60px	20px
Layar besar	1200px dan lebih tinggi	70px	30px

Memerlukan tag meta

Untuk memastikan perangkat menampilkan halaman responsif dengan benar, sertakan tag meta area pandang.

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

Menggunakan kueri media

Bootstrap tidak secara otomatis menyertakan kueri media ini, tetapi memahami dan menambahkannya sangat mudah dan memerlukan pengaturan minimal. Anda memiliki beberapa opsi untuk menyertakan fitur responsif Bootstrap:

Gunakan versi responsif yang dikompilasi, bootstrap-responsive.css
Tambahkan @import "responsive.less" dan kompilasi ulang Bootstrap
Ubah dan kompilasi ulang responsive.less sebagai file terpisah

Mengapa tidak memasukkannya saja? Sejujurnya, tidak semuanya harus responsif. Alih-alih mendorong pengembang untuk menghapus fitur ini, kami pikir yang terbaik adalah mengaktifkannya.

  // Ponsel lanskap dan ke bawah
  @media ( max - lebar : 480px ) { ... }     
 
  // Ponsel lanskap ke tablet potret
  @media ( max - lebar : 768px ) { ... }     
 
  // Potret tablet ke lanskap dan desktop
  @media ( min - lebar : 768px ) dan ( max - lebar : 980px ) { ... }        
 
  // Desktop besar
  @media ( lebar min : 1200px ) { .. } _

Kelas utilitas responsif

Apakah mereka

Untuk pengembangan ramah seluler yang lebih cepat, gunakan kelas utilitas dasar ini untuk menampilkan dan menyembunyikan konten menurut perangkat.

Kapan harus menggunakan?

Gunakan secara terbatas dan hindari membuat versi yang sama sekali berbeda dari situs yang sama. Sebagai gantinya, gunakan untuk melengkapi presentasi setiap perangkat.

Misalnya, Anda mungkin menampilkan <select>elemen untuk navigasi di tata letak seluler, tetapi tidak di tablet atau desktop.

Kelas dukungan

Ditampilkan di sini adalah tabel kelas yang kami dukung dan efeknya pada tata letak kueri media tertentu (diberi label oleh perangkat). Mereka dapat ditemukan di responsive.less.

Kelas	Telepon480px dan di bawah	Tablet767px dan di bawah	Desktop768px ke atas
`.visible-phone`	Terlihat	Tersembunyi	Tersembunyi
`.visible-tablet`	Tersembunyi	Terlihat	Tersembunyi
`.visible-desktop`	Tersembunyi	Tersembunyi	Terlihat
`.hidden-phone`	Tersembunyi	Terlihat	Terlihat
`.hidden-tablet`	Terlihat	Tersembunyi	Terlihat
`.hidden-desktop`	Terlihat	Terlihat	Tersembunyi

Kasus cobaan

Ubah ukuran browser Anda atau muat pada perangkat yang berbeda untuk menguji kelas di atas.

Terlihat di...

TeleponTelepon
TabletTablet
DesktopDesktop

Tersembunyi di...

TeleponTelepon
TabletTablet
DesktopDesktop