<!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. JQuery Ajax 在asp.net中使用小结

    自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方 ...

  2. 如何在Asp.Net WebApi接口中，验证请求参数中是否携带token标识！

    [BasicAuthentication] public abstract class ApiControllerBase : ApiController { #region Gloal Proper ...

  3. ffmpeg+rtsp+dss

    1. push stream to dss ffmpeg -f mpegts -re -i film.v -c:v libx264 -s 352x288 -aspect 4:3 -b:v 300k - ...

  4. fzu 1675 The Seventy-seven Problem

    给你长度为 10^5~10^6长度,由数字组成的串 其中有4位不见了 补全该串 使得在该串能整除 77的同时 尽可能大// 先计算出每个 n*10^m 模 77 的循环节 n=0,1,2..,9// ...

  5. eclipse设置自定义快捷键

    eclipse有很多强大且人性化的功能,而各项功能有时又隐藏得比较深(需要点击数次菜单才能找到),而系统提供的快捷键有时比较难记住甚至根本没有提供快捷键时,就需要自己手动设置快捷键了.设置方法有两种, ...

  6. HDU 2227-Find the nondecreasing subsequences（dp+BIT优化）

    题意: 给你一个序列a[],求它的不降子序列的个数 分析: dp[i]表示以i结尾不降子序列的个数,dp[i]=sum(dp[j])+1(j<i&&a[j]<=a[i]); ...

  7. 2016计蒜之道复赛 菜鸟物流的运输网络 网络流EK

    题源:https://nanti.jisuanke.com/t/11215 分析:这题是一个比较经典的网络流模型.把中间节点当做源,两端节点当做汇,对节点进行拆点,做一个流量为 22 的流即可. 吐槽 ...

  8. 精雕细琢 35 套精美的 PSD 图标素材

    设计师总是有独特的创意和精雕细琢的精湛技术,让我们值得去欣赏和借鉴,如梦想天空所表达的:非常感谢那些很有才华的设计师分享它们的劳动成果,让更多的人可以使用他们的创意设计.今天,本文与大家分享35套精美 ...

  9. Tkinter教程之Message篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811326 '''Tkinter教程之Message篇'''#Message也是用来显示文本的 ...

  10. leetcode—3sum

    1.题目描述 Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find ...