<!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. fiddler2抓包工具使用图文教程

    fiddler2抓包工具使用图文教程 三.fiddler实用功能使用说明: 1.fiddler捕获浏览器的会话: 能支持http代理的任意程序都能被fiddler捕获到,由于fiddler的运行机制就 ...

  2. UVA 10765 Doves and bombs（双连通分量）

    题意:在一个无向连通图上,求任意删除一个点,余下连通块的个数. 对于一个非割顶的点,删除之后,原图仍连通,即余下连通块个数为1:对于割顶,余下连通块个数>=2. 由于是用dfs查找双连通分量,树 ...

  3. ASIFormDataRequest实现post的代码示例

    用jquery实现的Post方法可能如下 var param = $.param({ data: JSON.stringify({"from":"234",&q ...

  4. HTMLParser 解析HTML

    from html.parser import HTMLParser from html.entities import name2codepoint class MyHTMLParser(HTMLP ...

  5. POI读取Word与Excel

    import java.io.BufferedWriter; import java.io.FileInputStream; import java.io.FileNotFoundException; ...

  6. 最简单的视音频播放示例2：GDI播放YUV, RGB

    前一篇文章对“Simplest Media Play”工程作了概括性介绍.后续几篇文章打算详细介绍每个子工程中的几种技术.在记录Direct3D,OpenGL这两种相对复杂的技术之前,打算先记录一种和 ...

  7. AWK print学习

    Awk是一种处理结构数据并输出格式化结果的编程语言, Awk 是其作者 "Aho,Weinberger,Kernighan" 的简称. Awk通常被用来进行格式扫描和处理.通过扫描 ...

  8. mysql违背了唯一约束

    执行一批数据,违背唯一约束时会中断,导致后面的数据写不进去. mysql有提供ignore关键字,使用insert ignore into .... 这样,当违背了唯一约束的时候~就会直接跳过,不会报 ...

  9. 一次library cache pin故障的解决过程

    内容如下: 今天接到同事的电话,说他的一个存储过程已经run了一个多小时了,还在继续run,他觉得极不正常,按道理说不应该run这么长时间. 我说那我去看一下吧. 这个库是一个AIX上的10.2.0. ...

  10. html5极速3D立体式图片相册切换效果

    下载Demo