前后端分离---响应式布局---bootstrap网页开发

一、响应式布局定义

定义：

响应式布局：简单来说就是根据浏览设备不同，自动改变布局，图片，文字效果等。。不会影响用户浏览体验。

响应式网页必须要注意的事情：

1. 不能固定元素的宽度，必须是流式布局 (默认文档流 + 浮动)；
2. 文字和图片随着容器的大小改变；
3. 媒体查询技术；
4. 过于复杂的页面不适合响应式；

媒体查询：css3
media 媒体 浏览网页的设备 screen (pc / pad / phone )
media Query 媒体查询 ：可以根据当前的浏览设备的不同（包括尺寸、方向）有选择性的执行一部分css样式，忽略其他样式。

浏览设备的定义：

1. pc >= 992 大屏 一行显示4个div(200*200);
2. 768 <= pad <= 991 中屏 一行显示2个div(h：200);
3. phone <= 767 小屏 一行显示一个div(h-200);

css样式中的注意要点：

1. cursor: pointer; 点击按钮 手型
2. float: left; 向左浮动
3. 待续

二、bootstrap框架

bootstrap封装好很多常用的样式，只需要调用类名，但是项目中，对于很多样式，需要自己手写和媒体查询。

注意：导入四个包的时候顺序不能乱

	<link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

（1）bootstrap支持四种分辨率：

1. 大屏幕lg (>=1200px)；
2. 中等屏幕md (>=992px)；
3. 小屏幕sm (>=768px)；
4. 超小屏幕xs (<768px)；

bootstrap默认字体大小 0.25rem (1 rem = 16px );

button样式：与 btn 混用；

1. btn-primary 主要的 蓝色；
2. btn-success 绿色；
3. btn-warning 黄色；
4. btn-outline-success 透明绿色；

 <div class="container">
        <h1>按钮相关的样式</h1>
        <button class="btn btn-primary">按钮</button>
        <input type="button" value="成功" class="btn btn-success">
        <a href="" class="btn btn-info">信息</a>
        <button class="btn btn-danger">按钮</button>
        <button class="btn btn-dark">按钮</button>
        <button class="btn btn-light">按钮</button>
        <button class="btn btn-outline-danger">按钮</button>
        <button class="btn btn-outline-secondary">按钮</button>
        <button class="btn btn-outline-success">按钮</button>
        <button class="btn btn-outline-warning">按钮</button>
        <hr />
        <button class="btn btn-outline-success btn-lg">按钮</button>
        <button class="btn btn-outline-success btn-block">按钮</button>
        <button class="btn btn-outline-success btn-sm">按钮</button>
    </div>

（2）图片样式：

1. rounded 0.25rem圆角；
2. rounded-circle 圆角50% -圆形图片；
3. img-thumbnail 缩略图 有一圈边框；
4. img-fluid 响应式图片 图片会缩放 不会超过原始大小；
   

	<h1>图片相关的样式</h1>
    <img src="img/1.png" class="rounded">
    <img src="img/2.png" class="rounded-circle">
    <img src="img/3.png" class="img-thumbnail">
    <img src="img/3.png" class="img-fluid">

（3）文字样式：

1. text-danger/warning/success/info 文本颜色；
2. text-uppercase/lowercase 大小写；
3. text-capitalize 首字母大写；
4. font-weight-normal/light/weight 正常/加细/加粗；
5. .h1 - .h6 不同字体；
6. text-left/right/center/justify 文字水平对齐方式 左 右 中 两端 对齐；

	<div class="text-danger text-capitalize font-weight-normal text-left">lorem ipsum dolor sit amet,consectetur adipisicing elit.
    blanditiis cum esse et facere iste reiciendis reprehenderit?
    Assumenda, eum fugit id incidunt maiores nostrum numquam, odit officiis 	omnis quae quisquam suscipit?</div>

（4）列表相关：

1. list-unstyled 去掉小圆点 左内边距清零；
2. list-group 列表组(放在ol ul) list-group-item 列表项(放在li) list-group-item-warning/dangger/success 列表项颜色；
3. acive 激活项 disabled 禁用项

<h1>列表相关</h1>
        <ul class="list-unstyled list-group">
            <li class="list-group-item-danger list-group-item disabled">111</li>
            <li class="list-group-item-danger list-group-item">222</li>
            <li class="list-group-item-danger list-group-item">333</li>
            <li class="list-group-item-danger list-group-item">444</li>
            <li class="list-group-item-danger list-group-item active">555</li>
        </ul>

（5）表格样式：

1. table 对table本身和后代的布局
2. table-bordered 为自己和后代添加边框线
3. table-primary/success/info… 表格颜色
4. table-striped 隔行变色
5. table-hover 鼠标悬停变色
6. table-responsive 响应式表格 写在table的父元素上

<div class="container table-responsive">
        <h1>表格相关</h1>
        <table class="table table-bordered table-hover">
            <tr class="table-primary">
                <td>序号</td>
                <td>名称</td>
                <td>类型 </td>
            </tr>
            <tr>
                <td>1001</td>
                <td>java</td>
                <td>java</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>web前端</td>
                <td>web前端</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>软件体系结构</td>
                <td>软件工程</td>
            </tr>
        </table>
</div>

（6）边框类型：

1. border 基本类 border-0 清楚边框
2. border-info/success 边框颜色
3. border-left/top/right/button 单边设置
4. border-left-0 单边消除

	<h1>边框相关</h1>
    <div class="border border-info border-left-0">1111111111111111111</div>
    <div class="border ">2222222222222222222</div>

（7）浮动类型：

1. float-xl/md/sm/lg-left/right/none 响应式浮动
2. clearfix 清除浮动 写在父元素上

	<h1>浮动相关样式</h1>
    <div class="border float-lg-left float-md-right">1111111111111111111</div>
    <div class="border float-lg-left float-md-right">2222222222222222222</div>

（8）显示与隐藏：

1. visible 显示
2. invisible 隐藏
3. bg-primary/warning…背景色
4. rounded 圆角 0.25rem
5. rounded-0 去掉圆角
6. rounded-top 上左+上右
7. rounded-left/bottom/right 上左+下左/下左+下右+上右+下右
8. m-auto 水平居中

	<h1>显示与隐藏</h1>
    <div class="visible bg-danger rounded">3333333333</div>