文字

<small></small>：呈现小号字体效果。

<big></big>:程序大号字体效果

<abbr></abbr>: 标签指示简称或缩写。使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。

<address> </address>:在网页上显示联系信息。由于 <address> 默认为 display:block;，您需要使用标签来为封闭的地址文本添加换行。

类 描述 实例
.lead 使段落突出显示 尝试一下
.small 设定小文本 (设置为父文本的 85% 大小) 尝试一下
.text-left 设定文本左对齐 尝试一下
.text-center 设定文本居中对齐 尝试一下
.text-right 设定文本右对齐 尝试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下
.text-nowrap 段落中超出屏幕部分不换行 尝试一下
.text-lowercase 设定文本小写 尝试一下
.text-uppercase 设定文本大写 尝试一下
.text-capitalize 设定单词首字母大写 尝试一下
.initialism 显示在 <abbr> 元素中的文本以小号字体展示 尝试一下
.blockquote-reverse 设定引用右对齐 尝试一下

列表

Bootstrap 支持有序列表、无序列表和定义列表。

  • 有序列表：有序列表是指以数字或其他有序字符开头的列表。
  • 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
  • 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
类 描述 实例
     
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) 尝试一下
.list-inline 将所有列表项放置同一行 尝试一下
.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例 尝试一下
.pre-scrollable 使 <pre> 元素可滚动 scrollable 尝试一下

下面的实例演示了这些类型的列表：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 列表</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h4>有序列表</h4>

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

</ol>

<h4>无序列表</h4>

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

</ul>

<h4>未定义样式列表</h4>

<ul class="list-unstyled">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

</ul>

<h4>内联列表</h4>

<ul class="list-inline">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

</ul>

<h4>定义列表</h4>

<dl>

  <dt>Description 1</dt>

  <dd>Item 1</dd>

  <dt>Description 2</dt>

  <dd>Item 2</dd>

</dl>

<h4>水平的定义列表</h4>

<dl class="dl-horizontal">

  <dt>Description 1</dt>

  <dd>Item 1</dd>

  <dt>Description 2</dt>

  <dd>Item 2</dd>

</dl>

</body>

</html>

bootstrap -- css -- 文字、列表的更多相关文章

  1. Bootstrap CSS概览代码文字标注篇

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Bootstrap CSS 描述

    <!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> < ...

  3. 一个带标号的CSS文章列表写法

    <title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...

  4. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  5. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  6. jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  7. 8.Bootstrap CSS编码规范

    Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...

  8. 2.Bootstrap CSS

    Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...

  9. PHP 结合 Bootstrap 实现学生列表以及添加学生功能实现（继上篇登录及注册功能之后）

    本人是一位学生,正在学习当中,可能BUG众多,请见谅并指正,谢谢!!! 学生列表实现 HTML: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. Google大脑科学家贾杨清（Caffe缔造者）-微信讲座

    Google大脑科学家贾杨清(Caffe缔造者)-微信讲座 机器学习Caffe 贾扬清 caffe   一.讲座正文: 大家好!我是贾扬清178,目前在Google Brain69,今天有幸受雷鸣师兄 ...

  2. 64位win8.1系统安装intelhaxm

    加快安卓模拟器的启动速度,需要装intelhaxm,以前win8时直接双击网上下载的exe文件就安装得了,但是win8.1的时候双击了总提示说是vt-x没有启用的,但是我看任务管理器→性能标签页那里的 ...

  3. JAVA calling convention

    http://stackoverflow.com/questions/28126082/where-does-the-jit-compiled-code-reside https://wiki.ope ...

  4. JVM总结篇

    Sun HotSpot VM,是JDK和Open JDK中自带的虚拟机,也是目前使用范围最广的Java虚拟机. JVM内存分布 程序计数器:是一块较小的内存空间,可以看作是当前线程所执行的字节码的行号 ...

  5. JVM调优总结 + jstat 分析

    jstat -gccause pid 1 每格1毫秒输出结果jstat -gccause pid 2000 每格2秒输出结果不断的在屏幕打印出结果   S0     S1     E      O   ...

  6. sudo和man的tab自动补全

    要加入sudo和man的tab自动补全功能,只需在~/.bashrc中加入: #Enabling tab-completioncomplete -cf sudocomplete -cf man

  7. python traceback捕获并打印异常

    异常处理是日常操作了,但是有时候不能只能打印我们处理的结果,还需要将我们的异常打印出来,这样更直观的显示错误 下面来介绍traceback模块来进行处理 try: 1/0 except Excepti ...

  8. iOS-打包成ipa的4种方法

    打包ipa的前提 1.证书的申请和设置和上面文章的一样 从第一步到第四步都是一样的http://www.cnblogs.com/sunfuyou/p/5900592.html2.还有第六步的 1-3都 ...

  9. 纯css3实现的幽灵按钮导航

    之前为大家介绍了好几款导航菜单,今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标.效果图如下: 在线预览   源码下载 实现代码: htm ...

  10. 【技术】正則表達式—匹配电话号码，网址链接，Email地址

    #pragma mark - 正则匹配电话号码.网址链接.Email地址 + (NSMutableArray *)addHttpArr:(NSString *)text { //匹配网址链接 NSSt ...