Bootstrap

Perancah

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

Gaya global untuk reset CSS, tipografi, dan tautan

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.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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 12 kolom dengan sentuhan responsif

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

Sistem grid default yang disediakan di Bootstrap menggunakan 12 kolom yang dirender dengan lebar 724px, 940px (default tanpa menyertakan CSS responsif), dan 1170px. Di bawah viewports 767px, kolom menjadi cair dan menumpuk secara vertikal.

  1. <div kelas = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div kelas = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Level 2 
  1. <div kelas = "baris" > 
  2.   <div kelas = "span6" > 
  3.     kolom tingkat 1
  4.     <div kelas = "baris" > 
  5.       <div class = "span3" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem grid fluida 12 kolom responsif berbasis persen

Kolom cairan

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

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

  1. <div class = "baris-cairan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Cairan 6 
  1. <div class = "baris-cairan" > 
  2.   <div kelas = "span12" > 
  3.     Level 1 kolom
  4.     <div class = "baris-cairan" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Kustomisasi kisi

Variabel Nilai default Keterangan
@gridColumns 12 Jumlah kolom
@gridColumnWidth 60px Lebar setiap kolom
@gridGutterWidth 20px Ruang negatif antar kolom

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.

Layout Template dasar untuk membuat halaman web

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

  1. <tubuh>
  2.   <div class = "wadah" > 
  3.     ...
  4.   </div>
  5. </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.

  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 Kueri media untuk berbagai perangkat dan resolusi

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.

  1. <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:

  1. Gunakan versi responsif yang dikompilasi, bootstrap-responsive.css
  2. Tambahkan @import "responsive.less" dan kompilasi ulang Bootstrap
  3. 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.

  1.   /* Ponsel lanskap dan bawah */
  2.   @media ( max - lebar : 480px ) { ... }     
  3.  
  4.   /* Ponsel lanskap ke tablet potret */
  5.   @media ( max - lebar : 767px ) { ... }     
  6.  
  7.   /* Potret tablet ke lanskap dan desktop */
  8.   @media ( min - lebar : 768px ) dan ( max - lebar : 979px ) { ... }        
  9.  
  10.   /* Desktop besar */
  11.   @media ( min - lebar : 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
.visible-tablet Terlihat
.visible-desktop Terlihat
.hidden-phone Terlihat Terlihat
.hidden-tablet Terlihat Terlihat
.hidden-desktop Terlihat Terlihat

Kasus cobaan

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