目录
1、标题
2、页面主体
3、强调
    a、小号文本
    b、着重
    c、斜体
    d、对齐class
    e、强调class
4、缩略语
5、地址
6、列表
    a、无序列表
    b、有序列表
    c、无样式列表
    d、内联列表
    e、描述
    f、水平排列的描述

1、标题
HTML中的所有标题标签，从<h1>到<h6>均可用。另外，还提供了.h1到.h6 class，为的是给inline属性的文本赋予标题的样式。例如：

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

在标题内还可以包含<small>标签或.small元素，用来标记副标题。例如：

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

2、页面主体
Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外，<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)，例如：

<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

通过添加.lead可以让段落突出显示，例如：

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

3、强调
a、小号文本
对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。

你还可以为行内元素赋予.small以代替任何<small>标签，例如：

<small>This line of text is meant to be treated as fine print.</small>

b、着重
通过增加font-weight强调一段文本，例如：

<strong>rendered as bold text</strong>

c、斜体
用斜体强调一段文本，例如：

<em>rendered as italicized text</em>

注：可选元素
还可以使用HTML5中定义的<b>和<i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示，<i>大部分用于发言、技术短语等情况。

d、对齐class
通过文本对齐class，可以简单方便的将文字重新对齐，例如：

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

e、强调class
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。

<p class="text-muted">Etiam porta sem malesuada magna mollis euismod....</p>

<p class="text-primary">Etiam porta sem malesuada magna mollis euismod....</p>

<p class="text-success">Etiam porta sem malesuada magna mollis euismod....</p>

<p class="text-info">Etiam porta sem malesuada magna mollis euismod....</p>

<p class="text-warning">Etiam porta sem malesuada magna mollis euismod....</p>

<p class="text-danger">Etiam porta sem malesuada magna mollis euismod....</p>

演示效果：

4、缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性，例如：

<abbr title="attribute">attr</abbr>

为缩略语添加.initialism可以将其font-size设置的更小些，例如：

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

5、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式，例如：

<address>

    <strong>Twitter, Inc.</strong><br>

    795 Folsom Ave, Suite 600<br>

    San Francisco, CA 94107<br>

    <abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<address>

    <strong>Full Name</strong><br>

    <a href="mailto:#">first.last@example.com</a>

</address>

演示效果如下：

6、列表
a、无序列表
顺序无关紧要的一列元素，例如：

        <ul>

            <li>Lorem ipsum dolor sit amet</li>

            <li>Nulla volutpat aliquam velit

              <ul>

                <li>Phasellus iaculis neque</li>

                <li>Purus sodales ultricies</li>

              </ul>

            </li>

            <li>Faucibus porta lacus fringilla vel</li>

            <li>Eget porttitor lorem</li>

        </ul>

b、有序列表
顺序至关重要的一组元素，例如：

        <ol>

            <li>Lorem ipsum dolor sit amet</li>

            <li>Consectetur adipiscing elit</li>

            <li>Integer molestie lorem at massa</li>

            <li>Facilisis in pretium nisl aliquet</li>

            <li>Nulla volutpat aliquam velit</li>

        </ol>

c、无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式，例如：

<ul class="list-unstyled">

<li>Integer molestie lorem at massa</li>

<li>Facilisis in pretium nisl aliquet</li>

<li>Nulla volutpat aliquam velit

  <ul>

    <li>Vestibulum laoreet porttitor sem</li>

    <li>Ac tristique libero volutpat at</li>

  </ul>

</li>

<li>Faucibus porta lacus fringilla vel</li>

<li>Eget porttitor lorem</li>

</ul>

d、内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列，例如：

<ul class="list-inline">

    <li>Lorem ipsum</li>

    <li>Phasellus iaculis</li>

    <li>Nulla volutpat</li>

</ul>

e、描述
带有描述的短语列表，例如：

<dl>

    <dt>Description lists</dt>

    <dd>A description list is perfect for defining terms.</dd>

    <dt>Euismod</dt>

    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>

    <dd>Donec id elit non mi porta gravida at eget metus.</dd>

    <dt>Malesuada porta</dt>

    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

</dl>

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

