Bootstrap

Perancah

Bootstrap dibina pada grid 12 lajur responsif. Kami juga telah memasukkan susun atur lebar tetap dan lebar bendalir berdasarkan sistem itu.

Gaya global untuk tetapan semula CSS, tipografi dan pautan

Memerlukan doctype HTML5

Bootstrap menggunakan elemen HTML dan sifat CSS yang memerlukan penggunaan doctype HTML5. Pastikan anda memasukkannya pada permulaan setiap halaman Bootstrapped dalam projek anda.

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

Tipografi dan pautan

Dalam fail scaffolding.less , kami menetapkan paparan global asas, tipografi dan gaya pautan. Secara khusus, kami:

  • Keluarkan margin pada 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

Tetapkan semula melalui Normalize

Mulai Bootstrap 2, tetapan semula CSS tradisional telah berkembang untuk menggunakan elemen daripada Normalize.css , sebuah projek oleh Nicolas Gallagher yang turut menggerakkan HTML5 Boilerplate .

Tetapan semula baharu masih boleh ditemui dalam reset.less , tetapi dengan banyak elemen dialih keluar untuk ringkas dan ketepatan.

Sistem grid lalai 12 lajur 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 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 tablet dan desktop kecil serta desktop skrin lebar yang besar.

  1. <div class = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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.


Mengimbangi lajur

4
4 mengimbangi 4
3 mengimbangi 3
3 mengimbangi 3
8 mengimbangi 4 
  1. <div class = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Lajur bersarang

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.

Tahap 1 lajur
Tahap 2
Tahap 2 
  1. <div class = "baris" > 
  2.   <div class = "span12" > 
  3.     Tahap 1 lajur
  4.     <div class = "baris" > 
  5.       <div class = "span6" > Tahap 2 </div> 
  6.       <div class = "span6" > Tahap 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem grid bendalir 12 responsif, lajur berasaskan peratus

Lajur bendalir

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

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

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

Bersarang cecair

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.

Cecair 12
Cecair 6
Cecair 6 
  1. <div class = "cecair baris" > 
  2.   <div class = "span12" > 
  3.     Tahap 1 lajur
  4.     <div class = "cecair baris" > 
  5.       <div class = "span6" > Tahap 2 </div> 
  6.       <div class = "span6" > Tahap 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Penyesuaian grid

Pembolehubah Nilai asal Penerangan
@gridColumns 12 Bilangan lajur
@gridColumnWidth 60px Lebar setiap lajur
@gridGutterWidth 20px Ruang negatif antara lajur

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.

Reka Letak Templat asas untuk membuat halaman web

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

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

  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 Pertanyaan media untuk pelbagai peranti dan resolusi

Peranti responsif

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

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
Telefon pintar 480px dan ke bawah Lajur bendalir, tiada lebar tetap
Telefon pintar ke tablet 767px dan ke bawah Lajur bendalir, tiada lebar tetap
Tablet potret 768px dan ke atas 42px 20px
Lalai 980px dan ke atas 60px 20px
Paparan besar 1200px dan ke atas 70px 30px

Memerlukan tag meta

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

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

Menggunakan pertanyaan media

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. Tambah @import "responsive.less" dan susun semula Bootstrap
  3. Ubah suai dan susun semula responsive.less sebagai fail berasingan

Mengapa tidak dimasukkan sahaja? Sejujurnya, tidak semuanya perlu responsif. Daripada menggalakkan pembangun untuk mengalih keluar ciri ini, kami fikir lebih baik untuk mendayakannya.

  1.   // Telefon landskap dan ke bawah
  2.   @media ( maks - lebar : 480px ) { ... }     
  3.  
  4.   // Telefon landskap ke tablet potret
  5.   @media ( maks - lebar : 767px ) { ... }     
  6.  
  7.   // Potret tablet ke landskap dan desktop
  8.   @media ( min - lebar : 768px ) dan ( maks - lebar : 979px ) { ... }        
  9.  
  10.   // Desktop besar
  11.   @media ( min - lebar : 1200px ) { ... }

Kelas utiliti responsif

Apakah mereka

Untuk pembangunan mesra mudah alih yang lebih pantas, gunakan kelas utiliti asas ini untuk memaparkan dan menyembunyikan kandungan mengikut peranti.

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.

Sebagai contoh, anda mungkin menunjukkan <select>elemen untuk nav pada reka letak mudah alih, tetapi bukan pada tablet atau desktop.

Kelas sokongan

Ditunjukkan di sini ialah jadual kelas yang kami sokong dan kesannya pada reka letak pertanyaan media tertentu (dilabelkan mengikut peranti). Mereka boleh didapati di responsive.less.

Kelas telefon480px dan ke bawah Tablet767px dan ke bawah Desktop768px dan ke atas
.visible-phone Kelihatan
.visible-tablet Kelihatan
.visible-desktop Kelihatan
.hidden-phone Kelihatan Kelihatan
.hidden-tablet Kelihatan Kelihatan
.hidden-desktop Kelihatan Kelihatan

Kes ujian

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