文字

<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. STORM在线业务实践-集群空闲CPU飙高问题排查（转）

    最近将公司的在线业务迁移到Storm集群上,上线后遇到低峰期CPU耗费严重的情况.在解决问题的过程中深入了解了storm的内部实现原理,并且解决了一个storm0.9-0.10版本一直存在的严重bug ...

  2. Java：几个正则式应用（检查汉字、日期、EMAIL、手机号码的合法性，替换字符串等）

    1. 检查输入是否为合法汉字 /** * 判断输入字符是否为有效汉字 * @param str 字符 * @return 是否合法汉字 */ public static boolean isValid ...

  3. git使用(二)----创建版本库

    创建版本库(操作都是在linux环境下) 什么是版本库呢?版本库又名仓库,英文名repository,其实就是一个目录,可以进行增删查改 创建一个目录,这里在根目录下创建一个git_home目录mkd ...

  4. RhinoMock中无参数方法和无返回值方法的使用

    无返回值方法,RhinoMock的例子是这么做的: demo.VoidThreeArgs(, "", 0f); LastCall.On(demo).Callback<int, ...

  5. 使用TortoiseGit操作分支的创建与合并功能集合

    使用TortoiseGit操作分支的创建与合并 本文在介绍了软件安装和设置后, 写了TortoiseGit 常用的一些功能, 包括: 创建新库 添加文件及文件夹 创建分支 看分支情况及修改log 比较 ...

  6. echarts实现动态传入数据刷新【可执行】

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</t ...

  7. mysql从文件中导入数据

    linux: load data infile '/tmp/dnslog.txt' into table dnslog_cnnic_cn fields terminated by ' ' lines ...

  8. Python 下载excel

    上面源码 View:result_list是一个list为数据,当为list时,用enumerate可以获取到list的值和值所在序号 xlsx = openpyxl.Workbook() table ...

  9. 第一章： 当前主流的小型嵌入式 GUI

    以下内容转载自安富莱电子论坛:http://forum.armfly.com/forum.php?mod=viewthread&tid=24507&highlight=%B5%B1%C ...

  10. c++派生类的访问控制权限

    派生类必须通过使用类派生列表, 明确指出它是从哪个(哪些)基类继承而来的.类派生列表的形式是:首先是一个冒号,后面紧跟以逗号分隔的基类列表(可以多继承,但一般不使用多继承),其中每个基类前面可以有以下 ...