W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
在本章節(jié)中,我們將學(xué)習(xí)如何使用Bootstrap為不同類型的列表添加樣式。
我們可以定義三種不同類型的列表:
帶有其關(guān)聯(lián)說明的術(shù)語列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//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="//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="//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>
<!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="//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>
刪除列表項(僅限直系子級)上的默認(rèn)列表樣式和左邊距。這只適用于直接子列表項,意味著你還需要為所有的嵌套列表添加類。
<!DOCTYPE HTML>
<html>
<head>
<link href="//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>
將所有列表項放在一行上,使用inline-block和一些輕量填充。
<!DOCTYPE HTML>
<html>
<head>
<link href="//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>
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: