Rumah hujung hadapan web tutorial js Bootstrap mesti mempelajari sistem grid (layout) setiap hari_javascript kemahiran

Bootstrap mesti mempelajari sistem grid (layout) setiap hari_javascript kemahiran

May 16, 2016 pm 03:30 PM
bootstrap susun atur

1. Sistem grid (susun atur)
Bootstrap mempunyai sistem grid cecair responsif terbina dalam yang diutamakan apabila peranti skrin atau saiz port pandangan meningkat, sistem akan dibahagikan kepada sehingga 12 lajur secara automatik.

Saya memanggil sistem grid dalam Bootstrap sebagai susun atur di sini. Ia mencipta reka letak halaman melalui satu siri gabungan baris dan lajur, dan kemudian kandungan anda boleh diletakkan ke dalam reka letak yang anda buat. Berikut ialah pengenalan ringkas kepada prinsip kerja sistem grid Bootstrap:

Prinsip pelaksanaan sistem grid adalah sangat mudah, hanya dengan menentukan saiz kontena, membahagikannya kepada 12 bahagian yang sama (terdapat juga 24 atau 32 bahagian yang sama, tetapi 12 bahagian adalah yang paling biasa), kemudian melaraskan bahagian dalam dan margin luar, dan akhirnya menggabungkan Pertanyaan media untuk mencipta sistem grid responsif yang berkuasa. Sistem grid dalam rangka kerja Bootstrap membahagikan bekas kepada 12 bahagian yang sama.

Apabila menggunakannya, anda boleh menyusun semula kod sumber KURANG (atau Sass) untuk mengubah suai nilai 12 mengikut keadaan sebenar (iaitu, menukarnya kepada 24 atau 32. Sudah tentu, anda juga boleh membahagikannya kepada lebih banyak , tetapi tidak disyorkan untuk menggunakannya dengan cara ini).

2. Peraturan penggunaan
Bootstrap datang dengan satu set ciri responsif dan mesra mudah alih yang terbina di dalamnya.

1. Baris data (.row) mesti terkandung dalam bekas (.container) untuk memberikannya penjajaran dan padding yang sesuai. Seperti:

<div class="container">
 <div class="row"></div>
</div>
Salin selepas log masuk

2. Lajur (.column) boleh ditambahkan pada baris (.row), tetapi jumlah bilangan lajur tidak boleh melebihi jumlah bilangan lajur yang dibahagikan sama rata, seperti 12. Seperti:

<div class="container">
<div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-8"></div>
Salin selepas log masuk

3. Kandungan khusus hendaklah diletakkan dalam bekas lajur (lajur), dan hanya lajur (lajur) boleh digunakan sebagai elemen anak langsung bekas baris (.row)

4. Cipta jarak antara lajur dengan menetapkan pelapik. Kemudian mengimbangi kesan pelapik dengan menetapkan margin negatif untuk lajur pertama dan terakhir

Untuk lebih memahami cara sistem grid rangka kerja Bootstrap berfungsi, mari kita lihat lakaran:

Penjelasan ringkas tentang gambar:

1. Sempadan paling luar mempunyai kawasan putih yang besar, yang bersamaan dengan kawasan pelayar yang boleh dilihat. Terdapat kesan responsif dalam sistem grid rangka kerja Bootstrap, yang disertakan dengan empat jenis penyemak imbas (skrin kecil tambahan, skrin kecil, skrin sederhana dan skrin besar) Titik putusnya (titik pembahagi piksel) ialah 768px, 992px dan 1220px.

