文字

<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. nginx https ssl 设置受信任证书[转然哥]

    nginx https ssl 设置受信任证书[原创] 1. 安装nginx 支持ssl模块 http://nginx.org/en/docs/configure.html yum -y instal ...

  2. redis 基本概览

    1 redis 支持5种数据类型.redis 的值是字节数组,所以他不关心具体存储的是什么. redis 的键可以是 数值 strings lists sets hashes Redis 支持诸如列表 ...

  3. unity, multi pass shader中的surface pass

    今天尝试写一个multi pass shader,但其中有一个Pass是surface pass,总是莫名奇妙地报错.后来看到下面帖子: http://forum.unity3d.com/thread ...

  4. 怎么修改Elasticsearch的对外ip 默认是本地IP 127.0.0.1

    //修改C:\Program Files\elasticsearch-2.1.1\config\elasticsearch.yml: network.bind_host: 172.16.1.86 pa ...

  5. java Webservice(一)HttpClient使用(一)

    1.拳头之Get/Post拳头是最基本的一重武器,也是最重要的,好比练武之人必须先扎稳马步. java 代码 HttpClient httpclient=new HttpClient();//创建一个 ...

  6. Class.getResourceAsStream和ClassLoader.getResourceAsStream方法

    项目中,有时候要读取当前classpath下的一些配置文件,下面介绍下Class.getResourceAsStream和ClassLoader.getResourceAsStream两种方法以及两者 ...

  7. c# 实现查找mysql安装路径

    1.c#能够调用msyql的导入导出命令,可是须要先推断客户机是否安装了mysql.及其安装mysql的路径问题. 2.查询mysql安装路径的函数 private string GetMysqlPa ...

  8. C++ 11 nullptr关键字

    熟悉C++的童鞋都知道,为了避免“野指针”(即指针在首次使用之前没有进行初始化)的出现,我们声明一个指针后最好马上对其进行初始化操作.如果暂时不明确该指针指向哪个变量,则需要赋予NULL值.除了NUL ...

  9. ny8 一种排序 sort

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...

  10. 输入法环境变量XMODIFIERS/GTK_IM_MODULE

    我们配置输入法时,都是习惯性的在输入法启动前导出环境变量: export XMODIFIERS=@im=SCIM export GTK_IM_MODULE=SCIM 他们有何用意呢?? 我们常用的输入 ...