<!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. hdu 4607 Park Visit（树上最长链）

    求树上最长链:两遍搜索. 第一次从树上任意点开始,最远点必然是某一条最长链上的端点u. 第二次从u开始,最远点即该最长链的另一端点. 先在最长链上走,不足再去走支链. 把询问数m错打成n,狠狠wa了一 ...

  2. eclipse export Android jar with jni

    /*********************************************************************** * eclipse export Android ja ...

  3. HDU 1150 Machine Schedule (最小覆盖，匈牙利算法)

    题意: 有两台不同机器A和B,他们分别拥有各种运行模式1~n和1~m.现有一些job,需要在某模式下才能完成,job1在A和B上需要的工作模式又可能会不一样.两台机器一开始处于0模式,可以切换模式,但 ...

  4. pip

    查看安装的包 pip list

  5. linux - 开机启动thunderbird、chromium

    cd ~/.config/autostart/(没有autostart,自己 mkdir autostart) vim thunderbird.desktop,输入以下: [Desktop Entry ...

  6. Spring AOP (上)

    工作忙,时间紧,不过事情再多,学习是必须的.记得以前的部门老大说过:“开发人员不可能一天到晚只有工作,肯定是需要自我学习.第一:为了更充实自己,保持进步状态.第二:为了提升技术,提高开发能力.第三:保 ...

  7. hdu 1573 x问题（中国剩余定理）HDU 2007-1 Programming Contest

    只是套模板而已(模板其实也不懂). 留着以后好好学的时候再改吧. 题意—— X = a[i] MOD b[i]; 已知a[i],b[i],求在[1, n]中存在多少x满足条件. 输入—— 第一行一个整 ...

  8. hdu 3461 Code Lock（并查集）2010 ACM-ICPC Multi-University Training Contest（3）

    想不到这还可以用并查集解,不过后来证明确实可以…… 题意也有些难理解—— 给你一个锁,这个所由n个字母组成,然后这个锁有m个区间,每次可以对一个区间进行操作,并且区间中的所有字母要同时操作.每次操作可 ...

  9. JavaScript 现状：方言篇

    导读 JavaScript 和其他编程语言有一个很大的不同,它不像单纯的一个语言,而像一个由众多方言组成大家族.从 2009 年 CoffeeScript 出现开始,近几年出现了大量基于 JavaSc ...

  10. Spring分布式事务实现

    分布式事务是指操作多个数据库之间的事务,spring的org.springframework.transaction.jta.JtaTransactionManager,提供了分布式事务支持.如果使用 ...