Sistem grid bootstrap

Apakah Grid?

Petikan daripada Wikipedia:

Dalam reka bentuk grafik, grid ialah struktur yang terdiri daripada satu siri garis lurus bersilang (menegak, mendatar) yang digunakan untuk menyusun kandungan (biasanya dua dimensi). Ia digunakan secara meluas untuk susun atur reka bentuk dan struktur kandungan dalam reka bentuk cetakan. Dalam reka bentuk web, ia adalah kaedah untuk mencipta susun atur yang konsisten dengan cepat dan menggunakan HTML dan CSS dengan berkesan.

Ringkasnya, grid dalam reka bentuk web digunakan untuk menyusun kandungan, menjadikan tapak web mudah dinavigasi dan mengurangkan beban pada pengguna.

Apakah itu Sistem Grid Bootstrap?

Penerangan sistem grid dalam dokumentasi Bootstrap rasmi:

Bootstrap termasuk sistem grid cecair responsif, diutamakan mudah alih yang boleh berubah dengan peranti atau port pandangan Saiznya meningkat dengan sewajarnya dan meluas ke 12 lajur. Ia mengandungi kelas yang dipratentukan untuk pilihan susun atur mudah, serta kelas campuran yang berkuasa untuk menjana lebih banyak susun atur semantik.

Mari kita fahami kenyataan di atas. Bootstrap 3 adalah mudah alih diutamakan, dalam erti kata bahawa kod Bootstrap bermula dengan komponen dan grid pada peranti skrin kecil (cth. mudah alih, tablet) dan kemudian berkembang kepada komponen dan grid pada peranti skrin besar (cth. komputer riba, desktop).

Strategi diutamakan mudah alih

• Kandungan

• Tentukan perkara yang paling penting .

• Reka letak

• Utamakan lebar yang lebih kecil.

• CSS asas ialah mudah alih dahulu dan pertanyaan media adalah untuk tablet dan komputer meja.

• Peningkatan Progresif

• Tambah elemen apabila saiz skrin bertambah.

Sistem grid responsif Apabila skrin atau saiz port pandangan meningkat, sistem akan membahagikannya kepada sehingga 12 lajur secara automatik.

Cara Sistem Grid Bootstrap berfungsi

Sistem Grid mencipta reka letak halaman melalui satu siri baris dan lajur yang mengandungi kandungan. Begini cara sistem grid Bootstrap berfungsi: Baris

• mesti diletakkan di dalam kelas .container untuk mendapatkan penjajaran yang betul dan Margin kandungan (padding).

• Gunakan baris untuk membuat kumpulan lajur mendatar.

• Kandungan hendaklah diletakkan di dalam lajur dan hanya lajur boleh menjadi elemen anak langsung bagi baris.

• Kelas grid yang dipratentukan, seperti .row dan .col-xs-4, boleh digunakan untuk membuat reka letak grid dengan cepat. KURANG kelas campuran boleh digunakan untuk lebih banyak susun atur semantik.

• Lajur menggunakan pelapik untuk mencipta jurang antara kandungan lajur. Pelapik dinegatifkan oleh jidar pada .rows, yang mewakili offset baris bagi lajur pertama dan terakhir.

• Sistem grid dicipta dengan menyatakan dua belas lajur yang tersedia yang anda mahu rentangkan. Contohnya, untuk mencipta tiga lajur yang sama, gunakan tiga .col-xs-4.

Pertanyaan Media

Pertanyaan media adalah "peraturan CSS bersyarat" yang sangat mewah. Ia hanya berfungsi dengan beberapa CSS berdasarkan syarat tertentu tertentu. Jika syarat tersebut dipenuhi, gaya yang sepadan digunakan.

Pertanyaan media dalam Bootstrap membolehkan anda mengalih, menunjukkan dan menyembunyikan kandungan berdasarkan saiz port pandangan. Pertanyaan media berikut digunakan dalam fail LESS untuk mencipta ambang titik putus utama dalam sistem grid Bootstrap.

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

