bootstrap_响应式_CSS

Responsive web page 响应式/自适应网页 可以根据浏览设备不同（pc，pad，phone）
 而自动改变布局，图片文字效果，不会影响用户浏览体验

①布局，不能固定元素宽度，必须是流式布局（默认文档流+浮动）

②文字和图片大小随容器的大小改变

③媒体查询技术

响应式网页存在的问题：代码复杂程度几何性的增加

复杂玩网页，不适合使用响应式

①使用真实设备（好处：真实可靠，缺点：成本高，测试任务巨大）

②使用第三方模拟软件测试（好处：不需要太多真实设备测试方便，缺点：测试效果有限，有待进一步验证）

③使用chrome等浏览器自带的模拟软件（好处：简单方便，缺点：测试效果十分有限，需要进一步验证）

1.手机适配，设置视口,在meta中声明viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

  在 content中编写参数：

    width=device-width，设置视口宽度为设备宽度

       initial-scale=1.0，设置视口宽度能否缩放，1.0 不能缩放     

       maximum-scale=1.0，允许缩放的最大倍率

       user-scalable=0，是否允许用户手动缩放 ，0 不能

最简洁的写法：

 <meat name="viewport" content="width=device-width,initial-scale=1">

2.所有的内容/文字/图片/都使用相对尺寸，不能使用绝对值

3.流式布局+弹性布局+媒体查询  完成响应式布局

4.媒体查询 ，css3中  Media Query，做响应式必备技术

Media：媒体，不同的用于浏览网页的设备   

      screen(pc/pad/phone)  TV/print

Media Query：可以自动根据当前浏览器设备的不同（尺寸，方向，解析度.....），                                有选择性的执行一部分css样式，而忽略其他样式

pc：>=992 大屏， @media screen and (min-width:992px){ }

phone：768<=width<992 中屏, @media screen and(min-width:768px) and( max-width:991px){}

<768 小屏  @media screen and (max-width:767px){ }

boot给我们封装好很多的样式，以类名的形式让我们调用

但是在项目中，对于很多样式我们还是需要手写样式和媒体查询

BootStrap内容分为5部分

1.如何使用boot

2.全局css

3.组建

4.js插件

5. sass 定制

6.boot项目

<meta name="viewport" content="width=device-width,initial-scale=1"/> 设置视口

<link rel="stylesheet" href="../css/bootstrap.css">   导入css文件

<script src="../js/jquery.min.js"></script>  导入js文件（顺序有要求 query-popper-bootstrap）

<script src="../js/popper.min.js"></script>

<script src="../js/bootstrap.min.js"></script>

按钮颜色

不同边框的按钮

btn-success

绿色

btn-outline-success

绿色边框

btn-danger

红色

btn-outline-danger

红色边框

btn-warning

黄色

btn-outline-warning

黄色边框

btn-primary

主要的 蓝色

btn-outline-primary

主要的 蓝色边框

btn-secondary

次要 灰色

btn-outline-secondary

次要 灰色边框

btn-info

信息 青色

btn-outline-info

信息 青色biank

btn-dark

深色

btn-outline-dark

深色边框

btn-light

浅色

btn-outline-light

浅色biank

btn-link

链接

按钮的大小

btn-sm

小按钮

btn-lg

大按钮

btn-block

块级按钮

rounded

圆角  0.25rem

rounded-circle

圆形--50%圆角

img-thumbnail

缩略图，有一圈白色边(padding)

img-fluid

响应式图片，图片会缩放，但不会超过原始大小

.h1~.h6

字号大小，同h1~h6标签

text-danger/warning/success/info....

字体颜色

text-uppercase/lowercase/capitalize

所有字母大写，小写，首字母大写

font-weight-bold/light/normal

字体加粗，细，正常

text-left/right/center/justify

文字水平对齐方式

text-*-left/center.right

响应式 *:sm/md/lg/xl(小/中/大/超大)

list-unstyled

去掉点，左内边距清0

ul.list-group>li.list-group-item

创建列表组和列表项

.list-group-item.active

激活项

.list-group-item disabled

禁用项

list-group-item-danger/warning/info......

列表项颜色

.table         (基本类)

对table本身和table的后代布局

.table-bordered

一个有边框的表格.为自己和后代添加边框

table-danger/warning/success/info...

表格颜色

table-striped

隔行变色

table-hover

带鼠标悬停效果的表格

table-responsive-xl/lg/md/sm

响应式表格 写在table的父元素上

1.边框

border/border-0  （基本类）

定义边边框，取消边框

border-left/top/right/bottom

单边设置

border-left-0

单边框清0，去掉单边框

border-danger/warning...

边框颜色

响应式浮动

clearfix

清除浮动（解决高度坍塌），写在父元素

p

pt

pr

pb

pl

px

py

padding

p-上

右

下

左

左右

上下

n

0

1

2

3

4

5

0.25rem

0.5rem

1rem

1.5rem

3rem

3rem

m-n

m

mt

mr

mb

ml

mx

my

上

右

下

左

左右

上下

n

0

1

2

3

4

0.25rem

0.5rem

1rem

1.5rem

2rem

3rem

*:xl/lg/md/sm  响应式   *：p/m    mt-lg-3 mt-sm-1

table布局

div+css

Boot中的栅格布局

简单，易控制

语义正确，渲染效率高

简单，易控制，语义正确，渲染效率高，支持响应式

语义错误，渲染效率低

控制起来很麻烦

不适用于复杂的页面

1.必须要放在.container或者.container-fluid中

2.每一行都是一个row（弹性，主轴是x，可以换行，左右-15px外边距）

3.每一个col自带15px内边距

col-*-n        *:xl/lg/ms/sm   在不同的屏幕下执行不同的列数

 只写小屏，在小屏，中屏，大屏，超大屏，都会应用

 只写中屏，在中屏，大屏，超大屏中应用，小屏不会

 只写大屏，在大屏，超大屏中应用，

使用.col类，不添加数字时，自动平均分配占地宽度，

每个col平均分配空间，col个数超过12个也平均分配

使用场合：在一行内，元素需要横向显示，元素个数不能被12整除

 offset-*-n    源码就是在操作左外边距margin-left

  *:xl/lg/md/sm   n:0~11

 在一个.col中再写一个row

 d-block/inline/inline-block/none  diaplay的取值

d-*-block/inline…..     响应式       *: xl/lg/md/sm
想使用弹性布局，需要在父元素上添加d-flex/d-inline-blok/none创建弹性容器

 flex-row/column/row-reverse/column-reverse

响应式设置

 flex-*-row/column/row-reverse/column-reverse   *:xl/lg/md/sm

 justify-content-start/center/end/between/around

响应式设置

justify-content-*-start/center/end/between/around        *:xl/lg/md/sm

  form-group  堆叠表单，内部控件垂直显示

  form-inline  内联表单，内部控件横向显示（弹性，x轴主轴）

  form-control   对于text和password文本框的基本类

块级，w-100%，字体，背景颜色，边框，圆角，过渡

  col-from-label  设置文本框上下内边距

     col-form-label-lg  上下内边距大

     col-form-label-sm  上下内边距小

 checkbox的基本类

  form-check  相对定位，让子元素以父级定位

  form-check-input  绝对定位    要配合父级元素的form-check使用

form-text  块级，有上下外边距