Bab 5: Kemahiran BootStrap Grid System_javascript

Bootstrap, daripada Twitter, pada masa ini merupakan rangka kerja bahagian hadapan yang paling popular. Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT Ia mudah dan fleksibel, menjadikan pembangunan web lebih pantas.

Mata pembelajaran:

1. Peranti mudah alih dahulu
2. Bekas susun atur
3. Sistem grid

Dalam pelajaran ini kita akan mempelajari terutamanya tentang sistem grid Bootstrap, yang menyediakan sistem grid bendalir mudah alih yang responsif.

1. Mudah alih didahulukan

Dalam projek HTML5, kami membuat projek mudah alih. Ia mempunyai meta yang sangat penting, yang digunakan untuk menetapkan lebar yang sama dengan skrin dan peranti, sama ada untuk menjalankan penskalaan pengguna dan nisbah penskalaan.

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 

2. Bekas reka letak

Bootstrap memerlukan bekas .container untuk membalut kandungan halaman dan sistem grid. Disebabkan atribut seperti padding, kedua-dua kelas kontena ini tidak boleh bersarang antara satu sama lain.

//固定宽度
<div class="container">
...
</div> 
//100%宽度
<div class="container-fluid">
...
</div>

Dalam sistem grid, penyemak imbas akan memperuntukkan sehingga 12 lajur secara automatik apabila saiz skrin bertambah atau berkurang. Buat reka letak halaman melalui satu siri baris dan lajur. Begini cara ia berfungsi:

1. "Baris" mesti terkandung dalam .bekas (lebar tetap) atau .bendalir bekas (lebar 100%) untuk memberikan penjajaran dan pelapik yang sesuai.

2. Buat kumpulan "lajur" dalam arah mendatar melalui "baris".

3. Kandungan anda hendaklah diletakkan dalam "lajur", dan hanya "lajur" boleh menjadi elemen anak langsung

4. Kelas pratakrif seperti .row dan .col-xs-4 boleh digunakan untuk membuat reka letak grid dengan cepat.
Mixin yang ditakrifkan dalam kod sumber Bootstrap juga boleh digunakan untuk membuat susun atur semantik.

5. Buat longkang antara lajur dengan menetapkan atribut pelapik untuk "lajur". Dengan menetapkan nilai negatif untuk elemen .row

margin itu mengimbangi set padding untuk elemen .container dan secara tidak langsung mengimbangi padding untuk "lajur" yang terkandung dalam "baris".

6. Nilai negatif margin ialah sebab contoh di bawah menonjol ke luar. Kandungan dalam lajur grid berbaris.

7. Lajur dalam sistem grid mewakili julatnya dengan menentukan nilai dari 1 hingga 12. Sebagai contoh, tiga lajur yang sama lebar boleh dibuat menggunakan tiga .col-xs-4 s.

8. Jika "baris" mengandungi lebih daripada 12 "lajur", unsur "lajur" tambahan akan disusun secara keseluruhan dalam baris lain.

9. Kelas grid sesuai untuk peranti dengan lebar skrin lebih besar daripada atau sama dengan saiz titik pembahagi dan kelas grid digantikan untuk peranti skrin kecil. Oleh itu, menggunakan mana-mana kelas raster .col-md-* pada elemen berfungsi untuk peranti dengan lebar skrin lebih besar daripada atau sama dengan saiz titik putus dan mengatasi kelas raster untuk peranti skrin kecil. Oleh itu, menggunakan sebarang .col-lg-* pada elemen tidak wujud dan turut mempengaruhi peranti skrin besar.

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div> 
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div> 
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//总列数都是 12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div> 

Jadual parameter raster

Seperti yang ditunjukkan dalam gambar di atas, lapisan paling luar sistem grid membezakan empat lebar penyemak imbas: skrin ultra-kecil (3b348f6c0c4cc6bc38149aacb41c8e46=768px), skrin sederhana (>=992px) dan Skrin besar (>=1200px). Lebar penyesuaian bekas .container dalam ialah: automatik, 750px, 970px dan 1170px. Automatik bermakna jika anda berada pada skrin telefon mudah alih, ia akan menduduki satu baris paparan.

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div> 
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div> 
//也可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div> 
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

Di atas adalah maklumat berkaitan untuk sistem grid BootStrap saya harap ia akan membantu semua orang!