BootStrap #响应式布局 #组件

响应式布局

1.啥叫响应式：根据浏览器页面的设备不同 自动的改变布局 图片 文本 不会影响体验

2.编写响应式的网页：

(1)视口
     <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   初始化不允许缩放
maximum-scale=1.0   允许缩放的最大倍率
user-scalable=0     不允许用户缩放
(2)媒体查询
设备条件 media(屏幕尺寸 解析率 横竖屏 ) 硬件条件 screen(pc.pad.phone）
            超大屏xl      screen>=1200px         min-width:1200px
            大屏 lg       992px<=screen<1200px
            中屏 md       768px<=screen<992px
            小屏 sm      576px<=screen<768px
            超小屏 xs      screen<576px
@media screen and (max-width:575.99px) {
   }
@media screen and (min-width:576px) and (max-width:767.99px){
   }
@media screen and (min-width:768px) and (max-width:991.99px){
   }
@media screen and (min-width:992px) and (max-width:1199.99px){
   }
@media screen and (min-width:1200px) {
   }


没有screen也不会对编辑有任何影响 

一.使用bootstrap

1.所有的boot代码都卸载<div class="container"></div>
container 定宽容器 四种屏幕 都定义了最大宽度 fluid 变宽容器  两种左右都有15px内边距  auto的外边距

2.按钮

btn 基本类,行内块,内边距,文本系列样式,伪类的一系列样式
按钮颜色
btn-danger/warning/success/info/parmary/secondark/dark/light
镂空按钮
btn-ouline-danger/warning...
按钮大小
btn-lo/sm 通过内边距,字号,行高来调整
块级按钮
btn-block