boot-1学习

Bootstrap介绍

bootrap简称boot,是一个简洁的,直接的,强悍的,直接的一个框架,这是官方对它的描述.主要用于响应式和移动端的布局.bootstrap是封装了一些常用的css样式和js脚本(也就是说已经帮我们写好了,用的时候引用就可以了),例如一些滚动条,菜单,模态框,轮播图等等…

① 3个需要掌握的知识点: 媒体查询+ 栅格布局+ scss
② bootstrap官网
bootstrap中文网
bootstrap英文网

1. 有boot的学习文档
2. 有很多的业内技术学习文档
3. BootCDN

一. 响应式布局(css3的技术)

1. 什么是响应式

• 响应式网页 Respomsive web page
• 根据浏览网页的设备不同(设备: 硬件, 尺寸, 分辨率, 解析度, 横竖屏…)
• 自动改变页面布局, 图片文本效果, 不影响用户浏览体验

2. 响应式网页必要的要求

1. 布局尽量不要固定容器的尺寸, 尽量使用默认文档流+浮动+弹性的写法布局(针对初学者)
2. 文本图片大小随容器大小改变
3. 媒体查询技术(css3提供)
4. 如何测试响应式网页

• 我们开发时一般使用chrome自带的模拟软件

使用真实设备测试	使用模拟软件测试	chrome自带的模拟软件
优点:测试效果真实可靠	优点: 便宜, 方便	优点: 极其方便
缺点:成本高, 测试任务量巨大	缺点: 测试效果有限,需要进行一步验证	测试效果极其有限

5. 编写响应式布局

• 响应式布局 -----> 适配移动设备
• 复杂页面不适合使用响应式

3.移动设备的适配 --视口-- 这部分在pc端上没用

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 视口初始化缩放1倍（不缩放） -->
			<!-- maximum-scale=1.0 视口最大缩放1倍 -->
			<!-- user-scalable=0 用户不能缩放视口 -->
  <!--最简方式-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 初学者, 尽量使用相对尺寸, 不要使用绝对尺寸, 尽量使用默认文档流+浮动+弹性, 不要使用定位
3. 媒体查询
   根据设备和屏幕尺寸不同, 使用不同css样式, 忽略其他css样式

媒体: 设备 screen (pc,pad,phone)/print/TV	屏幕尺寸
超小屏 xs	576px > 屏幕尺寸
小屏 sm	768px > 屏幕尺寸 >= 576px
中屏 md	992px > 中屏幕 >= 768px
大屏 lg	1200px > 屏幕尺寸 >= 992px
超大屏 xl	屏幕尺寸>=1200px

案例:

 @media  (min-width: 576px) and (max-width:767.99px){
            .d1{
                font-size: 42px;
                color: 0ff;
                background-color: #faa;
            }
        }

媒体查询代码优化
可以不写设置的条件

 @media  (min-width: 576px) and (max-width:767.99px){
            .d1{
                font-size: 42px;
                color: 0ff;
                background-color: #faa;
            }
        }
/* 按照boot的写法，小屏幕在大屏幕没有写的情况下，向上兼容 */
@media (min-width:576px) {} /*sm  md  lg  xl*/
@media (min-width:768px) {} /* md  lg  xl*/
@media (min-width:992px) {} /* lg  xl*/
@media (min-width:1200px) {} /* xl*/

二.Bootstrap

1. 起步
2. 全局css
3. 组件/js插件
4. 定制SCSS

1.起步

• 设置视口

		<meta name="viewport" content="width=device-width,initial-scale=1">
		按照顺序引入css和js文件
		<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>
		所有boot的代码，写在container中
		<div class="container">

		</div>

2.全局css

• boot 不支持超小屏
• boot 封装的所有响应式向上兼容
• boot 默认 1rem = 16px

1. **容器 **

• .container 定宽容器, 在不同屏幕尺寸下, 设置了最大宽度
• .container-fluid 变宽容器
• 所有的boot代码,都必须写在容器中

2. 按钮相关的代码

• .btn 按钮的基本类 , 封装了按钮相关的42行代码, 文本边框,背景,伪类
• 按钮颜色 btn-danger红色/btn-info信息色/btn-primary主要/btn-secondary次要/btn-dark深色/btn-light浅色/btn-success绿色/btn-warning黄色
• 镂空按钮 btn-outline-danger/warning/success…
• 按钮大小 .btn-lg大/.btn-sm小/
• .btn-block 块级按钮

3. 图片的相关代码

• rounded 圆角
• rounded-circle 50%圆角
• img-thumbanil 在边框的和内边距的缩略图
• img-fluid 图片可以缩放, 但是最大不能超过原始尺寸

4. 文本相关

• ① 文本颜色
• text-muted/danger/info…
• ② 文本大小写
• text-lowercase/小写/text-uppercase/大写/ text-capitalize/首字母大写/
• ③ 文本粗细
• .font-weight-light/300/normal/400/bold/700/
• ④字体样式
• .font-italic 斜体
• ⑤字号大小
• .h1~.h6
• ⑥ 文本水平对齐方式
• text-left/center/right/justify
• text-*-left/center/right *.sm/md/lg/xl 但是boot没有封装相应的justify

5. 列表相关

• 列表组
• ul.list-group 创建列表组 弹性 , y轴
• .list-unstyle 去掉列表示项

• li.list-gtoup-item-danger/warning 列表项颜色

• .active 选中
• .disabled 禁用

6. 表格相关

• table 宽100% 对table本身和后代做了样式
• table-bordered 给本身和后代th, th添加边框
• tbale-striped 隔行变色, 在奇数行上添加一层0.05的黑纱
• table-hover 鼠标悬停, 给tr添加0.075的黑纱

7. 辅助类(所有元素都能用的样式被封装成了辅助类)

• ① 边框
• border
• border-top/right/bottom/left
• border-0
• border-top/right/bottom/left-0
• border-ingo/danger/warning
• ② 浮动
• float-*-left/right/none *:sm/md/lg/xl
• clearfix 父元素解决高度坍塌
• ③ 背景颜色
• bg-transparent/white/danger
• ④ 圆角
• rounded:0.25rem 的圆角
• rounded-top/right/bottom/left
• rounded-circle
• rounded-0
• ⑤ 内外边距的封装
• m/mt/mr/mb/ml/mx/my - 0/1/2/3/4/5/auto 49
• m/mt/mr/mb/ml/mx/my-*- 0/1/2/3/4/5/auto *:sm/md/lg/xl 196
• p/pt/pr/pb/pl/px/py/- 0/1/2/3/4/5 42
• p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 *:sm/md/lg/xl 168
• 0:0
• 1:0.25rem
• 2:0.5rem
• 3:1rem
• 4:1.5rem
• 5:3rem
• ⑥ 尺寸
• w-25/50/75/100
• h-25/50/75/100