Bootstrap

Perancah

Bootstrap dibina pada grid 12 lajur responsif, reka letak dan komponen.

Tetapan global

Memerlukan doctype HTML5

Bootstrap menggunakan elemen HTML dan sifat CSS tertentu yang memerlukan penggunaan doctype HTML5. Sertakan ia pada permulaan semua projek anda.

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

Tipografi dan pautan

Bootstrap menetapkan paparan global asas, tipografi dan gaya pautan. Secara khusus, kami:

  • Keluarkan marginpada badan
  • Tetapkan background-color: white;padabody
  • Gunakan @baseFontFamily, @baseFontSize, dan @baseLineHeightatribut sebagai asas tipografi kami
  • Tetapkan warna pautan global melalui @linkColordan gunakan garis bawah pautan hanya pada:hover

Gaya ini boleh didapati dalam perancah.kurang .

Tetapkan semula melalui Normalize

Dengan Bootstrap 2, blok tetapan semula lama telah digugurkan dan memihak kepada Normalize.css , projek oleh Nicolas Gallagher dan Jonathan Neal yang turut menggerakkan HTML5 Boilerplate . Walaupun kami menggunakan kebanyakan Normalize dalam reset.less kami , kami telah mengalih keluar beberapa elemen khusus untuk Bootstrap.

Sistem grid lalai

Contoh grid langsung

Sistem grid Bootstrap lalai menggunakan 12 lajur , menjadikan bekas lebar 940px tanpa ciri responsif didayakan. Dengan penambahan fail CSS responsif, grid menyesuaikan menjadi 724px dan 1170px lebar bergantung pada viewport anda. Di bawah port pandangan 767px, lajur menjadi cair dan disusun secara menegak.

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

HTML grid asas

Untuk reka letak dua lajur yang mudah, buat .rowdan tambah bilangan .span*lajur yang sesuai. Memandangkan ini ialah grid 12 lajur, setiap satu .span*menjangkau beberapa daripada 12 lajur tersebut dan hendaklah sentiasa menambah sehingga 12 untuk setiap baris (atau bilangan lajur dalam induk).

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

Memandangkan contoh ini, kita mempunyai .span4dan .span8, menjadikan untuk 12 jumlah lajur dan satu baris lengkap.

Mengimbangi lajur

Alihkan lajur ke kanan menggunakan .offset*kelas. Setiap kelas meningkatkan margin kiri lajur dengan keseluruhan lajur. Sebagai contoh, .offset4bergerak .span4ke atas empat lajur.

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

Lajur bersarang

Untuk menyarangkan kandungan anda dengan grid lalai, tambahkan lajur baharu .rowdan set .span*lajur dalam .span*lajur sedia ada. Baris bersarang hendaklah mengandungi set lajur yang menjumlahkan sehingga bilangan lajur induknya.

Lajur tahap 1
Tahap 2
Tahap 2 
  1. <div class = "baris" > 
  2.   <div class = "span9" > 
  3.     Lajur tahap 1
  4.     <div class = "baris" > 
  5.       <div class = "span6" > Tahap 2 </div> 
  6.       <div class = "span3" > Tahap 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem grid bendalir

Contoh grid bendalir hidup

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

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

HTML grid cecair asas

Jadikan mana-mana baris "cecair" dengan menukar .rowkepada .row-fluid. Kelas lajur kekal sama, menjadikannya mudah untuk bertukar antara grid tetap dan cecair.

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

Pengimbangan cecair

Beroperasi dengan cara yang sama seperti mengimbangi sistem grid tetap: tambah .offset*pada mana-mana lajur untuk diimbangi oleh lajur yang banyak itu.

4
4 mengimbangi 4
3 mengimbangi 3
3 mengimbangi 3
6 mengimbangi 6 
  1. <div class = "cecair baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Bersarang cecair

Grid bendalir menggunakan sarang secara berbeza: setiap tahap lajur bersarang harus menambah sehingga 12 lajur. Ini kerana grid bendalir menggunakan peratusan, bukan piksel, untuk menetapkan lebar.

