BootStrap-

BootStrap:框架响应式布局，

创建项目选择 1.Twitter Bootstrap

https://v3.bootcss.com/css/#girl --样式介绍

Bootstrap提供许多的css样式 —— 都是通过class名字设置的样式

2.这些样式也可以通过cdn库引入 www.bootcdn.cn/bootstrap/

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  # 通过网站引入

<link rel="stylesheet" href="css/bootstrap.css">  # 创建项目自带的css文件 bootstrap.css

引入过后只需要取成对应样式的class名字就能用这个提供的样式了

需要修改提供的样式时，直接通过优先级的原理在本地修改

一：媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: blue;
        }
        /*页面大小达到500px，div样式改变*/
        @media screen and (min- 500px){
            div{
                width: 200px;
                height: 200px;
                background: red;
            }
        }
        /*页面大小达到800px，div样式改变*/
        @media screen and (min- 800px){
            div{
                width: 400px;
                height: 400px;
                background: yellow;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二：布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

<body>
    <div class="container"></div>   固定宽度并支持响应式布局的容器
    <div class="container-fluid"></div>    100% 宽度，占据全部视口（viewport）的容器
</body>
</html>

三：栅格系统：

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

    <div class="container">
        <div class="row">　　       行必须在container或者container-flud里面
            <div class="col-lg-6">66</div>　　列在行里
            <div class="col-lg-6">66</div>    <!-- 6+6=12不能超过12列  6是自己设置 -->  12代表当前行占满
        </div>
    </div>

.col-lg-x 要求屏幕宽 >= 1200px

.col-md-x 要求屏幕宽 >= 992px

.col-xs-x <768px

四：排版

classname

.h1 .h2 ... .h6 给当前标签赋予h标签的属性大小

五：表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

六：form表单

form表单里的的input用div包起来

form-group   form-control

    <form action="">
        <div class="form-group">
            <label for="Email1">邮箱</label>
            <input type="email" class="form-control" id="Email1" placeholder="Email">
        </div>
    </form>

七：按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

class="btn btn-default"    btn-default 为默认的颜色

<a class="btn btn-danger" href="#" role="button">Link</a>
<button class="btn btn-info" type="submit">Button</button>
<input class="btn bbtn-dark" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

八：辅助类

颜色有：primary info danger warning success

文本颜色 text-

    <p class="text-primary">BootStrap辅助类</p>

背景颜色 bg-

    <p class="bg-primary">BootStrap辅助类</p>

浮动

pull-left 左浮动 show 显示 hidden隐藏 clearfix 清除浮动带来的影响

    <div id="box" class="clearfix">
        <div class="left pull-left show"></div>
        <div class="right pull-right hidden"></div>
    </div>

九：组件字体图标

图标形式相当于字体，用span之类的括起来使用

十：下拉菜单

引入JQ 和创见项目的js

    <script src="js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>