bootstrap列表
列表分类
-
无序列表
2.有序列表
3.去点列表 .list-unstyled
4.内联列表 .list_inline
5.dl列表
6.水平列表dl.dl-horizontal
使用列表的具体操作
学习如何使用无序列表、有序列表、去点列表、内联列表、dl列表以及水平列表，具体的操作如下：
1）新建一个web项目ch04
2）将先前做的ch03的css文件模版导入到ch04
3）复制ch03中demo01.html的头文件
4）在ch04中新建一个demo01.html，接着再打开demo01.html，将移动设备优和css文件先导入到头文件（粘贴过来就行了）
<meta name="viewport"
//移动设备优
content="width=device-width,initial-scale=1, user-scalable=no”>
<title>demo01></title>
//css文件
<link rel="stylesheet" href="css/bootstrap.min.css"/>
5）首先定义一个container容器，然后使用无序列表（ul列表）标签。
<body>
<div class="container">
<ul>
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ul>
</div>
</body>
6）bootstrap默认对我们的这个无序列表（ul列表）标签做了格式化，我们可以打开bootstrap的源文件bootstrap.css来进行查看，它只做了margin-top的命令和margin-bottom的命令，就没有再做其它的命令，只是简单的进行了处理。所以，我们只需要知道它的原理，就是bootstrap对我们ul标签默认做的样式的格式化。
7）运行结果，看上去只是比我们平常的列表标签更细腻话更柔和了一点。
8）接着，我们再来学习使用有序列表（ol列表）标签。
<hr/>
<ol>
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ol>
<hr/>
9）运行结果
10）接着，我们再来学习去点列表 .list-unstyled
<hr/>
<ol class="list-unstyled">
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ol>
<hr/>
11）运行结果，它前面的数字或者小数点就都没有了。
77
12）接着，我们再来学习内联列表 .list_inline
<hr/>
<ul>
<li><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">英国</a></li>
</ul>
13）运行效果，这就是bootstrap对它做的默认的一个样式。
14）我们现在可以来加一个样式
<ul class="list-inline">
<li><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">英国</a></li>
</ul>
15）此时的运行结果（这样，我们的列表就变成水平排列的了，这就使得我们做一些菜单的时候很方便。）
16）接着，我们再来学习dl列表
<hr/>
<dl>
<dt>java1</dt>
<dd>java1是一门面向对象的编程语言，我用了差不多十年，非常喜欢它</dd>
<dt>java2</dt>
<dd>java2是一门面向对象的编程语言，我用了差不多十年，非常喜欢它</dd>
<dt>java3</dt>
<dd>java3是一门面向对象的编程语言，我用了差不多十年，非常喜欢它</dd>
</dl>
17）运行结果（需要注意的是dd默认是会缩进，但在bootstrap里面把这个缩进给取消掉了。）这就是默认dd和dt的运行效果。
18）最后，我们来学习水平列表标签dl.dl-horizontal
<hr/>
<dl class="dl-horizontal">
<dt>java1</dt>
<dd>java1是一门面向对象的编程语言，我用了差不多十年，非常喜欢它</dd>
<dt>java2</dt>
<dd>java2是一门面向对象的编程语言，我用了差不多十年，非常喜欢它</dd>
<dt>java3</dt>
<dd>java3是一门面向对象的编程语言，我用了差不多十年，非常喜欢它</dd>
</dl>
19）运行效果，首先它是水平排列的，然后前面是标题后面是一段解释也就是一个详细的描述。
2811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
