Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >bootstrap mempunyai beberapa grid

bootstrap mempunyai beberapa grid

青灯夜游
青灯夜游asal
2022-01-10 11:15:181973semak imbas

bootstrap mempunyai 12 grid. Bootstrap menyediakan sistem grid bendalir mudah alih yang responsif yang membahagikan halaman secara automatik kepada sehingga 12 grid apabila saiz skrin atau port pandangan meningkat.

bootstrap mempunyai beberapa grid

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Bootstrap menyediakan satu set responsif dan peranti mudah alih Sistem grid bendalir yang diutamakan (sistem cengkaman), apabila saiz skrin atau port pandangan meningkat, sistem akan membahagikan halaman secara automatik kepada sehingga 12 grid, dan halaman boleh dibahagikan mengikut dua belas grid ini, yang sesuai untuk menulis adaptif Halaman ini sangat mudah. ​​Anda hanya perlu memadankan kelas .row dan kelas .col telefon mudah alih .col-xs-ultra-small (

bootstrap mempunyai beberapa grid

Contohnya: Jika anda ingin mencapai kesan gambar berikut pada halaman, bahagikan sahaja grid kepada tiga bahagian, setiap bahagian mempunyai 4 grid


Jika anda ingin memilih bilangan baris yang dipaparkan berdasarkan saiz komputer, tablet atau telefon mudah alih anda, anda boleh menggunakan col-*-* yang ditulis di atas untuk peruntukkan, contohnya

Ini bermakna grid dibahagikan kepada 2 bahagian pada skrin telefon mudah alih, setiap bahagian mempunyai 6 grid dan dipaparkan sebagai dua lajur pada peranti, manakala pada tablet dan desktop komputer Ia dibahagikan kepada 3 bahagian, setiap bahagian mempunyai 4 grid, dan dipaparkan sebagai tiga lajur pada peranti (terdapat paparan grid di bawah). dibahagikan kepada halaman kawalan berdasarkan parameter col-device-bilangan grid.


bootstrap mempunyai beberapa grid

.col mesti disertakan dalam .row untuk digunakan dan .col dan .row mesti digunakan dalam . bekas. Terdapat contoh di bawah untuk rujukan dan pemahaman:

<div class="container">
	<h1 class="page-header">标签1<small>使用bootstrap网格系统布局网页</small></h1>
	<p>标签3</p>
	<div class="row">
		<div class="col-xs-12 col-sm-4">
			<h1>列表1</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表2</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表3</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表3</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
	</div>
</div>

[Cadangan berkaitan: "tutorial bootstrap"]

Atas ialah kandungan terperinci bootstrap mempunyai beberapa grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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