Kami juga kadangkala memasukkan lebar maksimum dalam kod pertanyaan media untuk mengehadkan kesan CSS kepada julat saiz skrin yang lebih kecil.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Pertanyaan media mempunyai dua bahagian, pertama spesifikasi peranti dan kemudian peraturan saiz. Dalam kes di atas, peraturan berikut ditetapkan:

Mari lihat baris kod berikut:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Untuk semua peraturan dengan lebar min: @screen-sm- Untuk peranti dengan min, jika lebar skrin lebih kecil daripada @screen-sm-max, beberapa pemprosesan akan dilakukan.

Pilihan Grid

Jadual berikut meringkaskan cara sistem grid Bootstrap berfungsi merentas berbilang peranti:

Struktur grid asas

Berikut ialah struktur asas grid Bootstrap:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Mari kita lihat beberapa contoh grid mudah:

• Instance: Tahap Bertindan

• Instance: Peranti Sederhana dan Besar

• Contoh: telefon mudah alih, tablet, komputer meja

Tetapan semula lajur responsif

Contoh berikut mengandungi 4 grid, tetapi Kami tidak dapat menentukan kedudukan grid paparan semasa menyemak imbas pada peranti kecil.

Untuk menyelesaikan masalah ini, anda boleh menggunakan kelas .clearfix dan utiliti responsif, seperti yang ditunjukkan dalam contoh berikut:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 响应式的列重置</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p>
      </div>
   </div>
</div>

</body>
</html>

Ubah saiz tetingkap pada penyemak imbas kepada lihat perubahan, atau Lihat keputusan pada telefon anda.

Lajur mengimbangi

Mengimbangi ialah ciri berguna untuk reka letak yang lebih profesional. Ia boleh digunakan untuk membuat lebih banyak ruang untuk lajur. Contohnya, kelas .col-xs=* tidak menyokong offset, tetapi mereka boleh mencapai kesannya hanya dengan menggunakan sel kosong.

Untuk menggunakan offset pada paparan skrin besar, gunakan kelas .col-md-offset-*. Kelas ini meningkatkan jidar kiri lajur sebanyak * lajur, dengan * berjulat daripada 1 hingga 11.

Dalam contoh di bawah, kami mempunyai <div class="col-md-6">..</div>, kami akan menggunakan .col-md-offset-3 kelas ke pusat div ini.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 偏移列</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>

   </div>
</div>

</body>
</html>

Lajur Bersarang

Untuk menyarangkan grid lalai dalam kandungan, tambahkan .baris baharu dan sarangkannya di dalam sedia ada. * menambah set .col-md-* lajur dalam lajur. Baris bersarang harus mengandungi set lajur yang tidak boleh melebihi 12 (sebenarnya, anda tidak perlu menduduki kesemua 12 lajur).

Dalam contoh di bawah, reka letak mempunyai dua lajur dan lajur kedua dibahagikan kepada dua baris empat kotak.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 嵌套列</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分为四个盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>

      </div>

   </div>

</div>

</body>
</html>

Pemesanan Lajur

Satu lagi ciri hebat sistem grid Bootstrap ialah anda boleh menulis lajur dengan mudah dalam satu susunan dan kemudian memaparkannya dalam Senarai pesanan lain.

Anda boleh menukar lajur grid terbina dalam dengan mudah dengan perintah kelas .col-md-push-* dan .col-md-pull-*, di mana * berjulat dari 1 hingga 11.

Dalam contoh di bawah, kami mempunyai reka letak dua lajur, dengan lajur kiri sempit bertindak sebagai bar sisi. Kami akan menggunakan kelas .col-md-push-* dan .col-md-pull-* untuk menukar susunan kedua-dua lajur ini.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例 - 列排序</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>

</div>

</body>
</html>