2. Sempadan kedua (1) bersamaan dengan bekas (.bekas). Untuk resolusi penyemak imbas yang berbeza, lebar adalah berbeza: automatik, 750px, 970px dan 1170px. Tetapkan dalam baris 736 hingga 756 bootstrap.css:

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 @media (min-width: 768px) {
 .container {
 width: 750px;
 }
 @media (min-width: 992px) {
 .container {
 width: 970px;
 }
 @media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
Salin selepas log masuk

Bar mendatar No. 3 dan 2 menggambarkan bahawa baris (.baris) bekas dibahagikan kepada 12 bahagian yang sama, iaitu lajur. Setiap lajur mempunyai "padding-left:15px" (bahagian merah jambu dalam gambar) dan "padding-right:15px" (bahagian ungu dalam gambar). Ini juga menyebabkan padding-left lajur pertama dan padding-right lajur terakhir untuk menduduki 30px daripada jumlah lebar, menjadikan halaman tidak sedap dipandang, jika anda perlu meninggalkan jarak tertentu, pendekatan ini bagus. Seperti yang ditunjukkan dalam baris 767~772 dalam bootstrap.css:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
Salin selepas log masuk

4. Bar mendatar No. 3 ialah bekas baris (.row), yang mentakrifkan nilai "margin-kiri" dan "margin-kanan" sebagai "-15px", yang digunakan untuk mengimbangi kiri pelapik dan Pelapik kanan lajur terakhir. Anda boleh melihat ini dalam baris 763~767 bootstrap.css:

.row {
 margin-right: -15px;
 margin-left: -15px;
Salin selepas log masuk

5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果,第一列和最后一列与容器(.container)之间没有间距。

横条5只是想向大家展示,你可以根据需要,任意组合列与列,只是他们的组合数之和不要超过总列数。

3、栅格选项
  通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。


从上面的截图可以看出来,Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样让开发人员在开发时可以有更多的选择。根据我的理解:如果在一个元素上使用多个不同的上面的样式类,那么元素会根据在不同尺寸选择最合适(匹配最理想的)的样式类。简单的举例进行说明:比如在一个元素上我们使用了两个样式类:.col-md-和.col-lg。可以对照上面的截图来看

第一种情况:尺寸》=1200px;那么会选择.col-lg。

第二种情况:尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。

第三种情况:如果尺寸《992px;那么这两个样式类都将不会作用于元素上。

4、基本用法
 网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。

1)、列组合

列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性,例如:

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
 <div class="col-md-3">.col-md-3</div>
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-3">.col-md-3</div>
 </div>
</div>
Salin selepas log masuk

使用上面的结构,你将看到下图的效果:


实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。在bootstrap.css文件的第1088行~1126行:

/*确保所有列左浮动*/

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 float: left;
 }
/*定义每个列组合的宽度(使用的百分比)*/

Salin selepas log masuk

 .col-md-12 {
 width: 100%;
 }
 .col-md-11 {
 width: 91.66666667%;
 }
 .col-md-10 {
 width: 83.33333333%;
 }
 .col-md-9 {
 width: 75%;
 }
 .col-md-8 {
 width: 66.66666667%;
 }
 .col-md-7 {
 width: 58.33333333%;
 }
 .col-md-6 {
 width: 50%;
 }
 .col-md-5 {
 width: 41.66666667%;
 }
 .col-md-4 {
 width: 33.33333333%;
 }
 .col-md-3 {
 width: 25%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 .col-md-1 {
 width: 8.33333333%;
 }

Salin selepas log masuk

5、列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>
Salin selepas log masuk

如上面的示例代码,得到的效果如下


实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。在bootstrap.css中第1205行~1241行所示:

 .col-md-offset-12 {
 margin-left: 100%;
}
 .col-md-offset-11 {
 margin-left: 91.66666667%;
 }
 .col-md-offset-10 {
 margin-left: 83.33333333%;
 }
 .col-md-offset-9 {
 margin-left: 75%;
 }
 .col-md-offset-8 {
 margin-left: 66.66666667%;
 }
 .col-md-offset-7 {
 margin-left: 58.33333333%;
 }
 .col-md-offset-6 {
 margin-left: 50%;
 }
 .col-md-offset-5 {
 margin-left: 41.66666667%;
 }
 .col-md-offset-4 {
 margin-left: 33.33333333%;
 }
 .col-md-offset-3 {
 margin-left: 25%;
 }
 .col-md-offset-2 {
 margin-left: 16.66666667%;
 }
 .col-md-offset-1 {
 margin-left: 8.33333333%;
 }
 .col-md-offset-0 {
 margin-left: 0;
 }
Salin selepas log masuk

注意:

不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示,如:


.col-md-3

col-md-offset-3

col-md-4


上面代码中列和偏移列总数为3+3+3+4 = 13>12,所以发生了列断行。

如上面的示例代码,得到的效果如下


6、列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

我们来看一个简单的示例:

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
</div>
Salin selepas log masuk

默认情况之下,上面的代码效果如下:


“col-md-4”居左,“col-md-8”居右,如果要互换位置,需要将“col-md-4”向右移动8个列的距离,也就是8个offset ,也就是在“

”添加类名“col-md-push-8”,调用其样式。

也要将“col-md-8”向左移动4个列的距离,也就是4个offset,在“

”上添加类名“col-md-pull-4”:

Bootstrap仅通过设置left和right来实现定位效果。在boostrap.css文件的第1127行~第1204行可以看到具体的代码:

.col-md-pull-12 {
 right: 100%;
 }
 .col-md-pull-11 {
 right: 91.66666667%;
 }
 .col-md-pull-10 {
 right: 83.33333333%;
 }
 .col-md-pull-9 {
 right: 75%;
 }
 .col-md-pull-8 {
 right: 66.66666667%;
 }
 .col-md-pull-7 {
 right: 58.33333333%;
 }
 .col-md-pull-6 {
 right: 50%;
 }
 .col-md-pull-5 {
 right: 41.66666667%;
 }

 .col-md-pull-4 {
 right: 33.33333333%;
 }

 .col-md-pull-3 {
 right: 25%;
 }

 .col-md-pull-2 {
 right: 16.66666667%;
 }
 .col-md-pull-1 {
 right: 8.33333333%;
 }
 .col-md-pull-0 {
 right: 0;
 }

 .col-md-push-12 {
 left: 100%;
 }
 .col-md-push-11 {
 left: 91.66666667%;
 }
 .col-md-push-10 {
 left: 83.33333333%;
 }
 .col-md-push-9 {
 left: 75%;
 }
 .col-md-push-8 {
 left: 66.66666667%;
 }
 .col-md-push-7 {
 left: 58.33333333%;
 }
 .col-md-push-6 {
 left: 50%;
 }
 .col-md-push-5 {
 left: 41.66666667%;
 }
 .col-md-push-4 {
 left: 33.33333333%;
 }
 .col-md-push-3 {
 left: 25%;
 }
 .col-md-push-2 {
 left: 16.66666667%;
 }
 .col-md-push-1 {
 left: 8.33333333%;
 }
 .col-md-push-0 {
 left: 0;
}

Salin selepas log masuk

7、列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。来看一个简单示例:

<div class="container">
 <div class="row">
  <div class="col-md-8">
  我的里面嵌套了一个网格
   <div class="row">
   <div class="col-md-6">col-md-6</div>
   <div class="col-md-6">col-md-6</div>
   </div>
  </div>
 <div class="col-md-4">col-md-4</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">
 我的里面嵌套了一个网格
  <div class="row">
   <div class="col-md-4">col-md-4</div>
   <div class="col-md-4">col-md-4</div>
   <div class="col-md-4">col-md-4</div>
  </div>
 </div>
 </div>
</div>
Salin selepas log masuk

效果如下:

注意:嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

本文都是通过最简单的案例,来剖析案例中涉及到的布局要点,希望对大家的学习有所帮助。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara melakukan pusat menegak bootstrap Cara melakukan pusat menegak bootstrap Apr 07, 2025 pm 03:21 PM

Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara mendapatkan bar carian bootstrap Cara mendapatkan bar carian bootstrap Apr 07, 2025 pm 03:33 PM

Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara melihat tarikh bootstrap Cara melihat tarikh bootstrap Apr 07, 2025 pm 03:03 PM

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

See all articles