• bootstrapCSS-排版


    Bootstrap 排版

    Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

    使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。

    标题

    Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 标题</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <h1>我是标题1 h1</h1>
    <h2>我是标题2 h2</h2>
    <h3>我是标题3 h3</h3>
    <h4>我是标题4 h4</h4>
    <h5>我是标题5 h5</h5>
    <h6>我是标题6 h6</h6>

    </body>
    </html>

    内联子标题

    如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 内联子标题</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
    <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
    <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
    <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
    <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
    <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

    </body>
    </html>

    引导主体副本

    为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本,如下面实例所示:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 引导主体副本</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <h2>引导主体副本</h2>
    <p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

    </body>
    </html>

  • 相关阅读:
    第一个 Python 程序
    Qt之字体文件(TTF)
    Memcached
    Qt之QtSoap(访问WebService)
    Crypto++编译使用
    Memcached
    Windows下编译OpenSSL
    基于Core Text实现的TXT电子书阅读器
    java代码获取jdbc链接properties
    ext树表+ZeroClipboard复制链接功能
  • 原文地址:https://www.cnblogs.com/lkwcrystal/p/12574031.html
Copyright © 2020-2023  润新知