<!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. 通过AJAX与ASP.NET结合实现的仿GridView增删改查功能

    jQurey代码部分: 1.    <script type="text/javascript"> 2.            var flag = 0; 3. 4.  ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  3. ffmpeg-2.3.3 configure for android

    #! /bin/shNDK=/usr/local/android-ndk-r10PREBUILT=${NDK}/toolchains/arm-linux-androideabi-4.9/prebuil ...

  4. [反汇编练习] 160个CrackMe之020

    [反汇编练习] 160个CrackMe之020. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. Java [Leetcode 66]Plus One

    题目描述: Given a non-negative number represented as an array of digits, plus one to the number. The dig ...

  6. LeetCode中有技巧的题需要面试前记得的

    https://leetcode.com/problems/insert-interval/ http://www.cnblogs.com/yxzfscg/p/4459173.html https:/ ...

  7. 原生Ajax书写

    1.创建XMLHttpRequest对象 function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无 ...

  8. Android-onTouchEvent方法的使用

    手机屏幕事件的处理方法onTouchEvent.该方法在View类中的定义,并且所有的View子类全部重写了该方法,应用程序可以通过该方法处理手机屏幕的触摸事件.该方法的签名如下所示. public ...

  9. linux编程获取本机网络相关参数

    getifaddrs()和struct ifaddrs的使用,获取本机IP 博客分类: Linux C编程   ifaddrs结构体定义如下: struct ifaddrs { struct ifad ...

  10. [Everyday Mathematics]20150126

    设 $A$ 是 $4\times 2$ 阶实矩阵, $B$ 是 $2\times 4$ 阶实矩阵, 满足 $$\bex AB=\sex{\ba{cccc} 1&0&-1&0\\ ...