bootstrap menyokong beberapa gaya senarai-Tutorial Bootstrap-php.cn

bootstrap menyokong beberapa gaya senarai

青灯夜游

Lepaskan： 2021-11-11 11:27:40

asal

3899 orang telah melayarinya

bootstrap menyokong 6 gaya senarai: 1. ul unordered list; 3. Alih keluar senarai; dan pastikan senarai dipaparkan secara mendatar; 5. Senarai definisi dl;

bootstrap menyokong beberapa gaya senarai

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

Senarai--Pengenalan

Dalam dokumen HTML, terdapat tiga jenis struktur senarai utama: senarai tersusun, senarai tidak tersusun dan senarai definisi. Teg khusus yang digunakan diterangkan seperti berikut: Senarai tidak tersusun

<ul>
    <li>…</li>
</ul>

Salin selepas log masuk

Senarai tertib

<ol>
    <li>…</li>
</ol>

Salin selepas log masuk

Senarai definisi

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Salin selepas log masuk

Bootstrap menyediakan enam bentuk senarai berdasarkan penggunaan harian:

☑ Senarai tidak tertib

☑ Senarai tertib

☑ Go point list

☑ Senarai sebaris

☑ Senarai definisi

☑ Senarai definisi mendatar

Seterusnya, kami Bangun dan pelajari cara menggunakan ini enam senarai disediakan oleh Bootstrap

<!DOCTYPE HTML>
< html>
	<head>
		<meta charset="utf-8">
		<title>列表--简介</title>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	</head>
	<body>
		<ul>
			<li>无序列表信息1</li>
			<li>无序列表信息2</li>
			<li>无序列表信息3</li>
		</ul>
		<ol>
			<li>有序列表信息1</li>
			<li>有序列表信息2</li>
			<li>有序列表信息3</li>
		</ol>
		<dl>
			<dt>定义列表标题</dt>
			<dd>定义列表信息1</dd>
			<dd>定义列表信息2</dd>
		</dl>
	</body>
	</html>

Salin selepas log masuk

Senarai - senarai tidak tersusun, senarai tersusun

bootstrap menyokong beberapa gaya senarai

Menggunakan senarai tidak tersusun dan tersusun lists adalah sama seperti yang biasa kami gunakan (senarai tidak tersusun menggunakan ul, senarai tersusun menggunakan teg ol, Bootstrap hanya membuat beberapa perubahan halus berdasarkan ini, untuk kod sumber, sila lihat baris 569 hingga 579). daripada fail bootstrap.css:

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

Salin selepas log masuk

Daripada kod sumber, kita boleh tahu bahawa Bootstrap hanya melakukannya pada margin untuk membuat beberapa pelarasan.

Bersarang senarai

Senarai juga boleh bersarang dalam Bootstrap.

Senarai--Pergi ke senarai

Anda boleh melihatnya secara lalai dalam Bootstrap, senarai tidak tertib dan senarai tersusun Ia mempunyai titik tumpu, tetapi dalam banyak kes dalam kerja sebenar, senarai kami tidak memerlukan nombor ini, seperti apabila menggunakan senarai tidak tersusun untuk navigasi. Bootstrap sangat bertimbang rasa untuk banyak pembangun Dengan menambahkan nama kelas ".list-unstyled" pada senarai tidak tersusun, gaya senarai lalai boleh dialih keluar. /*Untuk kod sumber, sila lihat baris 580~583 fail bootstrap.css*/

.list-unstyled {
padding-left: 0;
list-style: none;
}

Salin selepas log masuk

Seperti yang dapat dilihat daripada contoh, sebagai tambahan kepada nombor projek, lalai di sebelah kiri senarai juga akan disertakan Jarak juga mengosongkan 0.

Senarai--senarai sebaris

Bootstrap melaksanakan senarai sebaris dengan menambahkan nama kelas ".senarai-sebaris" secara ringkasnya, Itu ialah, gantikan senarai menegak dengan senarai mendatar , dan keluarkan peluru (nombor) , kekalkan paparan mendatar . Ia juga boleh dikatakan bahawa senarai sebaris dilahirkan untuk membuat navigasi mendatar. /*Lihat kod sumber untuk baris 584~593 fail bootstrap.css*/

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

Salin selepas log masuk

Lihat contoh:

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

Salin selepas log masuk

Senarai--Senarai definisi

bootstrap menyokong beberapa gaya senarai

Untuk senarai definisi, Bootstrap tidak membuat terlalu banyak pelarasan. Ia hanya melaraskan jarak baris , margin dan fon. tambahan kesan. /*Untuk kod sumber, sila lihat baris 594~607 fail bootstrap.css*/

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

Salin selepas log masuk

Untuk penggunaan senarai definisi, ia sebenarnya sangat mudah seperti kami yang terdahulu kaedah menggunakan senarai definisi:

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>seashen.cn</dt>
    <dd>一个真心在做HTML5教育的网站</dd>
</dl>

Salin selepas log masuk

Senarai - Senarai definisi mendatar

bootstrap menyokong beberapa gaya senarai

Senarai definisi mendatar Sama seperti senarai sebaris, Bootstrap boleh menambah nama kelas pada < ;dl> .dl-horizontal" untuk mencapai kesan paparan mendatar bagi senarai definisi. /*Untuk kod sumber, sila lihat baris 608~621 fail bootstrap.css*/

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

Salin selepas log masuk

Pertanyaan media ditambahkan di sini. Dalam erti kata lain, hanya apabila skrin lebih besar daripada 768px , menambah nama kelas ".dl-horizontal" akan mempunyai kesan senarai definisi mendatar. Cara utama untuk melaksanakannya: 1 Tetapkan dt ke apungan kiri dan tetapkan lebar 160px 2. Tetapkan dd kepada nilai margin-kiri 180px untuk mencapai kesan mendatar 3. Apabila lebar tajuk melebihi 160px , tiga elips

akan dipaparkan dan penggunaannya adalah seperti berikut:

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
    <dt>seashen.cn</dt>
    <dd>一个专业的HTML5网站</dd>
    <dt>我来测试一个标题，我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>

Salin selepas log masuk

Apabila anda mengecilkan skrin penyemak imbas anda, senarai definisi mendatar akan kembali kepada keadaan asalnya.

Kajian yang disyorkan: "tutorial penggunaan bootstrap"

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