无序列表

排列顺序无关紧要的一列元素。

<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 排版-列表的更多相关文章

  1. Bootstrap3 排版-页面主体

    Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428.这些属性直接赋予 元素和所有段落元素.另外,<p> (段落)元素还被设置了等于 ...

  2. Bootstrap3 排版-引用

    在你的文档中引用其他来源的内容. 默认样式的引用 将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式.对于直接引用,我们建议用 <p> 标签. Lor ...

  3. Bootstrap3 排版-地址

    让联系信息以最接近日常使用的格式呈现.在每行结尾添加 可以保留需要的样式. Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 9410 ...

  4. Bootstrap3 排版-缩略语

    当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式.缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移 ...

  5. Bootstrap3 排版-改变大小写

    通过这几个类可以改变文本的大小写. <p class="text-lowercase">Lowercased text.</p> <p class=& ...

  6. Bootstrap3 排版-对齐

    通过文本对齐类,可以简单方便的将文字重新对齐. Left aligned text. Center aligned text. Right aligned text. Justified text. ...

  7. Bootstrap3 排版-内联文本元素

    标记文本 突出显示的文本由于其相关性在另一个上下文中,使用<mark>标记. You can use the mark tag to highlight text. You can use ...

  8. Bootstrap3 排版-标题

    HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. h1. Boots ...

  9. 5_bootstrap之响应式布局|列表|按钮

    5.响应式工具 为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供响应式工具. 可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素 帮助手册位置:全局CSS样式--- ...

随机推荐

  1. 使用requirejs来管理angularJS依赖示例

    有关requirejs是什么在这里不做解释,只用纯代码实战让你感受requirejs依赖管理的强大. 一.首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用. / ...

  2. vue-cli 体验

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  3. java中的强大的枚举(基本没人用)

    枚举的概念和多例设计模式相似,多例设计模式详见:多例设计模式代码模型 范例:简单枚举类 通过emu关键字定义一个枚举 package com.java.demo; enum Color{ RED,BL ...

  4. [LeetCode] Redundant Connection II 冗余的连接之二

    In this problem, a rooted tree is a directed graph such that, there is exactly one node (the root) f ...

  5. 【Swift】swift中懒加载的写法

    swift中懒加载的写法,直接上例子 (懒加载一个遮罩视图) lazy var dummyView: UIView = { let v = UIView() v.backgroundColor = U ...

  6. .NET CORE 2.0之 httpcontext

    HttpContext  在之前的.NET framework 是一个非常常用且强大的类,在.NET CORE2.0中要像以前用是不太方便的了, 要是用sesson 首先需要在startup 的Con ...

  7. java开发----自定义对象,重写equals方法

    javaweb开发中,用到了好多自定义对象,这时候如果不重写equals方法,很多时候都会返回false, 因此我们必须习惯重写这个方法. 重点: 1.equals比较俩对象时比较的是对象引用是否指向 ...

  8. [测试题]神在夏至祭降下了神谕(oracle)

    Description 我们村子在过去的 400 年中, 断绝与下界的接触, 过着自给自足的生活.夏至祭是一场迎接祖灵于夏季归来, 同时祈求丰收的庆典.村里的男人会在广场上演出夏之军和冬之军的战争. ...

  9. [USACO09FEB]庙会班车Fair Shuttle

    题目描述 逛逛集市,兑兑奖品,看看节目对农夫约翰来说不算什么,可是他的奶牛们非常缺乏锻炼——如果要逛完一整天的集市,他们一定会筋疲力尽的.所以为了让奶牛们也能愉快地逛集市,约翰准备让奶牛们在集市上以车 ...

  10. bzoj 1925: [Sdoi2010]地精部落

    Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...