zoukankan      html  css  js  c++  java
  • Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章《html的文本元素总结》,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。

    .small——当前元素字体大小的 85%,经常使用作副标题时,也可用<small>来取代;

    .lead——让段落突出显示;

    .text-left、.text-center、.text-right——将文字于左、居中、于右对齐;

    .text-lowercase、.text-uppercase、.text-capitalize——分别相应:全部字母大写、全部字母小写、首字母大写。

    .blockquote-reverse——让引用呈现内容右对齐;

    .list-unstyled——设置列表为无样式。

    .list-inline——设置列表元素放置于同一行。并加入少量的内补(padding);

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CSS全局样式排版</title>
        <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    </head>
    <body>
    <div class="container">
        <h1>欢迎訪问远地资产</h1>
        <h2>欢迎訪问远地资产</h2>
        <h3>欢迎訪问远地资产</h3>
        <h4>欢迎訪问远地资产<small>你可信赖的理財伙伴</small></h4>
        <p>宏运球迷赛后狂骂郜林及其太太 <abbr title="广州恒大前锋">郜林</abbr>扔鞋反击</p>
        <p class="lead">宏运球迷赛后狂骂郜林及其太太 郜林扔鞋反击</p>
        <p>宏运球迷赛后狂骂郜林及其太太 <mark>郜林</mark>扔鞋反击</p>
        <p class="text-left">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
        <p class="text-center">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
        <p class="text-right">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
        <p class="text-lowercase">AHALjjls</p>
        <p class="text-uppercase">AHALjjls</p>
        <p class="text-capitalize">fkdla</p>
        <address>
            <strong>远地资产</strong><br/>
            上海市,黄浦区<br/>
            西藏中路725弄12号3楼<br/>
            <abbr title="电话">P:</abbr>(021) 6553 2332
        </address>
        <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>
        <ul class="list-unstyled">
            <li>鲁媒:上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
            <li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
            <li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
        </ul>
        <ul class="list-inline">
            <li>鲁媒:上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
            <li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
            <li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
        </ul>
    </div>
    
    </body>
    </html>



  • 相关阅读:
    DataInputStream与DataOutputStream类
    BluetoothChat例程分析
    Android中的Handler机制
    我的IT之路2012(二)
    菜鸟学Java(二)——Filter解决中文乱码问题
    菜鸟学Java(一)——Ajax异步检查用户名是否存在
    FTP文件操作之创建目录
    FTP文件操作之获取文件列表
    使用powershell计算性能计数器的均值
    收缩临时库 shrink tempdb
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/6849732.html
Copyright © 2011-2022 走看看