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>

  • 相关阅读:
    【机器学习】机器学习12个关键经验教训
    【机器学习】24个终极项目提升您的机器学习知识和技能
    2018-12-21-WPF-弹出-popup-里面的-TextBox-无法输入汉字
    2019-10-31-C#-dotnet-获取整个局域网的-ip-地址
    2018-11-26-win10-uwp-获取窗口的坐标和宽度高度
    2019-5-21-dotnet-core-使用-CoreRT-将程序编译为-Native-程序
    2019-5-21-Roslyn-使用-Directory.Build.props-管理多个项目配置
    2019-2-26-SublimeText-快速打开当前文件的文件夹
    2019-2-18-VisualStudio-给项目添加特殊的-Nuget-的链接
    2019-8-31-dotnet-如何在-Mock-模拟-Func-判断调用次数
  • 原文地址:https://www.cnblogs.com/lkwcrystal/p/12574031.html
Copyright © 2011-2022 走看看