Bootstrap提供了六種列表效果

時間  2019-11-11
標籤 bootstrap 提供 列表 效果 欄目 Bootstarp 简体版
原文   原文鏈接

u=2721599714,2937226223&fm=21&gp=0

列表--簡介

在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標籤說明以下：
無序列表css

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

有序列表html

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

定義列表前端

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

Bootstrap根據平時的使用情形提供了六種形式的列表：bootstrap

☑  普通列表瀏覽器

☑  有序列表學習

☑  去點列表測試

☑  內聯列表字體

☑  描述列表優化

☑  水平描述列表網站

接下來，咱們一塊兒來學習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>

列表--無序列表、有序列表

無序列表

無序列表和有序列表使用方式和咱們平時使用的同樣（無序列表使用ul，有序列表使用ol標籤），在樣式方面，Bootstrap只是在此基礎上作了一些細微的優化，源碼請查看bootstrap.css文件的第569行~第579行：

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

從源碼上咱們能夠得知，Bootstrap對於列表，只是在margin上作了一些調整。

列表嵌套

在Bootstrap中列表也是能夠嵌套的。

<h5>普通列表</h5>
<ul>
<li>列表項目</li>
<li>列表項目</li>
<li>列表項目</li>
<li>列表項目</li>
<li>列表項目</li>
</ul>
<h5>有序列表</h5>
<ol>
<li>項目列表一</li>
<li>項目列表二</li>
<li>項目列表三</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
<li>有序列表</li>
<li>
有序列表
<ol>
<li>有序列表(2)</li>
<li>有序列表(2)</li>
</ol>
</li>
<li>有序列表</li>
</ol>

列表--去點列表

小夥伴們能夠看到，在Bootstrap中默認狀況下無序列表和有序列表是帶有項目符號的，但在實際工做中不少時候，咱們的列表是不須要這個編號的，好比說用無序列表作導航的時候。Bootstrap爲衆多開發者考慮的很是周道，經過給無序列表添加一個類名「.list-unstyled」,這樣就能夠去除默認的列表樣式的風格。
/*源碼請查看bootstrap.css文件第580行~第583行*/

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

從示例中能夠看出，除了項目編號以外，還將列表默認的左邊內距也清０了。

<li>
項目列表
<ul>
<li>不帶項目符號</li>
<li>不帶項目符號</li>
</ul>
</li>

列表--內聯列表

Bootstrap像去點列表同樣，經過添加類名「.list-inline」來實現內聯列表，簡單點說就是把垂直列表換成水平列表，並且去掉項目符號（編號），保持水平顯示。也能夠說內聯列表就是爲製做水平導航而生。
/*源碼查看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; }

看個示例：

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

列表--定義列表

對於定義列表而言，Bootstrap並無作太多的調整，只是調整了行間距，外邊距和字體加粗效果。
/*源碼請查看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; }

對於定義列表使用，其實很簡單，與咱們之前的使用定義列表的方法是相同的：

<dl>     <dt>W3cplus</dt>     <dd>一個致力於推廣國內前端行業的技術博客</dd>     <dt>seashen.cn</dt>     <dd>一個真心在作HTML5教育的網站</dd> </dl>

列表--水平定義列表

水平定義列表就像內聯列表同樣，Bootstrap能夠給<dl>添加類名「.dl-horizontal」給定義列表實現水平顯示效果。
/*源碼請查看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;   } }

此處添加了一個媒體查詢。也就是說，只有屏幕大於768px的時候，添加類名「.dl-horizontal」才具備水平定義列表效果。其實現主要方式：
一、將dt設置了一個左浮動，而且設置了一個寬度爲160px
二、將dd設置一個margin-left的值爲180px，達到水平的效果
三、當標題寬度超過160px時，將會顯示三個省略號

其用法以下：

<dl>     <dt>W3cplus</dt>     <dd>一個致力於推廣國內前端行業的技術博客。它以探索爲己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>     <dt>seashen.cn</dt>     <dd>一個專業的HTML5網站</dd>     <dt>我來測試一個標題，我來測試一個標題</dt>     <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd> </dl>

當你縮小你的瀏覽器屏幕時，水平定義列表將回復到原始的狀態。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程