Bootstrap 列表

2018-03-03 16:12 更新

在本章节中,我们将学习如何使用Bootstrap为不同类型的列表添加样式。

我们可以定义三种不同类型的列表:

  • 无序列表 - 其顺序无关紧要的项目列表。无序列表中的列表项目用着重号标记。
  • 有序列表 - 其顺序重要的项目列表。有序列表中的列表项目用数字标记。
  • 定义列表 - 具有相关描述的术语列表。

定义列表

带有其关联说明的术语列表。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.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>中并排排列术语和说明。像默认的<dl> 那样开始堆叠,但是是在导航条扩展时。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.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="//www.w3cschool.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>元素。

例子

.list-unstyled类仅从作为<ul>或<ol>元素的直接子项的列表项中删除默认列表样式和左侧填充。

<!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="//www.w3cschool.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列表

删除列表项(仅限直系子级)上的默认列表样式和左边距。这只适用于直接子列表项,意味着你还需要为所有的嵌套列表添加类。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.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="//www.w3cschool.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>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号