bootstrap_排版

  排版

      1.对齐

        1. text-left  左对齐

        2.text-right 右对齐

        3.text-center 居中

        4.text-justify  齐行

        5.text-nowrap 不换行

      2.改变大小写

         1.text-lowercase   全部改成小写

        2.text-uppercase          全部改成大写

        3.text-capitalize            首字母大写

      3.基本缩略语

          当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。

      4.首字母缩略语

            为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。(PS:当然,笔者在这里并没有发现两者之间有什么很大的不同)

      5.地址

          地址在我们的网站显示中也是一个比较常见的信息之一,我们需要将他以一种比较合适的姿态去显示.

          在进行引用地址的时候,我们可以将下面的代码进行复制使用

          

       <address>
          <strong>Twitter, Inc.</strong><br>
          1355 Market Street, Suite 900<br>
          San Francisco, CA 94103<br>
          <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>

        这个时候,我们的地址就能以一种比较合适的形式去呈现。

      6.引用

              

<!--引用-->
        <blockquote class="blockquote-reverse">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <br /><br />
        <br />
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <br /><br /><br />
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </blockquote>

    这是引用的具体使用,但是对于笔者来说,还没有使用过.    

      7.列表

          无样式列表

          移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。class:list-unstyled  

          内联列表

            通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。  class:list-inline 

         8.描述

            普通描述  

              

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

             水平描述:也就是说主要进行作用的类是:dl-horizontal  

  

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

       9.自动截断

自动截断

通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。

       10.代码描述

          

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--引用-->
        <blockquote class="blockquote-reverse">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <br /><br />
        <br />
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <br /><br /><br />
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </blockquote>
        <br /><br /><br /><br />
        <address>
          <strong>Twitter, Inc.</strong><br>
          1355 Market Street, Suite 900<br>
          San Francisco, CA 94103<br>
          <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>
        <br /><br /><br /><br />
        <address>
          <strong>Full Name</strong><br>
          <a href="mailto:#">first.last@example.com</a>
        </address>
        
        <br /><br /><br /><br />
        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
        <br /><br /><br />
        <abbr title="attribute">attr</abbr>
        <br /><br /><br /><br />
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>
        <br /><br /><br /><br />
        <p class="text-left">Left aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-right">Right aligned text.</p>
        <p class="text-justify">Justified text.</p>
        <p class="text-nowrap">No wrap text.</p>
    </body>
</html>
原文地址:https://www.cnblogs.com/strator/p/7513511.html