Penjelasan terperinci tentang kemahiran sistem_javascript grid Bootstrap-tutorial js-php.cn

Penjelasan terperinci tentang kemahiran sistem_javascript grid Bootstrap

WBOY

Lepaskan： 2016-05-16 15:03:57

asal

1589 orang telah melayarinya

Sistem grid dalam rangka kerja bootstrap membahagikan bekas kepada 12 bahagian yang sama Apabila menggunakannya, anda boleh menyusun semula kod sumber LESS/SASS mengikut situasi sebenar untuk mengubah suai nilai 12. Cara sistem grid rangka kerja bootstrap berfungsi:

1. Baris data (.row) mesti terkandung dalam bekas (.container) supaya dapat diberikan penjajaran dan padding yang sesuai

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

<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>

Salin selepas log masuk

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

4. Cipta jarak antara lajur dengan menetapkan padding, dan kemudian imbangi kesan padding dengan menetapkan margin negatif untuk lajur pertama dan timbunan terakhir

Dengan kesan responsif dalam sistem grid bootstrap, ia didatangkan dengan empat jenis penyemak imbas, (skrin kecil tambahan, skrin kecil, skrin sederhana dan skrin besar) dan titik putusnya ialah 768px, 992px, 1220px

Bekas (.container) mempunyai lebar yang berbeza untuk resolusi penyemak imbas yang berbeza: automatik, 760px, 970px, 1170px
;

.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

Bekas baris (.row) membahagikan baris bekas kepada 12 bahagian yang sama, iaitu lajur. Setiap lajur mempunyai padding-left:15px dan padding-right:15px ini juga menyebabkan padding-left lajur pertama dan padding-right lajur terakhir menduduki 30px lebar tengah
;

.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

Bekas baris (.row) mentakrifkan nilai margin-kiri dan margin-kanan -15px, yang digunakan untuk mengimbangi padding kiri lajur pertama dan padding kanan lajur terakhir, supaya lajur pertama dan lajur terakhir adalah sejajar dengan bekas (.bekas) Tiada ruang antaranya

.row {
margin-right: -15px;
margin-left: -15px;
}

Salin selepas log masuk

Penggunaan asas

Memandangkan rangka kerja bootstrap menggunakan gaya grid yang berbeza untuk saiz skrin yang berbeza, perkara berikut mengambil skrin sederhana (970px) sebagai contoh.

1. Gabungan lajur

Gabungan lajur adalah untuk menukar nombor untuk menggabungkan lajur (jumlah bilangan lajur tidak boleh melebihi 12), yang agak serupa dengan atribut colspan jadual kaedah gabungan lajur hanya melibatkan dua ciri: terapung dalam peratusan lebar

<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

Kesannya adalah seperti berikut:

Pastikan semua lajur terapung ke kiri

.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

Tentukan lebar setiap gabungan lajur

.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

Lajur Offset

Kadangkala, kami tidak mahu dua lajur bersebelahan dirapatkan, tetapi kami tidak mahu menggunakan margin atau cara teknikal lain Ini boleh dicapai dengan menggunakan mengimbangi lajur (offset). Untuk menggunakan ofset lajur, cuma tambahkan nama kelas .col-md-offset-* (asterik mewakili bilangan gabungan lajur yang akan diimbangi) pada elemen lajur dan lajur dengan nama kelas ini akan diimbangi, seperti: dalam elemen lajur Tambah .col-md-offset-4 untuk menunjukkan bahawa lajur diimbangi ke kanan dengan lebar 4 lajur

<div class="container">
<div class="row">
<div class="col-md-4">1111</div>
<div class="col-md-4 col-md-offset-2">111</div>
<div class="col-md-2">333</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">列偏移</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
</div>

Salin selepas log masuk

Kesannya adalah seperti berikut:

Prinsip pelaksanaan:

Menggunakan satu perdua belas margin-kiri, terdapat seberapa banyak margin-kiri berbanding dengan offset

.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

Perlu diambil perhatian bahawa apabila menggunakan col-md-offset-* untuk mengimbangi kanan lajur, pastikan jumlah bilangan lajur dan lajur mengimbangi tidak melebihi 12, jika tidak lajur akan dipaparkan dengan garis putus

Isih lajur

Isih lajur adalah untuk menukar arah lajur dan menetapkan jarak terapung. Dalam sistem grid bootstrap ia dilakukan dengan menambah nama kelas. col-md-push-* dan 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

Kesannya adalah seperti berikut:

col-md-4 berada di sebelah kiri dan col-md-8 di sebelah kanan Jika anda ingin menukar kedudukan, anda perlu mengalihkan col-md-4 ke kanan sebanyak 8 lajur, iaitu tambah. nama kelas.col-md -push-8 Pada masa yang sama, anda perlu mengalihkan col-md-8 4 lajur ke kiri, iaitu menambah nama kelas.col-md-pull-4

Bootstrap hanya mencapai kesan kedudukan dengan menetapkan kiri dan kanan.

.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

Bersarang lajur

Penyarang lajur boleh menambah atau membuat bekas baris (baris) dalam lajur, dan kemudian masukkan lajur dalam bekas baris ini Apabila lebar bekas baris (baris) dalam bekas lajur ialah 100%, ia adalah arus Lebar lajur luar

<div class="container">
<div class="row">
<div class="col-md-8">

Salin selepas log masuk

我在里面嵌套了一个网格

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

Salin selepas log masuk

我在里面嵌套了一个网格

<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