美文网首页我爱编程
Bootstrap排版样式(二)

Bootstrap排版样式(二)

作者: _LC | 来源:发表于2018-02-16 17:01 被阅读0次

    主要学习Bootstrap全局CSS中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。

    一、页面排版

    1.页面主体

    Bootstrap将全局font-size设置未14pix,line-height行高设置为1.428(20pix),<p>段落元素被设置等于1/2行高(10pix),颜色设置为#333(深灰色)。
    事例 标标签p 和class="lead"配合使用

    <p class="lead">Bootstrap</p>
    <p>Bootstrap</p>
    <p>Bootstrap</p>
    <p>Bootstrap</p>
    
    lead css.png lead显示样式.png

    2.标题

    可直接用h1-h6标签,也可使用 类来表示 class="h1" ,可在标题内容中插入<small></small>

    <h1>Bootstrap框架</h1>
    <h1>Bootstrop<small>框架</small></h1>
    <h2>Bootstrap框架</h2>
    <h3>Bootstrap框架</h3>
    <h4>Bootstrap框架</h4>
    <h5>Bootstrap框架</h5>
    <h6>Bootstrap框架</h6>
    
    图片.png

    3.内联文本元素

    添加<mark></mark>标签或class="mark"类 mark类会把整行都改变
    添加各种线条的文本<del></del> <s></s> 删除 <ins></ins> <u></u>下划线
    强调文本使用标签 small 字体变小 strong字体变粗 em斜体

        <p><mark>Bootstrap框架</mark></p>
        <p class="mark">Bootstrap</p>
        <p>Bootstrap</p>
    
        <p><del>Bootstrap框架</del></p>
        <p><s>Bootstrap框架</s></p>
        <p><ins>Bootstrap框架</ins></p>
        <p><u>Bootstrap框架</u></p>
    
        <p><strong>Bootstrap框架</strong></p>
        <p><small>Bootstrap框架</small></p>
        <p><em>Bootstrap框架</em></p>
    
    mark.png
    线条+强调文本.png

    4.对齐

    class="text-left"
    class="text-center"
    class="text-right"
    class="text-justify" 两端对齐
    class="text-nowrap" 不换行

        <div class="text-right">
            <p>div右对齐</p>
            <p>DIV</p>
       </div>
        <p class="text-left">框架</p>
        <p class="text-center">框架</p>
        <p class="text-right">框架</p>
        <p class="text-justify">框架框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj</p>
        <p class="text-nowrap">框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj</p>
    
    图片.png

    5.大小写

    class="text-lowercase"
    class="text-uppercase"
    class="text-capitalize"首字母大写

    6.缩略语

    <abbr class="initialism">bs</abbr>
    字母会变成大写

    7. 地址文本

    <address>中国北京</address>
    

    去掉了倾斜,设置了行高

    8.引用文本

    blockquote标签
    居右 class=“blockquote-reverse” / class="pull-right"

        <blockquote>这是引用文本</blockquote>
        <blockquote class="blockquote-reverse">这是引用文本居右</blockquote>
        <blockquote class="pull-right">这是引用文本居右</blockquote>
    
    图片.png

    9.列表排版

    ul ol移除默认样式 class="list-unstyled"
    class="list-inline"变成一行

    <ul class="list-unstyled list-inline">
        <li>cat</li>
        <li>dog</li>
        <li>fish</li>
    </ul>
    

    水平排列描述列表 dl dt dd,class="dl-horizontal"

    <dl>
        <dt>Bootstrap</dt>
        <dd>Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用</dd>
    </dl>
    
    图片.png
    <dl class="dl-horizontal">
            <dt>Bootstrap</dt>
            <dd>Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用</dd>
        </dl>
    
    图片.png

    10.代码

    内联代码 code
    用户输入 kbd
    代码块 pre

    <code>&lt;section&gt;</code>
    press <kbd>ctrl+,</kbd>
    <pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>
    
    图片.png

    相关文章

      网友评论

        本文标题:Bootstrap排版样式(二)

        本文链接:https://www.haomeiwen.com/subject/srpjtftx.html