<dl class="dl-horizontal">

    <dt>Description lists</dt>

    <dd>A description list is perfect for defining terms.</dd>

    <dt>Euismod</dt>

    <dd>Vestibulum id ligula porta fel</dd>

    <dd>Donec id elit non mi porta gravida at eget metus.</dd>

    <dt>Malesuada porta</dt>

    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

    <dt>Felis euismod semper eget lacinia</dt>

    <dd>Fusce dapibus, tellus ac cursus commodjusto sit amet risus.</dd>

</dl>

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】。
如果，您希望更容易地发现我的新博客，不妨点击一下左下角的【关注我】。
如果，您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是【Ruthless】。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

Bootstrap 斜体、文本对齐、缩略图、地址、列表等的更多相关文章

  1. Bootstrap基础--文本对齐风格

    在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑  右对齐,取值r ...

  2. Bootstrap学习笔记之文本对齐风格

    文本对齐风格 在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑   ...

  3. bootstrap 文本对齐风格

    Bootstrap通过定义四个类名来控制文本的对齐风格: ☑   .text-left:左对齐 ☑   .text-center:居中对齐 ☑   .text-right:右对齐 ☑   .text- ...

  4. Bootstrap系列 -- 5. 文本对齐方式

    一. 文本对齐样式 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 二. 使用方式 <p class=&q ...

  5. 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. php100视频原始地址列表整理：

    php100视频原始地址列表整理: 教程名称 . 1:环境配置与代码调试 2:PHP的数据类型与源码调试 3:常用PHP运算类型介绍与应用 4: PHP条件语句介绍与应用 5:PHP循环语句的介绍与应 ...

  8. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  9. bootstrap modal 垂直居中对齐

    bootstrap modal 垂直居中对齐   文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...

随机推荐

  1. c# 实现点击下载功能

    转自百度知道 private void DownLoad(string strName, string strPath) { string fileName = strName;//客户端保存的文件名 ...

  2. small cell 在安防领域的应用探讨

    在安防领域,最核心的问题是:如何有效区分“内部人员”与“外部人员”.所谓“有效”包含两点意思,一是安全,尽可能地过滤出“外部人员”.二是效率,即尽可能无干扰地或较小干扰地使“内部人员”通过.所有的安全 ...

  3. vitamio MediaController总是显示在底部的问题

    前面一直用腾讯的x5 tas来播放视频,但是体验效果不好,不能设置播放页,无法获取用户对视频的学习情况,百度了下,发现好多人在使用vitamio,最新版本是5.0的,下载可能要花费点时间,官网上竟然没 ...

  4. sql server重建系统数据库

    方法一:https://bbs.csdn.net/topics/100013082 方法二:http://blog.51cto.com/jimshu/1095780 *** 方法三:https://b ...

  5. [转载] C++ namespaces 使用

    原地址:http://blog.sina.com.cn/s/blog_986c99d601010hiv.html 命名空间(namespace)是一种描述逻辑分组的机制,可以将按某些标准在逻辑上属于同 ...

  6. The method identifyUser(Arrays.asList("group001"), String, new HashMap<>()) is undefined for the type AipFace

    在使用百度云的人脸识别sdk时遇到了这个错误,网上百度不到解决的方法,当我浏览百度云的时候发现了这个 于是考虑到版本可能更新,出现了新的函数代替旧的函数,于是去查文档,文档链接如下 https://c ...

  7. day8学python 各种简单模板

    各种简单模板 内容: 1.shelve模板 存储数据 2.shutil 模板 用作拷贝/删除/压缩文件(使用便捷) 3.hashlib 模板 加密文件 4.re模板 ================= ...

  8. [SinGuLaRiTy] 树链问题

    [SinGuLaRiTy-1035] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 关于树链 树链是什么?这个乍一看似乎很陌生的词汇表达的其 ...

  9. 【转】C#中静态方法和非静态方法的区别

    源地址:https://www.cnblogs.com/amoshu/p/7477757.html 备注:静态方法不需要类的实例化就能调用,因为它是一直保存在内存中,不像非静态方法一样要放在实例化类时 ...

  10. 洛谷P1251 餐巾计划问题（费用流）

    传送门 不得不说这题真是思路清奇,真是网络流的一道好题,完全没想到网络流的建图还可以这么建 我们把每一个点拆成两个点,分别表示白天和晚上,白天可以得到干净的餐巾(购买的,慢洗的,快洗的),晚上可以得到 ...