Bootstrap3 排版-列表
无序列表
排列顺序无关紧要的一列元素。
<ul>
<li>...</li>
</ul>
有序列表
顺序至关重要的一组元素。
<ol>
<li>...</li>
</ol>
无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表
通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。
<ul class="list-inline">
<li>...</li>
</ul>
描述
带有描述的短语列表。
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
.dl-horizontal 可以让
<dl>内的短语及其描述排在一行。开始是像<dl>的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
自动截断
通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。
—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx
Bootstrap3 排版-列表的更多相关文章
- Bootstrap3 排版-页面主体
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428.这些属性直接赋予 元素和所有段落元素.另外,<p> (段落)元素还被设置了等于 ...
- Bootstrap3 排版-引用
在你的文档中引用其他来源的内容. 默认样式的引用 将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式.对于直接引用,我们建议用 <p> 标签. Lor ...
- Bootstrap3 排版-地址
让联系信息以最接近日常使用的格式呈现.在每行结尾添加 可以保留需要的样式. Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 9410 ...
- Bootstrap3 排版-缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式.缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移 ...
- Bootstrap3 排版-改变大小写
通过这几个类可以改变文本的大小写. <p class="text-lowercase">Lowercased text.</p> <p class=& ...
- Bootstrap3 排版-对齐
通过文本对齐类,可以简单方便的将文字重新对齐. Left aligned text. Center aligned text. Right aligned text. Justified text. ...
- Bootstrap3 排版-内联文本元素
标记文本 突出显示的文本由于其相关性在另一个上下文中,使用<mark>标记. You can use the mark tag to highlight text. You can use ...
- Bootstrap3 排版-标题
HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. h1. Boots ...
- 5_bootstrap之响应式布局|列表|按钮
5.响应式工具 为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供响应式工具. 可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素 帮助手册位置:全局CSS样式--- ...
随机推荐
- 【Java入门提高篇】Day15 Java泛型再探——泛型通配符及上下边界
上篇文章中介绍了泛型是什么,为什么要使用泛型以及如何使用泛型,相信大家对泛型有了一个基本的了解,本篇将继续讲解泛型的使用,让你对泛型有一个更好的掌握和更深入的认识. 上篇中介绍完泛型之后,是不是觉得泛 ...
- eclipse下如何使用Hibernate反转工程生与数据库对应的实体类和映射文件(以MySQL为例)
首先需要为eclipse添加对Hibernate的支持(也就是下载的Hibernate中的jar包),下载方法另查,这里不多做阐述. 想要使用反转工程,首先要下载Hibernate反转工程的插件Jbo ...
- nodejs+express+mysql 增删改查(二)
1.最早一篇关于express框架简单的增删改查文章,http://www.cnblogs.com/zhengyeye/p/nodejs.html#3947308:意外走红博客园,无奈自己之前一直没有 ...
- 浅析java的深拷贝与浅拷贝
(转自:http://www.cnblogs.com/chenssy/p/3308489.html) 首先来看看浅拷贝和深拷贝的定义: 浅拷贝:使用一个已知实例对新创建实例的成员变量逐个赋值,这个方式 ...
- win7下ubuntu14.4双系统安装
参考https://jingyan.baidu.com/article/f71d60379824041ab641d19d.html
- [LeetCode] Shortest Unsorted Continuous Subarray 最短无序连续子数组
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...
- 计蒜客NOIP模拟赛(2) D1T1邻家男孩
凡是一个具有领导力的孩子.现实生活中他特别喜欢玩一个叫做 UNO 的纸牌游戏,他也总是带着其他小朋友一起玩,然后战胜他们.慢慢地,他厌倦了胜利,于是准备发明一种新的双人纸牌游戏. 初始时,每个人手中都 ...
- ●BZOJ 2442 [Usaco2011 Open]修剪草坪
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2442 题解: 单调队列优化DP 把问题转化为:从序列里选出一些相邻之间间隔不超过K的数,使得 ...
- HDU 5723 Abandoned country 最小生成树+搜索
Abandoned country Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- UVA12186
给出一个树状关系图,公司里只有一个老板编号为0,其他人员从1开始编号.除了老板,每个人都有一个直接上司,没有下属的员工成为工人. 工人们想写一份加工资的请愿书,只有当不少于员工的所有下属的T%人递交请 ...