<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>bootstrap</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

    <body class="container">
        <!------------------------------------------标题------------------------------------------------------------->
        <div class="container">
            <h1 class="page-header">标题</h1>
            <h1>h1. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h1>
            <h2>h2. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h2>
            <h3>h3. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h3>
            <h4>h4. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h4>
            <h5>h5. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h5>
            <h6>h6. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h6>
        </div>
        <!------------------------------------------页面主体------------------------------------------------------------->
        <h1  class="page-header">页面主体</h1>
         <div>
            <p> 普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。
            普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。</p>
            <p class="lead">通过添加.lead可以让段落突出显示.通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示
            通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示</p>
        </div>
        <!------------------------------------------强调------------------------------------------------------------->
        <h1  class="page-header">强调</h1>
        <small>1、小号文本------对于不需要强调的inline或block类型的文本，使用small标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
                你还可以为行内元素赋予.small以代替任何small标签。</small><br />
        <strong>2、着重--------通过增加font-weight强调一段文本。 </strong><br />
        <em>3.斜体---------用斜体强调一段文本。</em>　
        <p class="text-left">4.1----对齐class,左对齐</p>
        <p class="text-center">4.2----对齐class,中间对齐</p>
        <p class="text-right">4.3----对齐class,右对齐</p>　
        <!------------------------------------------强调Class------------------------------------------------------------->
        <h1 class="page-header">强调Class</h1>
            <p class="text-muted">这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。</p>
            <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
            <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
            <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <!------------------------------------------缩略图------------------------------------------------------------->
        <h1 class="page-header">缩略图</h1>
            <p>当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。</p>
            <abbr title="如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。">基本缩略语</abbr><br />
            <abbr title="为缩略语添加.initialism可以将其font-size设置的更小些。" class="initialism">缩略图initialism</abbr>
        <!------------------------------------------地址------------------------------------------------------------->
        <h1 class="page-header">地址</h1>
        <p>让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。</p>
        <address>
            <strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>
            <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>

        <address>
        <strong>Garnett</strong><br>
        <a href="#">first.last@example.com</a>
        </address>
        <!------------------------------------------引用------------------------------------------------------------->
        <h1 class="page-header">引用</h1>
        <blockquote>
            <p>默认样式的引用，将任何HTML裹在blockquote之中即可表现为引用。对于直接引用，我们建议用p标签。</p>
            <small>引用来源<cite title="Source Title">来源名称</cite></small>
        </blockquote>

        <!------------------------------------------列表------------------------------------------------------------->
        <h1 class="page-header">无序列表</h1>
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
        <h1 class="page-header">有序列表</h1>
            <ol>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
            </ol>
        <h1 class="page-header">无样式列表</h1>
            <ul class="list-unstyled">
                <li>无样式列表</li>
                <li>无样式列表</li>
                <li>无样式列表</li>
                <li>无样式列表</li>
                <li>无样式列表</li>
            </ul>
        <h1 class="page-header">内联列表,将所有元素放置于同一列。</h1>
             <ul class="list-inline">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
            </ul>
        <!------------------------------------------描述------------------------------------------------------------->
        <h1 class="page-header">描述</h1>
        <dl>
            <dt>.Lorem ipsum dolor sit amet</dt>
            <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>
        </dl>

        <dl class="dl-horizontal">
            <dt>.dl-horizontal</dt>
            <dd>可以让dl内短语及其描述排在一行。</dd>
        </dl>
    </body>
    <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</html>

Bootstrap排版的更多相关文章

  1. 第二百三十二节，Bootstrap排版样式

    Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一．页面排版 Boot ...

  2. 测开之路一百零七：bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  3. bootstrap学习笔记--bootstrap排版类的使用

    标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2& ...

  4. 第五篇.Bootstrap 排版

    使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上& ...

  5. Bootstrap 排版 笔记

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  6. Bootstrap 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  7. Bootstrap排版——HTML元素的样式重定义

    前面的话 Bootstrap对默认的HTML元素进行了CSS样式定义,使得各种基本结构套用出来的HTML页面更加美观.本文将详细介绍Bootstrap中排版相关的内容 标题 [h] HTML 中的所有 ...

  8. bootstrap排版实战

    bootstrap+angular实战 CASE-01:页面总体排版 说明:页面排版整体分为三个部分(见产品图):上导航条(红色区域).左导航条(紫色区域).内容区域(蓝色区域).左导航条的区域是由整 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：可滚动

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

随机推荐

  1. ORACLE 全局索引和本地索引

    Oracle数据库中,有两种类型的分区索引,全局索引和本地索引,其中本地索引又可以分为本地前缀索引和本地非前缀索引.下面就分别看看每种类型的索引各自的特点. 全局索引以整个表的数据为对象建立索引,索引 ...

  2. ch02-HTML的基本概念

    HTML的基本概念 Ch02: HTML的基本概念 1, 标记: 每一组HTML标记,都会被放在"<>"里面,用于控制里面的文字显示效果及其它一些用途. 语法: 开始标 ...

  3. Linux User's Manual IOSTAT

    IOSTAT(1) Linux User's Manual IOSTAT(1) NAME iostat - Report Central Processing Unit (CPU) statistic ...

  4. SQL2012远程连接到SQL2008时的问题：已成功与服务器建立连接，但在登陆过程中发生错误。

    服务器装的是2008,我机上装的是2012,结果一远程连接马上报错而且2012直接crash了.后来找到这位兄弟的帖子,http://www.cnblogs.com/liuguozhu2015/p/3 ...

  5. hdu 2059(dp)

    题意:容易理解... 思路:dp[i]表示乌龟到达第i个充电站时最少花费时间到第 i 个充电站后,从起点开始遍历到第 i-1 个充电站,得到最少花费时间 状态转移方程:dp[i]=min(dp[j]+ ...

  6. LAMP网站架构分析

    转自:http://www.williamlong.info/archives/1908.html LAMP(Linux-Apache-MySQL-PHP)网站架构是目前国际流行的Web框架,该框架包 ...

  7. C# 替换文本文件中的某一行

    C# 替换文本文件中的某一行 (要求此文件存在) /// <summary> /// LineIndex 表示新的内容所在的行位置 /// </summary> /// < ...

  8. 【QTP】自动化测试：

    一.参数化: 1.随机数: 下面两个语句都可以: Window("Flight Reservation").Dialog("Flights Table").Wi ...

  9. 【原】Storm环境搭建

    2.Storm环境搭建 单机 ... 集群 ... 搭建Storm开发环境 搭建Storm开发环境主要概括为以下两步: 1.下载Storm发行稳定版,然后解压,最后把解压后的bin/文件所在目录添加到 ...

  10. 写i2c_client驱动的两种方式

    http://www.cnblogs.com/simonshi/archive/2011/02/24/1963426.html