                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

上面只有展现了三种想看看另外三种？？

内联列表

☑ 描述列表

☑ 水平描述列表

墨涤

2015-03-24

源自：玩转Bootstrap（基础） 2-9

关注问题我要回答

1324

操作

收起

2 回答

vaneX 回答被采纳 +3 积分
2016-10-11

全部都在哦：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Boostrap的HTML标准模板</title>
  <!-- Boostrap -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!-- 以下两个插件是对IE8及以下版本浏览器支持html5元素和媒体查询 -->
  <!-- [if lt IE 9] -->
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <!-- [endif] -->
</head>
<body>

  <div>
    <h1>1. 普通列表(无序列表)</h1>
    <ul>
      <li>普通列表(无序列表)_1</li>
      <li>普通列表(无序列表)_2</li>
      <li>普通列表(无序列表)_3</li>
    </ul>
  </div>

  <div>
  <h1>2. 有序列表</h1>
    <ol>
      <li>有序列表_1</li>
      <li>有序列表_2</li>
      <li>有序列表_3</li>
    </ol>
  </div>

  <div>
    <h1>3. 去点列表</h1>
    <ul style="list-style: none;">
      <li>去点列表_1</li>
      <li>去点列表_2</li>
      <li>去点列表_3</li>
    </ul>
  </div>

  <div>
    <h1>4. 内联列表</h1>
    <ul>
      <li>内联列表_1</li>
      <li>内联列表_2</li>
      <li>内联列表_3</li>
    </ul>
  </div>

  <div>
    <h1>5. 描述列表</h1>
    <dl>
      <dt>描述列表标题</dt>
      <dd>描述列表_1</dd>
      <dd>描述列表_2</dd>
      <dd>描述列表_3</dd>
    </dl>
  </div>

  <div>
    <h1>6. 水平描述列表</h1>
    <dl>
      <dt>水平描述列表标题_1</dt>
      <dd>水平描述列表_1</dd>
      <dt>水平描述列表标题_2</dt>
      <dd>水平描述列表_2</dd>
      <dt>水平描述列表标题_3</dt>
      <dd>水平描述列表_3</dd>
    </dl>
  </div>

  <!-- 若果要使用Boostrap的js插件，必须先调入jQuery -->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

1 回复有任何疑惑可以回复我~

收起回答

墨涤提问者

非常感谢！

2016-10-11 回复有任何疑惑可以回复我~

smile_again
2015-04-13

<!--内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。-->
<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>
<!--定义列表，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。-->
<dl>
    <dt>定义列表标题</dt>
    <dd>定义列表信息1</dd>
    <dd>定义列表信息2</dd>
</dl>
<!--水平定义列表，就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。（根据屏幕宽度自动换行）-->
<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
    <dt>慕课网</dt>
    <dd>一个专业的，真心实意在做培训的网站</dd>
    <dt>我来测试一个标题，我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>

1 回复有任何疑惑可以回复我~

收起回答