Berapa banyak lajur boleh dibahagikan kepada paling banyak?

Dalam bootstrap, halaman boleh dibahagikan kepada sehingga 12 lajur sistem grid dalam bootstrap adalah agak fleksibel dan boleh membahagikan halaman kepada 1, 2, 3, 4, 6 dan 12 lajur. bootstrap boleh membahagikan sehingga 12 lajur Halaman dibahagikan kepada 12 lajur.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Berapa banyak lajur boleh bootstrap dibahagikan kepada paling banyak

Sistem susun atur grid ini tergolong dalam bahagian Scaffolding (rangka, susun atur). Dalam Scaffolding, terdapat susun atur grid (tetap) (Sistem Grid) dan susun atur grid bendalir (Sistem Grid Bendalir). Artikel ini membincangkan susun atur grid tetap pertama.

Bootstrap menggunakan format susun atur 12 lajur, iaitu sehingga 12 lajur boleh disusun dalam satu baris halaman.

Bootstrap hanya boleh lalai kepada 12 lajur kerana 12 ialah gandaan sepunya terkecil bagi nombor "1, 2, 3, 4, 6", jadi sistem grid 12 lajur adalah agak fleksibel dan menyokong pembahagian baris menjadi 1 lajur, 2 lajur, 3 lajur, 4 lajur, 6 lajur.

Bootstrap menetapkan bahawa jumlah lebar halaman ialah 940px, yang berbeza daripada rangka kerja CSS lain (sesetengah yang lain ialah 960px (960grid, dsb.), ada yang 950px (cetak biru, dsb.)). 940px ini dinyatakan dalam kelas bernama bekas, seperti berikut

.container,
{
  width: 940px;
}

dan dinyatakan bahawa halaman bekas ini berpusat

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

(ini adalah helah, Agar untuk menjadikan div mempunyai kesan pemusatan yang sama di bawah pelbagai penyemak imbas, cara paling mudah ialah menetapkan nilai margin-kiri dan margin-kanan kepada auto *Zoom ialah hack CSS yang serasi dengan IE6 dan 7, tetapi mengapa patutkah ia digunakan? zoom=1 masih tidak diketahui.)

Pada masa yang sama, pemilih unsur pseudo css juga digunakan dalam kelas ini, kandungan sebelum dan selepas juga dikosongkan kandungan juga dikosongkan di bahagian belakang

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

Anda tidak boleh terus melaksanakan reka letak berbilang lajur dalam bekas Pada masa ini, anda perlu menggunakan baris sebagai bekas kedua menarik

.row {
  margin-left: -20px;
  *zoom: 1;
}

Jdar di sebelah kiri ialah -20px Ambil perhatian bahawa Negatif 20. Ini bermakna lebar baris akan melebihi bekas luar sebanyak 20 piksel. kenapa? Nanti awak akan tahu. Sudah tentu, baris juga mempunyai tetapan kandungan kosong dan terapung, serupa dengan bekas, jadi saya tidak akan menerangkan butiran di sini. Di dalam baris

ialah kelas span untuk susun atur berbilang lajur khusus yang ingin kami laksanakan. Apabila menggunakan reka letak secara khusus, kod kelihatan seperti ini

    <div class="container">
        <div class="row">
            <div class="span4">
                span4</div>
            <div class="span8">
                span8</div>
        </div>
    </div>

Mengapa span tidak boleh diletakkan terus ke dalam bekas, dan mengapa baris memerlukan margin-left=-20px? Mari kita bercakap tentang span secara terperinci Ini juga sebab mengapa penulis bercakap tentang "susun atur grid yang canggih".

Malah, Bootstrap mempunyai 12 kelas span iaitu span1, span2,...span12 Definisinya sangat mudah

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

Sudah tentu mereka juga boleh disatukan. menggunakan pemilih kelas pseudo Menetapkannya kepada gaya terapung

[class*="span"] {
  float: left;
}

Terapung ialah teori lain, kami tidak akan membincangkannya di bawah. Kami melihat dengan teliti dari span1 hingga span12 dan menemui corak, iaitu, setiap kali span ditingkatkan, ia meningkat sebanyak 80px. Cuma span1 mula dikira dari 60. Mengapa tidak biarkan span1 mula mengira dari 80, dan kemudian setiap span ialah gandaan 80. Ini juga lebih mudah diingati? Malah, rentang benar-benar mula dikira dari 80. Cuma bahagian yang boleh dilihat ialah 60, dan 20 yang lain ditetapkan dengan margin-left=20 dalam gaya seperti berikut

[class*="span"] {
  margin-left: 20px;
}

20 ini mempunyai makna lain, iaitu, ia boleh mewakili dua pada; halaman Jarak antara rentang, iaitu, terdapat jurang 20px antara semua rentang, supaya mereka tidak akan bersatu dan menjadi tidak dapat dipisahkan untuk pengguna akhir.

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Berapa banyak lajur boleh dibahagikan kepada paling banyak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!