免費AI編程助手
Bootstrap 列表
2018-03-03 16:12 更新
在本章節(jié)中，我們將學(xué)習(xí)如何使用Bootstrap為不同類型的列表添加樣式。
我們可以定義三種不同類型的列表：
- 無序列表 - 其順序無關(guān)緊要的項目列表。無序列表中的列表項目用著重號標(biāo)記。
- 有序列表 - 其順序重要的項目列表。有序列表中的列表項目用數(shù)字標(biāo)記。
- 定義列表 - 具有相關(guān)描述的術(shù)語列表。
定義列表
帶有其關(guān)聯(lián)說明的術(shù)語列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//m.hgci.cn/style/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<dl>
<dt>HTML</dt>
<dd>Web page mark up language.</dd>
</dl>
</body>
</html>水平定義列表
在<dl>中并排排列術(shù)語和說明。像默認(rèn)的<dl> 那樣開始堆疊，但是是在導(dǎo)航條擴(kuò)展時。
<!DOCTYPE HTML>
<html>
<head>
<link href="//m.hgci.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<dl class="dl-horizontal">
<dt>HTML</dt>
<dd>Web page mark up language.</dd>
</dl>
</body>
</html>有序列表
順序明確重要的項目列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//m.hgci.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ol>
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
</body>
</html>例子
.list-unstyled類僅從作為<ul>或<ol>元素的直接子項的列表項中刪除默認(rèn)列表樣式和左側(cè)填充。<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h2>Unstyled Unordered List</h2>
<ul class="list-unstyled">
<li>CSS</li>
<li>Web
<ul>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</li>
<li>SQL</li>
<li>Java</li>
</ul>
<hr>
<h2>Unstyled Ordered List</h2>
<ol class="list-unstyled">
<li>Javascript</li>
<li>Oracle
<ol>
<li>Pl/SQL</li>
<li>Server</li>
</ol>
</li>
<li>Client</li>
<li>Message</li>
</ol>
</div>
</body>
</html>無序列表
其中順序沒有明顯影響的項目列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//m.hgci.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ul>
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>Unstyled列表
刪除列表項（僅限直系子級）上的默認(rèn)列表樣式和左邊距。這只適用于直接子列表項，意味著你還需要為所有的嵌套列表添加類。
<!DOCTYPE HTML>
<html>
<head>
<link href="//m.hgci.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ul class="list-unstyled">
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>內(nèi)聯(lián)列表
將所有列表項放在一行上，使用inline-block和一些輕量填充。
<!DOCTYPE HTML>
<html>
<head>
<link href="//m.hgci.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ul class="list-inline">
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：