BootStrap

一. CSS3响应式布局

 

1. 什么是响应式网页？

可以根据浏览器设备不同而自动改变图片，文字布局，不会造成横向溢出，进而改善用户体验。

2. 响应式布局必需满足：

（1）不能固定元素宽度，必需使用流式布局(默认文档流+浮动)+弹性布局+栅格布局(就是媒体查询)

（2）文字和图片大小随容器大小变化，也就是使用相对尺寸

（3）使用媒体查询技术

3. 媒体查询

获取设备类型及相关参数，例如判断设备是否为显示屏，以及查询显示屏大小。

会根据浏览器网页的设备不同，有选择的执行一部分css样式，忽略其他css样式。

（1）设备：screen（显示屏），print（打印机），TV...

（2）屏幕大小：

xl(超大屏)   屏幕宽度 >= 1200px
lg(大屏)     992px <= 屏幕宽度 < 1200px
md(中屏)     768px <= 屏幕宽度 < 992px
sm(小屏)     576px <= 屏幕宽度 < 768px
xs(超小屏)   屏幕宽度 < 576px

@media screen and (min-width:992px) {
    div {
        background:#000;
        color: red;
        font: 36px chiller;
    }

}

@media screen and (min-width:768px) and (max-width:991px) {
    div {
        background:#f00;
        color: #ff0;
        font: 24px chiller;
    }

}

@media screen and (max-width:767px) {
    div {
        background:#f0f;
        color: #fff;
        font: 16px chiller;
    }

}

4. 编写响应式布局

4.1 视口

移动设备（手机，pad...）编写响应式布局必需写视口（viewport），pc可以不写视口。

视口时设置网页高度和宽度的，在移动端，因为横向滑动交互性特别差，因此，移动端的视口段都一般设置为手机段都。

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width 设置视口宽度等于设备宽度
initial-scale=1.0  设置视口宽度初始能不能缩放  1.0代表不能
maximum-scale=1.0  设置视口最大缩放比例   1.0最大1倍
user-scalable=0    设置是否允许用户缩放视口   0不允许

视口最简洁的写法
<meta name="viewport" content="width=device-width, initial-scale=1">

二. BootStrap

https://www.bootcss.com

boot3和boot4区别：

    boot3使用less语法写的css，boot4使用的是sass语法

由于Bootstrap 是用于开发响应式布局的，因此对于复杂的pc端页面并不适合，而适合于开发移动设备优先的 WEB 项目。

1. 如何使用bootstrap

1）head中引入文件，顺序不能乱

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.css">
  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>

2）编写container div

所有的boot文件都必需卸载container div内

  <div class="container">    
  </div>

2. 全局css样式

container 定宽容器，每种不同的分辨率下，
          定义了写死的max-width
          同时，有左右15px内边距，水平居中
container-fluid 变宽容器，根据不同分辨率的屏幕，
                宽度永远是屏幕的100%
boot支持4种屏幕  xl/lg/md/sm   不支持xs
boot中1个rem是16px。
boot的css reset使用的是normalize.css方案

2.1 按钮相关

.btn 基本类
按钮颜色：
  btn-danger   危险
  btn-success  成功
  btn-warning  告警
  btn-info     信息
  btn-primary  主要
  btn-second   次要
  btn-dark     深色
  btn-light    浅色
边框颜色：
  btn-outline-xxx
按钮大小：
  btn-sm
  btn-lg
  btn-block
  btn-link

  2.2 图片相关

  rounded           圆角
  rounded-circle    圆形图
  img-thumbnail     缩略图，有图片边框
  img-fluid         响应式图片，高度自适应，宽度不能超过图片原始宽度的100%

2.3 文本相关

text-danger...
.h2 - .h6
text-capitalize/uppercase/lowercase  首字母大写，全部大写，全部小写
text-center/right/left 左中右对齐
text-sm/lg/md-left/right/cent  媒体查询控制文本对齐
text-justify  两端对齐，没有媒体查询

2.4 列表相关

ul
  list-unstyled     去点，左内边距清0
  list-group        列表组

li
  list-group-item   列表项，边框，首元素和尾元素的圆角
  list-group-danger 颜色
  active            激活
  disabled          禁用项

 2.5 表格 table

table
  table 
  table-bordered
  table-warning
  table-hover
  table-striped  隔行变色
table的父级元素
  table-responsive  

3. 辅助类

通用类

3.1 边框

border   基本类
border-danger
border-0 去掉边框

3.2 浮动

float-left
float-none
float-sm-left
clearfix  放在父元素上，防止高度坍塌

3.3 显示

visible     visibility: visible
invisible   visibility: hidden

3.4 背景颜色

bg-warning

3.5 圆角

rounded
rounded-0
rounded-circle
rounded-top/right/...

3.6 尺寸

w-25
h-25
mw-100
mh-100

3.7 内外边距

m/mt/mb/mr/ml/mx/my-auto  外边距
p.... 内边距
响应式

4. 栅格布局

把一行分成12份，元素的占地宽度靠份数定义