bootstrap学习笔记–bootstrap排版类的施用

标题

Bootstrap 中定义了有着的 HTML 标题(h1 到
h6)的样式,那些和一般的html没啥差异。请看下边的实例:

<h1>测试1 h1</h1>
<h2>测试2 h2</h2>
<h3>测试3 h3</h3>
<h4>测试4 h4</h4>
<h5>测试5 h5</h5>
<h6>测试6 h6</h6>

内联子标题

设若须要向其余标题添加三个内联子标题,只须要不难地在要素两旁添加
<small>,可能添加 .small class,这样子您就能博取二个字号更小的颜料更浅的公文,如下边实例所示:

    <div class="text-center">
        <h1>测试1 h1<small>hello world</small></h1>
        <h2>测试2 h2<small>hello world</small></h2>
        <h3>测试3 h3<small>hello world</small></h3>
        <h4>测试4 h4<small>hello world</small></h4>
        <h5>测试5 h5<small>hello world</small></h5>
        <h6>测试6 h6<small>hello world</small></h6>
    </div>

展现效果:

图片 1

 

引导主体副本

为了给段落添坚实调文本,则能够增进class=”lead”,那将获得更大更粗、行高更高的文本,如上面实例所示:

    <div class="text-center">
        <h2>这是标题</h2>
        <p class="lead">印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 
            中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 
            中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵印度欲增兵藏南 中国女兵上阵</p>
    </div>

突显效果:

图片 2

强调

HTML 的暗中认可强调标签 <small>(设置文本为父文本大小的
85%)、<strong>(设置文本为更粗的文件)、<em>(设置文本为斜体)。

Bootstrap 提供了部分用以强调文本的类,如上面实例所示:

    <small>本行内容是在标签内</small><br>
    <strong>本行内容是在标签内</strong><br>
    <em>本行内容是在标签内,并呈现为斜体</em><br>
    <p class="text-left">向左对齐文本</p>
    <p class="text-center">居中对齐文本</p>
    <p class="text-right">向右对齐文本</p>
    <p class="text-muted">本行内容是减弱的</p>
    <p class="text-primary">本行内容带有一个 primary class</p>
    <p class="text-success">本行内容带有一个 success class</p>
    <p class="text-info">本行内容带有一个 info class</p>
    <p class="text-warning">本行内容带有一个 warning class</p>
    <p class="text-danger">本行内容带有一个 danger class</p>

来得效果:

图片 3

缩写

HTML 成分提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义
<abbr>
成分的体制为呈现在文件底部的一条虚线边框,当鼠标悬停在上边时会展现完整的文件(只要你为
<abbr> title 属性添加了文本)。为了拿走1个更小字体的文本,请添加
.initialism 到 <abbr>。

    <abbr title="World Wide Web">WWW</abbr><br>
    <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

来得效果:

图片 4

地址(Address)

行使 <address> 标签,您能够在网页上海展览中心示联系音信。由于
<address> 默许为 display:block;,您需求动用 
标签来为封闭的地方文本添加换行。

    <address>
        <strong>Some Company, Inc.</strong><br>
        007 street<br>
        Some City, State XXXXX<br>
        <abbr title="Phone">P:</abbr>
        (123) 456-7890
    </address>

浮现效果:

图片 5

引用(Blockquote)

您能够在任意的 HTML 文本旁使用暗许的
<blockquote>。其余选项包罗,添加二个 <small>
标签来标识引用的源于,使用
class.pull-right 向右对齐引用。上边包车型大巴实例演示了这么些特点:

<blockquote><p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

体现效果:

图片 6

列表

Bootstrap 匡助有系列表、无连串表和概念列表。

  • 稳步列表:有体系表是指以数字或其余有序字符开始的列表。
  • 无连串表:无连串表是指没有特定顺序的列表,是以守旧风格的重视号起首的列表。假诺你不想浮现那个重视号,您能够采用class.list-unstyled 来移除样式。您也足以透过利用
    class .list-inline 把具备的列表项放在同等行中。
  • 概念列表:在那种类型的列表中,各种列表项能够分包 <dt> 和
    <dd> 成分。<dt>
    代表 概念术语,就如字典,那是被定义的属于(或短语)。接着,<dd>
    是 <dt> 的讲述。您能够采取 class dl-horizontal 把 <dl>
    行中的属于与叙述并排展现。

    有序列表

    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4

    无序列表

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    未定义样式列表

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    内联列表

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    定义列表

    Description 1
    Item 1
    Description 2
    Item 2

    水平的定义列表

    Description 1
    Item 1
    Description 2
    Item 2

展现效果:

图片 7

更加多排版类

下表提供了 Bootstrap 越来越多排版类的实例:

描述
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动 scrollable

相关文章