Bootstrapbootstrap学习笔记–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>

著力量:

Bootstrap 1

 

带主体副本

以为段落添加强调文本,则好加上
class=”lead”,这将赢得重新特别还粗、行高更强之文书,如下面实例所示:

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

来得效果:

Bootstrap 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>

展示效果:

Bootstrap 3

缩写

HTML 元素提供了用来缩写的记,比如 WWW 或 HTTP。Bootstrap 定义
<abbr>
元素的体裁也显示在文书底部的平等长达虚线边框,当鼠标悬停于上头时会来得完整的文书(只要您为
<abbr> title 属性添加了文本)。为了赢得一个又有些书的文书,请添加
.initialism 到 <abbr>。

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

显效果:

Bootstrap 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>

来得力量:

Bootstrap 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>

来得力量:

Bootstrap 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

显示力量:

Bootstrap 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

相关文章