溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

bootstrap支持的列表樣式有哪些

發(fā)布時(shí)間：2021-11-11 11:36:55 來(lái)源：億速云 閱讀：266 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)bootstrap支持的列表樣式有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

bootstrap支持6種列表樣式：1、ul無(wú)序列表；2、ol有序列表；3、去點(diǎn)列表；4、內(nèi)聯(lián)列表，是指把垂直列表?yè)Q成水平列表，且去掉項(xiàng)目符號(hào)，保持水平顯示的列表；5、dl定義列表；6、水平定義列表。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

列表--簡(jiǎn)介

在HTML文檔中，列表結(jié)構(gòu)主要有三種：有序列表、無(wú)序列表和定義列表。具體使用的標(biāo)簽說(shuō)明如下： 無(wú)序列表

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

有序列表

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

定義列表

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

Bootstrap根據(jù)平時(shí)的使用情形提供了六種形式的列表：

? 無(wú)序列表

?  有序列表

?  去點(diǎn)列表

?  內(nèi)聯(lián)列表

?  定義列表

?  水平定義列表

接下來(lái)，我們一起來(lái)學(xué)習(xí)Bootstrap提供的這六種列表的使用方法

<!DOCTYPE HTML>
< html>
	<head>
		<meta charset="utf-8">
		<title>列表--簡(jiǎn)介</title>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	</head>
	<body>
		<ul>
			<li>無(wú)序列表信息1</li>
			<li>無(wú)序列表信息2</li>
			<li>無(wú)序列表信息3</li>
		</ul>
		<ol>
			<li>有序列表信息1</li>
			<li>有序列表信息2</li>
			<li>有序列表信息3</li>
		</ol>
		<dl>
			<dt>定義列表標(biāo)題</dt>
			<dd>定義列表信息1</dd>
			<dd>定義列表信息2</dd>
		</dl>
	</body>
	</html>

列表--無(wú)序列表、有序列表

bootstrap支持的列表樣式有哪些bootstrap支持的列表樣式有哪些

無(wú)序列表和有序列表使用方式和我們平時(shí)使用的一樣（無(wú)序列表使用ul，有序列表使用ol標(biāo)簽），在樣式方面，Bootstrap只是在此基礎(chǔ)上做了一些細(xì)微的優(yōu)化，源碼請(qǐng)查看bootstrap.css文件的第569行~第579行：

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

從源碼上我們可以得知，Bootstrap對(duì)于列表，只是在margin上做了一些調(diào)整。

列表嵌套

在Bootstrap中列表也是可以嵌套的。

列表--去點(diǎn)列表

小伙伴們可以看到，在Bootstrap中默認(rèn)情況下無(wú)序列表和有序列表是帶有項(xiàng)目符號(hào)的，但在實(shí)際工作中很多時(shí)候，我們的列表是不需要這個(gè)編號(hào)的，比如說(shuō)用無(wú)序列表做導(dǎo)航的時(shí)候。Bootstrap為眾多開(kāi)發(fā)者考慮的非常周道，通過(guò)給無(wú)序列表添加一個(gè)類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。 /*源碼請(qǐng)查看bootstrap.css文件第580行~第583行*/

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

從示例中可以看出，除了項(xiàng)目編號(hào)之外，還將列表默認(rèn)的左邊內(nèi)距也清０了。

列表--內(nèi)聯(lián)列表

Bootstrap像去點(diǎn)列表一樣，通過(guò)添加類名“.list-inline”來(lái)實(shí)現(xiàn)內(nèi)聯(lián)列表，簡(jiǎn)單點(diǎn)說(shuō)就是把垂直列表?yè)Q成水平列表，而且去掉項(xiàng)目符號(hào)（編號(hào)），保持水平顯示。也可以說(shuō)內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。 /*源碼查看bootstrap.css文件第584行~第593行*/

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

看個(gè)示例：

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

列表--定義列表

bootstrap支持的列表樣式有哪些

對(duì)于定義列表而言，Bootstrap并沒(méi)有做太多的調(diào)整，只是調(diào)整了行間距，外邊距和字體加粗效果。 /*源碼請(qǐng)查看bootstrap.css文件第594行~第607行*/

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

對(duì)于定義列表使用，其實(shí)很簡(jiǎn)單，與我們以前的使用定義列表的方法是相同的：

<dl>
    <dt>W3cplus</dt>
    <dd>一個(gè)致力于推廣國(guó)內(nèi)前端行業(yè)的技術(shù)博客</dd>
    <dt>seashen.cn</dt>
    <dd>一個(gè)真心在做HTML5教育的網(wǎng)站</dd>
</dl>

列表--水平定義列表

bootstrap支持的列表樣式有哪些

水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實(shí)現(xiàn)水平顯示效果。 /*源碼請(qǐng)查看bootstrap.css文件第608行~第621行*/

@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;
  }
}

此處添加了一個(gè)媒體查詢。也就是說(shuō)，只有屏幕大于768px的時(shí)候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實(shí)現(xiàn)主要方式： 1、將dt設(shè)置了一個(gè)左浮動(dòng)，并且設(shè)置了一個(gè)寬度為160px 2、將dd設(shè)置一個(gè)margin-left的值為180px，達(dá)到水平的效果 3、當(dāng)標(biāo)題寬度超過(guò)160px時(shí)，將會(huì)顯示三個(gè)省略號(hào)

其用法如下：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一個(gè)致力于推廣國(guó)內(nèi)前端行業(yè)的技術(shù)博客。它以探索為己任，不斷活躍在行業(yè)技術(shù)最前沿，努力提供高質(zhì)量前端技術(shù)博文</dd>
    <dt>seashen.cn</dt>
    <dd>一個(gè)專業(yè)的HTML5網(wǎng)站</dd>
    <dt>我來(lái)測(cè)試一個(gè)標(biāo)題，我來(lái)測(cè)試一個(gè)標(biāo)題</dt>
    <dd>我在寫一個(gè)水平定義列表的效果，我在寫一個(gè)水平定義列表的效果</dd>
</dl>

當(dāng)你縮小你的瀏覽器屏幕時(shí)，水平定義列表將回復(fù)到原始的狀態(tài)。

感謝各位的閱讀！關(guān)于“bootstrap支持的列表樣式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手