Bootstrap

Perancah

Bootstrap dibangun di atas kisi, tata letak, dan komponen 12 kolom yang responsif.

Pengaturan global

Membutuhkan doctype HTML5

Bootstrap menggunakan elemen HTML dan properti CSS tertentu yang memerlukan penggunaan doctype HTML5. Sertakan di awal semua proyek Anda.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tipografi dan tautan

Bootstrap mengatur tampilan global dasar, tipografi, dan gaya tautan. Secara khusus, kami:

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

Gaya ini dapat ditemukan di dalam scaffolding.less .

Setel ulang melalui Normalisasi

Dengan Bootstrap 2, blok reset lama telah dihapus dan digantikan oleh Normalize.css , sebuah proyek oleh Nicolas Gallagher dan Jonathan Neal yang juga mendukung HTML5 Boilerplate . Meskipun kami menggunakan banyak Normalize dalam reset.less kami , kami telah menghapus beberapa elemen khusus untuk Bootstrap.

Sistem jaringan default

Contoh jaringan langsung

Sistem grid Bootstrap default menggunakan 12 kolom , membuat container selebar 940px tanpa mengaktifkan fitur responsif . Dengan menambahkan file CSS responsif, kisi menyesuaikan menjadi lebar 724px dan 1170px tergantung pada area pandang Anda. Di bawah viewports 767px, kolom menjadi cair dan menumpuk secara vertikal.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML kisi dasar

Untuk tata letak dua kolom sederhana, buat .rowdan tambahkan jumlah .span*kolom yang sesuai. Karena ini adalah kisi 12 kolom, masing-masing .span*mencakup sejumlah 12 kolom tersebut, dan harus selalu menambahkan hingga 12 untuk setiap baris (atau jumlah kolom di induknya).

  1. <div kelas = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Diberikan contoh ini, kita memiliki .span4dan .span8, membuat total 12 kolom dan satu baris lengkap.

Mengimbangi kolom

Pindahkan kolom ke kanan menggunakan .offset*kelas. Setiap kelas meningkatkan margin kiri kolom dengan seluruh kolom. Misalnya, .offset4bergerak .span4di atas empat kolom.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div kelas = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Kolom bersarang

Untuk menyarangkan konten Anda dengan kisi default, tambahkan kolom baru .rowdan kumpulan .span*kolom di dalam kolom yang sudah ada .span*. Baris bersarang harus menyertakan sekumpulan kolom yang menambahkan hingga jumlah kolom induknya.

kolom tingkat 1
Level 2
Level 2 
  1. <div kelas = "baris" > 
  2.   <div kelas = "span9" > 
  3.     kolom tingkat 1
  4.     <div kelas = "baris" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem jaringan fluida

Contoh jaringan cairan hidup

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML grid cairan dasar

Buat baris apa saja "cair" dengan mengubah .rowke .row-fluid. Kelas kolom tetap sama persis, sehingga mudah untuk beralih antara grid tetap dan fluid.

  1. <div class = "baris-cairan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Pengimbang cairan

Beroperasi dengan cara yang sama seperti offset sistem grid tetap: tambahkan .offset*ke kolom mana pun untuk diimbangi dengan banyak kolom itu.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div class = "baris-cairan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Bersarang cairan

Grid fluida menggunakan nesting secara berbeda: setiap level kolom bersarang harus menambahkan hingga 12 kolom. Ini karena grid fluid menggunakan persentase, bukan piksel, untuk mengatur lebar.

Cairan 12
Cairan 6
Cairan 6
Cairan 6
Cairan 6 
  1. <div class = "baris-cairan" > 
  2.   <div kelas = "span12" > 
  3.     Cairan 12
  4.     <div class = "baris-cairan" > 
  5.       <div kelas = "span6" > 
  6.         Cairan 6
  7.         <div class = "baris-cairan" > 
  8.           <div class = "span6" > Cairan 6 </div> 
  9.           <div class = "span6" > Cairan 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Cairan 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Tata letak

Tata letak tetap

Menyediakan tata letak lebar tetap umum (dan opsional responsif) dengan hanya <div class="container">diperlukan.

  1. <tubuh>
  2.   <div class = "wadah" > 
  3.     ...
  4.   </div>
  5. </tubuh>

Tata letak cairan

Buat halaman dua kolom yang lancar dengan <div class="container-fluid">—bagus untuk aplikasi dan dokumen.

  1. <div class = "container-fluid" > 
  2.   <div class = "baris-cairan" > 
  3.     <div kelas = "span2" > 
  4.       <!--Konten bilah sisi-->
  5.     </div>
  6.     <div kelas = "span10" > 
  7.       <!--Isi isi-->
  8.     </div>
  9.   </div>
  10. </div>

Desain responsif

Mengaktifkan fitur responsif

Aktifkan CSS responsif dalam proyek Anda dengan menyertakan tag meta yang tepat dan lembar gaya tambahan di dalam <head>dokumen Anda. Jika Anda telah mengkompilasi Bootstrap dari halaman Kustomisasi, Anda hanya perlu menyertakan tag meta.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Perhatian!Bootstrap tidak menyertakan fitur responsif secara default saat ini karena tidak semuanya harus responsif. Alih-alih mendorong pengembang untuk menghapus fitur ini, kami pikir yang terbaik adalah mengaktifkannya sesuai kebutuhan.

Tentang Bootstrap responsif

Perangkat responsif

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
Layar besar 1200px dan lebih tinggi 70px 30px
Bawaan 980px dan lebih tinggi 60px 20px
Tablet potret 768px ke atas 42px 20px
Ponsel ke tablet 767px dan di bawah Kolom fluida, tidak ada lebar tetap
Telepon 480px dan di bawah Kolom fluida, tidak ada lebar tetap 
  1. /* Desktop besar */
  2. @media ( min - lebar : 1200px ) { ... }     
  3.  
  4. /* Potret tablet ke lanskap dan desktop */
  5. @media ( min - lebar : 768px ) dan ( max - lebar : 979px ) { ... }        
  6.  
  7. /* Ponsel lanskap ke tablet potret */
  8. @media ( max - lebar : 767px ) { ... }     
  9.  
  10. /* Ponsel lanskap dan bawah */
  11. @media ( max - lebar : 480px ) { ... }

Kelas utilitas responsif

Untuk pengembangan ramah seluler yang lebih cepat, gunakan kelas utilitas ini untuk menampilkan dan menyembunyikan konten menurut perangkat. Di bawah ini adalah tabel kelas yang tersedia dan pengaruhnya pada tata letak kueri media tertentu (diberi label oleh perangkat). Mereka dapat ditemukan di responsive.less.

Kelas Telepon767px dan di bawah Tablet979px hingga 768px DesktopBawaan
.visible-phone Terlihat
.visible-tablet Terlihat
.visible-desktop Terlihat
.hidden-phone Terlihat Terlihat
.hidden-tablet Terlihat Terlihat
.hidden-desktop Terlihat Terlihat

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. Utilitas responsif tidak boleh digunakan dengan tabel, dan karena itu tidak didukung.

Kasus uji utilitas responsif

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

Terlihat di...

Tanda centang hijau menunjukkan bahwa kelas terlihat di area pandang Anda saat ini.

  • TeleponTelepon
  • TabletTablet
  • DesktopDesktop

Tersembunyi di...

Di sini, tanda centang hijau menunjukkan bahwa kelas disembunyikan di area pandang Anda saat ini.

  • TeleponTelepon
  • TabletTablet
  • DesktopDesktop