Bootstrap入门

Bootstrap简介
      Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。是基于 HTML、CSS、JAVASCRIPT 的由 Twitter 的 Mark Otto 和 Jacob Thornton 开发。与 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap常用的基本语法
容器样式：
    (1).container：响应式的，指定宽度的容器~随着浏览器的尺寸变化自动变化宽度。
    (2).container-fluid：铺满浏览器窗口的流式容器浏览器有多宽这个样式就有多宽
    注意：不能嵌套使用。
    目的：标记一个区域，这个区域中，就可以使用栅格系统布局。
    在容器样式中可以定义行样式与列样式。
    (1).行样式：row 表示声明一行
    (2).列样式：col-md-n 表示声明一列占用n个标准列的位置。
    (3).列偏移：col-md-offset-n 从左至右偏移的列数。
    在Bootstrap中网页尺寸的定义有四种，分别适用于不同的屏幕尺寸。
    lg:屏幕尺寸大于1170px情况下使用
    md:屏幕尺寸大于970px情况下使用
    sm:屏幕尺寸大于768px情况下使用
    xs:屏幕尺寸小于768px情况下使用

    .hidden-md:表示让修饰的元素标签在md尺寸下隐藏，其他三种尺寸下显示
    .visible-md:表示让修饰的元素标签在md尺寸下显示，其他三种尺寸下隐藏 。
全局样式
    关于文本：
        (1). text-left 文本左对齐
        (2). text-right 文本右对齐
        (2). text-center 文本居中对齐。
    文本颜色与背景颜色

<div class="row">
    <div class="col-md-12">
        <h1>文本颜色操作</h1>
        <p>文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-muted">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-primary">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-success">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-info">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-warning">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-danger">文本颜色同样根据bs中提供的主要色调进行确定</p>

        <p>背景颜色的处理，根据不同的场景定义不同颜色操作</p>
        <p class="bg-primary">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
        <p class="bg-success">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
        <p class="bg-info">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
        <p class="bg-warning">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
        <p class="bg-danger">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
    </div>
</div>

    Bootstrap中提供了不同的按钮样式

<div class="row">
    <div class="col-md-12">
        <h1>按钮样式</h1>
        <button>原始按钮</button>
        <button class="btn btn-default">默认按钮</button>
        <button class="btn btn-primary">蓝色按钮</button>
        <button class="btn btn-success">绿色按钮</button>
        <button class="btn btn-info">淡蓝色按钮</button>
        <button class="btn btn-warning">黄色按钮</button>
        <button class="btn btn-danger">红色按钮</button>
    </div>
</div>