Cecair 12
Cecair 6
Cecair 6
Cecair 6
Cecair 6 
  1. <div class = "cecair baris" > 
  2.   <div class = "span12" > 
  3.     Cecair 12
  4.     <div class = "cecair baris" > 
  5.       <div class = "span6" > 
  6.         Cecair 6
  7.         <div class = "cecair baris" > 
  8.           <div class = "span6" > Bendalir 6 </div> 
  9.           <div class = "span6" > Bendalir 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Bendalir 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Susun atur

Susun atur tetap

Menyediakan susun atur lebar tetap biasa (dan responsif pilihan) dengan hanya <div class="container">diperlukan.

  1. <badan>
  2.   <div class = "bekas" > 
  3.     ...
  4.   </div>
  5. </body>

Susun atur cecair

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

  1. <div class = "bendalir bekas" > 
  2.   <div class = "cecair baris" > 
  3.     <div class = "span2" > 
  4.       <!--Kandungan bar sisi-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Kandungan badan-->
  8.     </div>
  9.   </div>
  10. </div>

Reka bentuk responsif

Mendayakan ciri responsif

Hidupkan CSS responsif dalam projek anda dengan memasukkan teg meta yang betul dan helaian gaya tambahan dalam <head>dokumen anda. Jika anda telah menyusun Bootstrap daripada halaman Peribadikan, anda hanya perlu memasukkan teg meta.

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

Angkat kepala!Bootstrap tidak menyertakan ciri responsif secara lalai pada masa ini kerana tidak semuanya perlu responsif. Daripada menggalakkan pembangun untuk mengalih keluar ciri ini, kami fikir sebaiknya mendayakannya mengikut keperluan.

Mengenai Bootstrap responsif

Peranti responsif

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

Gunakan pertanyaan media secara bertanggungjawab dan hanya sebagai permulaan kepada khalayak mudah alih anda. Untuk projek yang lebih besar, pertimbangkan asas kod khusus dan bukan lapisan pertanyaan media.

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:

Label Lebar reka letak Lebar lajur Lebar longkang
Paparan besar 1200px dan ke atas 70px 30px
Lalai 980px dan ke atas 60px 20px
Tablet potret 768px dan ke atas 42px 20px
Telefon ke tablet 767px dan ke bawah Lajur bendalir, tiada lebar tetap
telefon 480px dan ke bawah Lajur bendalir, tiada lebar tetap 
  1. /* Desktop besar */
  2. @media ( min - lebar : 1200px ) { ... }     
  3.  
  4. /* Potret tablet ke landskap dan desktop */
  5. @media ( min - lebar : 768px ) dan ( maks - lebar : 979px ) { ... }        
  6.  
  7. /* Telefon landskap ke tablet potret */
  8. @media ( maks - lebar : 767px ) { ... }     
  9.  
  10. /* Telefon landskap dan ke bawah */
  11. @media ( maks - lebar : 480px ) { ... }

Kelas utiliti responsif

Untuk pembangunan mesra mudah alih yang lebih pantas, gunakan kelas utiliti ini untuk memaparkan dan menyembunyikan kandungan mengikut peranti. Di bawah ialah jadual kelas yang tersedia dan kesannya pada susun atur pertanyaan media tertentu (dilabelkan mengikut peranti). Mereka boleh didapati di responsive.less.

Kelas telefon767px dan ke bawah Tablet979px hingga 768px DesktopLalai
.visible-phone Kelihatan
.visible-tablet Kelihatan
.visible-desktop Kelihatan
.hidden-phone Kelihatan Kelihatan
.hidden-tablet Kelihatan Kelihatan
.hidden-desktop Kelihatan Kelihatan

Bila nak guna

Gunakan secara terhad dan elakkan membuat versi yang sama sekali berbeza untuk tapak yang sama. Sebaliknya, gunakannya untuk melengkapkan pembentangan setiap peranti. Utiliti responsif tidak boleh digunakan dengan jadual, dan oleh itu tidak disokong.

Kes ujian utiliti responsif

Ubah saiz pelayar anda atau muatkan pada peranti yang berbeza untuk menguji kelas di atas.

Kelihatan pada...

Tanda semak hijau menunjukkan bahawa kelas kelihatan dalam port pandangan semasa anda.

  • telefon✔ Telefon
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Tersembunyi pada...

Di sini, tanda semak hijau menunjukkan bahawa kelas disembunyikan dalam port pandangan semasa anda.

  • telefon✔ Telefon
  • Tablet✔ Tablet
  • Desktop✔ Desktop