程序博客网 > 知乎live过期收听购买

Bootstrap<列表>

来源：互联网 发布：知乎live过期收听购买 编辑：程序博客网 时间：2024/06/10 17:09

在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表

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

有序列表

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

定义列表

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


Bootstrap根据平时的使用情形提供了六种形式的列表：

   ☑  普通列表

   ☑  有序列表

   ☑  去点列表

   ☑  内联列表

   ☑  描述列表

   ☑  水平描述列表


1.无序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用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上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。

列表嵌套

在Bootstrap中列表也是可以嵌套的，如右侧编辑器中的代码就是有序列表。

<ol>
    <li>有序列表</li>
    <li>
    有序列表
        <ol>
        <li>有序列表(2)</li>
        <li>有序列表(2)</li>
        </ol>
    </li>
    <li>有序列表</li>
</ol>

<!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>
<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>

</body>
</html>



列表--去点列表

在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

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

从示例中可以看出，除了项目编号之外，还将列表默认的左边内距也清０了。

<!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>
    项目列表
        <ul>
        <li >带有项目符号</li>
        <li>带有项目符号</li>
        </ul>
    </li>
    <li>
    项目列表
        <ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
        </ul>
    </li>
    <li>项目列表</li>
</ul>
<!--有序列表去序号-->
<ol>
    <li>
    项目列表
        <ol>
        <li>带有项目编号</li>
        <li>带有项目编号</li>
        </ol>
    </li>
    <li>
    项目列表
        <ol class="list-unstyled">
        <li>不带项目编号</li>
        <li>不带项目编号</li>
        </ol>
    </li>
    <li>项目列表</li>
</ol>
</body>
</html>


列表--内联列表

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;}



<!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 class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>
<!--下面是代码任务部分-->
<ul class="list-inline">
    <li>城市:</li><br>
    <li>北京</li>
    <li>上海</li>
    <li>南京</li>
    <li>厦门</li>
</ul>
</body>
</html>


列表--定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

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>慕课网</dt>    <dd>一个真心在做教育的网站</dd></dl>
<!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><dl>    <dt>W3cplus</dt>    <dd>一个致力于推广国内前端行业的技术博客</dd>    <dt>慕课网</dt>    <dd>一个真心在做教育的网站</dd></dl><!--下面是代码任务部分--><dl>    <dt>北京</dt>    <dd>北京是中国的首都，是政治文化集中地</dd>    <dt>上海</dt>    <dd>上海号称东方的巴黎</dd></dl></body></html>

列表--水平定义列表
水平定义列表就像内联列表一样，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”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号
其用法如下：
<dl class="dl-horizontal">    <dt>W3cplus</dt>    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>    <dt>慕课网</dt>    <dd>一个专业的，真心实意在做培训的网站</dd>    <dt>我来测试一个标题，我来测试一个标题</dt>    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd></dl>

宽屏下的效果（屏幕大于768px）：
当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态。
注：结果可以在最右侧结果窗口中看到（鼠标滑过结果窗口时会出现“全屏”按钮）


                                             
        0        0           
	
				
		









 知乎live过期收听购买
    		知乎live过期收听购买



原创粉丝点击



		

热门IT博客


unity3d ui素材unity3d ui素材




java final是什么意思java final是什么意思




scratch趣味编程 pdf




水果产地调查表软件




ppt模板制作软件




世界级程序员




好玩的网络射击手游




js length 中文




结构优化公司烦人




可牛闪图软件下载




淘宝资质2000什么意思




淘宝怎么领优酷会员




qq影音mac版




cms管理系统 开源




网络直播发展前景




excel输入数据自动计算




ug80编程教程入门




指南针内网通映射软件




淘宝赤练蛇




个人炫酷博客源码



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    聚合物电池厂家
    电动车电池修复方法
    手机电池续航排行榜
    电池都有什么型号
    充电七号电池
    电池型号怎么看
    电池的种类有哪些
    电池生产厂家
    18650充电电池
    锂电池是什么
    锂离子充电电池
    充电电池和普通电池的区别
    锂电电池生产厂家
    汽车电池批发
    高能聚合物电池
    哪种锂电池好
    旧电池的回收
    铅酸电池价格
    电动轿车电池
    锂电池怎么样
    什么是锂电池
    蓄电池锂电池
    6s电池多少钱一个
    东莞锂电池设备
    电池耐用的智能手机排行
    锂电池概念股
    电动车电池价格48v
    18650电池型号
    太阳能电池回收
    手机电池电量显示
    锂电池原材料
    聚合物锂电池厂家
    捕鱼机锂电池价格
    比7号电池小的是几号
    电池回收电话
    电动车电池的价格
    锂电池的生产厂家
    汽车电池换一个多少钱
    电池型号对照表
    锂电池板块股票一览
    电池管理系统


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里