bootstrap_响应式_CSS

一.响应式布局

1.什么是响应式布局

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

2.响应式网页必须做下面几件事

①布局，不能固定元素宽度，必须是流式布局（默认文档流+浮动） ②文字和图片大小随容器的大小改变 ③媒体查询技术 响应式网页存在的问题：代码复杂程度几何性的增加 复杂玩网页，不适合使用响应式

3.如何测试响应式网页

①使用真实设备（好处：真实可靠，缺点：成本高，测试任务巨大） ②使用第三方模拟软件测试（好处：不需要太多真实设备测试方便，缺点：测试效果有限，有待进一步验证） ③使用chrome等浏览器自带的模拟软件（好处：简单方便，缺点：测试效果十分有限，需要进一步验证）

4.编写响应式布局（重点****）

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 不能 最简洁的写法：

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){ } 语法总结： @media screen and (min-width:768px) and (max-width:991px){        .content { background:#000;color:#fff; } }

二:BootStrap

boot给我们封装好很多的样式，以类名的形式让我们调用 但是在项目中，对于很多样式我们还是需要手写样式和媒体查询

BootStrap内容分为5部分 1.如何使用boot 2.全局css 3.组建 4.js插件 5. sass 定制 6.boot项目

1.如何使用boot

设置视口    导入css文件   导入js文件（顺序有要求 query-popper-bootstrap）

2.全局CSS

  container：定宽容器，每种不同分辨率下，给了写死的max-width值，
           boot支持4种分辨率：  xl-lg-md-sm （超大屏，大屏，中屏，小屏）
                 boot 的默认字号大小是1rem， 1rem=16px

  container-fluid：变宽容器，根据不同的设备分辨率，宽度为他的100%

①.按钮相关的class

              .btn 基本类，所有的按钮，都需要添加class.btn

按钮颜色		不同边框的按钮
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的后代布局
.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... 边框颜色

2.浮动 float-xl/lg/md/sm-left/right/none 响应式浮动 clearfix 清除浮动（解决高度坍塌），写在父元素

3.显示     visible/invisible  显示/隐藏

4.背景颜色     bg-danger/warning/success/primary.....

5.圆角 rounded/rounded-0 圆角0.25rem/去掉圆角 rounded-top/right/bottom/left  一个方向的圆角设置 rounded-circle 50%

6.内外边距 paddin p-n 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 margin 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 m-auto 水平居中  m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5 外边距  0  0.25    0.5   1   1.5   3 p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距 *:xl/lg/md/sm mt-lg-3 mt-sm-1

7.尺寸     宽度： w-n   (n:25/50/75/100)      mw-100  (max-width)        高度： h-n    (n:25/50/75/100)      mh-100  (max-height) 如果需要其它尺寸，需要手写css

⑦.栅格布局

1．页面中的布局方式（一般三种）

table布局	div+css	Boot中的栅格布局
简单，易控制	语义正确，渲染效率高	简单，易控制，语义正确，渲染效率高，支持响应式
语义错误，渲染效率低	控制起来很麻烦	不适用于复杂的页面

2.栅格的使用

1.必须要放在.container或者.container-fluid中 2.每一行都是一个row（弹性，主轴是x，可以换行，左右-15px外边距） 3.每一个col自带15px内边距

3.响应式栅格布局

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

4.不同屏幕尺寸，向上兼容

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

5. 使用.col类

使用.col类，不添加数字时，自动平均分配占地宽度， 每个col平均分配空间，col个数超过12个也平均分配 使用场合：在一行内，元素需要横向显示，元素个数不能被12整除

6.列偏移

offset-*-n    源码就是在操作左外边距margin-left   *:xl/lg/md/sm   n:0~11

7.栅格嵌套

在一个.col中再写一个row

⑧弹性布局

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

1. 主轴方向

flex-row/column/row-reverse/column-reverse 响应式设置  flex-*-row/column/row-reverse/column-reverse   *:xl/lg/md/sm

2.交查轴方向

justify-content-start/center/end/between/around 响应式设置 justify-content-*-start/center/end/between/around        *:xl/lg/md/sm

⑨表单

1.表单元素的排列方向

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

2.表单控件元素样式

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  块级，有上下外边距

Tips：form-inline可以代替row ，form-inline没有-15px外边距