zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    SQLServer 2008 还原数据库备份版本不兼容的问题
    全排列函数
    n & 1
    最长公共子序列(LCS)最长递增子序列(LIS)
    unity3DGI
    多继承的缺点
    JSON文件导入Unity3d中是空的的问题
    丑数
    整数中1出现的次数
    检测鼠标是否在UI上unity
  • 原文地址:https://www.cnblogs.com/strator/p/7513511.html
Copyright © 2011-2022 走看看