zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Java JPA 入门
    Java JSP 常用标签及自定义标签
    Collection 之 Set、List和Map
    Socket 详解
    MyEclipse 配置SQL Server 2008数据库驱动
    IO 常用IO操作类继承结构 及简单简介
    JSP 相关对象
    Android 入门体验
    C#访问修饰符总结
    C# Socket编程 同步以及异步通信
  • 原文地址:https://www.cnblogs.com/lkwcrystal/p/12574031.html
Copyright © 2011-2022 走看看