bootstrap支援幾種列表樣式-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

bootstrap支援幾種列表樣式

青灯夜游

Nov 11, 2021 am 11:27 AM

bootstrap

bootstrap支援6種列表樣式：1、ul無序列表；2、ol有序列表；3、去點列表；4、內聯列表，是指把垂直列表換成水平列表，且去掉項目符號，保持水平顯示的清單；5、dl定義清單；6、水平定義清單。

bootstrap支援幾種列表樣式

本教學操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦

清單--簡介

#在HTML文件中，清單結構主要有三種：有序列表、無序列表、定義列表。具體使用的標籤說明如下： 無序列表

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

有序列表

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

## 定義列表

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

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>

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

bootstrap支援幾種列表樣式

無序列表和有序列表使用方式和我們平常使用的一樣（無序列表使用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中列表也是可以嵌套的。

列表--去點列表

小夥伴可以看到，在Bootstrap中預設情況下

無序列表和有序列表是帶有項目符號的，但在實際工作中很多時候，我們的清單是不需要這個編號的，比如說用無序列表做導航的時候。 Bootstrap為眾多開發者考慮的非常周道，透過為無序列表添加一個類別名稱「.list-unstyled」,這樣就可以去除預設的列表樣式的風格。 /*原始碼請查看bootstrap.css檔案第580行~第583行*/

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

從範例中可以看出，除了項目編號之外，還將清單預設的

左邊內距也清０了。

列表--內聯列表

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並沒有做太多的調整，只是調整了

行間距，外邊距和字體加粗效果。 /*原始碼請查看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支援幾種列表樣式

水平定義列表就像內聯列表一樣，Bootstrap可以給

添加類別名稱“

. 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」才有水平定義清單效果。其實現主要方式：1、將dt設定了一個左浮動，並且設定了一個寬度為160px 2、將dd設定一個margin-left的值為180px，達到水平的效果3、當標題寬度超過160px時，將會顯示三個省略號

其用法如下：

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

當你縮小你的瀏覽器畫面時，水平定義清單將回復到原始的狀態。

推薦學習：《

bootstrap使用教程》

以上是bootstrap支援幾種列表樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

React的引導：優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括：1)快速開發，2)一致性和可維護性，3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫，可以在React項目中高效使用Bootstrap的組件和样式。

Bootstrap：網絡框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter開發的框架，幫助快速搭建響應式、移動優先的網站和應用。 1.易用性和豐富組件庫使開發更快。 2.龐大社區提供支持和解決方案。 3.通過CDN引入並使用類名控製樣式，如創建響應式網格。 4.可自定義樣式和擴展組件。 5.優點包括快速開發和響應式設計，缺點是樣式一致性和學習曲線。

打破bootstrap：是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree，開放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem，流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。

See all articles