Perancah

Memerlukan doctype HTML5

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 yang lama telah digugurkan dan memihak kepada Normalize.css , projek oleh Nicolas Gallagher yang turut menguasakan HTML5 Boilerplate . Walaupun kami menggunakan kebanyakan Normalize dalam reset.less kami , kami telah mengalih keluar beberapa elemen khusus untuk Bootstrap.

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.

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

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

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

Mengimbangi lajur

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

3 mengimbangi 2

3 mengimbangi 1

3 mengimbangi 2

6 mengimbangi 3

<div class = "baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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.

Contoh

Di sini dua lajur bersarang .span4diletakkan dalam .span8.

Tahap 1 lajur

Tahap 2

<div class = "baris" > 
  <div class = "span9" > 
    Lajur tahap 1
    <div class = "baris" > 
      <div class = "span6" > Tahap 2 </div> 
      <div class = "span3" > Tahap 2 </div> 
    </div>
  </div>
</div>

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.

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.

<div class = "cecair baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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 mengimbangi 4

3 mengimbangi 3

6 mengimbangi 6

<div class = "cecair baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Bersarang cecair

Bersarang dengan grid bendalir adalah sedikit berbeza: bilangan lajur bersarang tidak sepatutnya sepadan dengan bilangan lajur induk. Sebaliknya, setiap peringkat lajur bersarang ditetapkan semula kerana setiap baris menggunakan 100% lajur induk.

Cecair 12

Cecair 6

<div class = "cecair baris" > 
  <div class = "span12" > 
    Tahap 1 lajur
    <div class = "cecair baris" > 
      <div class = "span6" > Tahap 2 </div> 
      <div class = "span6" > Tahap 2 </div> 
    </div>
  </div>
</div>

Susun atur tetap

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

<badan>
  <div class = "bekas" > 
    ...
  </div>
</body>

Susun atur cecair

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

<div class = "bendalir bekas" > 
  <div class = "cecair baris" > 
    <div class = "span2" > 
      <!--Kandungan bar sisi-->
    </div>
    <div class = "span10" > 
      <!--Kandungan badan-->
    </div>
  </div>
</div>

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.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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

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	480px dan ke bawah	Lajur bendalir, tiada lebar tetap
Telefon 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

/* Telefon landskap dan ke bawah */
@media ( maks - lebar : 480px ) { ... }     
 
/* Telefon landskap ke tablet potret */
@media ( maks - lebar : 767px ) { ... }     
 
/* Potret tablet ke landskap dan desktop */
@media ( min - lebar : 768px ) dan ( maks - lebar : 979px ) { ... }        
 
/* Desktop besar */
@media ( min - lebar : 1200px ) { ... }

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	Tersembunyi	Tersembunyi
`.visible-tablet`	Tersembunyi	Kelihatan	Tersembunyi
`.visible-desktop`	Tersembunyi	Tersembunyi	Kelihatan
`.hidden-phone`	Tersembunyi	Kelihatan	Kelihatan
`.hidden-tablet`	Kelihatan	Tersembunyi	Kelihatan
`.hidden-desktop`	Kelihatan	Kelihatan	Tersembunyi

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.

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

Tetapan global