无序列表

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

  1. <ul>
  2. <li>...</li>
  3. </ul>

有序列表

顺序至关重要的一组元素。

  1. <ol>
  2. <li>...</li>
  3. </ol>

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

  1. <ul class="list-unstyled">
  2. <li>...</li>
  3. </ul>

内联列表

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

  1. <ul class="list-inline">
  2. <li>...</li>
  3. </ul>

描述

带有描述的短语列表。

  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

  1. <dl class="dl-horizontal">
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </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. Oracle中如何导出存储过程、函数、包和触发器的定义语句?如何导出表的结构?如何导出索引的创建语句?

    Oracle中如何导出存储过程.函数.包和触发器的定义语句?如何导出表的结构?如何导出索引的创建语句? QQ群里有人问:如何导出一个用户下的存储过程?   麦苗答:方法有多种,可以使用DBMS_MET ...

  2. C#之FTP上传下载(一)

    搭建FTP服务器 最近要实现这样一个功能:FTP服务器的上传和下载,搜集了一些资料,在c播客上看到昵称为"傻丫头和科技"的作者写的一篇文章写得挺好,有的地方个人觉得不是很详细,自己 ...

  3. [BZOJ]4405: [wc2016]挑战NPC(带花树)

    带花树模板 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...

  4. [LSGDOJ 1299]搭配买卖

    题目描述 joe觉得云朵很美,决定去山上的商店买一些云朵.商店里有n多云,云朵被编号为1,2,……,n,并且每朵云都有一个价值.但商店老板跟他说,一些云朵要搭配来买才好,所以买一朵云则与这多云有搭配的 ...

  5. hdu 5112 (2014北京 水)

    题意:有个人在跑步,一直每个时间他所在的位置,求最大速度 #include <iostream> #include <cstring> #include <cstdio& ...

  6. springmvc上传文件方法及注意事项

    本文基于注解的配置,敬请留意  基于注解整合 一.springmvc为我们提供两种上传方式配置: org.springframework.web.multipart.commons.CommonsMu ...

  7. linux办公软件的使用和病毒防范

    今天看了linux办公软件的使用和病毒防范,特做此记录,将不熟悉的内容总结一下: openoffice 和liberoffice是可以跨平台的两款办公软件.odt是openoffice的扩展名.lib ...

  8. C语言中如何调用另一个源文件里的函数

    在开发大型项目时,我们常常需要将一份源码分成多个源文件来进行编写,这样可以方便后期的维护.下面就介绍如何从一个源文件里调用另一个源文件的函数. 在源文件A1.c中调用A2.c 中的函数有两种方法: 1 ...

  9. Delphi 7连接MySql 5.5.15(转)

    网上有很多关于Delphi连接MySql数据库的文章,在这里,我只记录下自己测试过的方法,以备所需.系统环境:Windows XP SP3软件环境:Delphi 7 .mysql-installer- ...

  10. Linux/Centos笔记目录

        Linux介绍 Linux入门--个人感想 Google怎么用linux 初入Linux Windows XP硬盘安装Ubuntu 12.04双系统图文详解 实例讲解虚拟机3种网络模式(桥接. ...