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样式--- ...
随机推荐
- python三元操作符
#比较大小更简单了 x,y=3987,24361 small=(x if x<y else y) print(small) #方法一:比较三个数的大小找出较大的一个 x,y,z=8,1,13 ...
- js字符串操作总结
字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...
- JQuery开发报错集锦
报错一:JQuery $.each遍历JSON字符串报Uncaught TypeError:Cannot use 'in' operator to search for "70". ...
- spring boot / cloud (四) 自定义线程池以及异步处理@Async
spring boot / cloud (四) 自定义线程池以及异步处理@Async 前言 什么是线程池? 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线 ...
- C# Post提交数据
/// <summary> /// Post提交数据 /// </summary> /// <param name="postUrl">URL& ...
- python 云打码 hhtp接口
import http.client, mimetypes, urllib, json, time, requests ######################################## ...
- Java IO(五)==>>重点
打印流:PrintStream与PrintWriter PrintStream 该类的定义如下: public class PrintStream extends FilterOutputStream ...
- bzoj 1272: [BeiJingWc2008]Gate Of Babylon
Description Solution 如果没有限制,答案就是 \(\sum_{i=0}^{m}C(n+i-1,i)\) 表示枚举每一次取的个数,且不超过 \(m\),方案数为可重组合 发现这个东西 ...
- 【AHOI2005】病毒检测
题目描述 科学家们在Samuel星球上的探险仍在继续.非常幸运的,在Samuel星球的南极附近,探险机器人发现了一个巨大的冰湖!机器人在这个冰湖中搜集到了许多RNA片段运回了实验基地. 科学家们经过几 ...
- Tenka1 Programmer Contest D - IntegerotS
Problem Statement Seisu-ya, a store specializing in non-negative integers, sells N non-negative inte ...