boot-1学习

Bootstrap-1学习

- Bootstrap介绍
- 一. 响应式布局(css3的技术)
- - - 1. 什么是响应式
    - 2. 响应式网页必要的要求
    - 3.移动设备的适配 --视口-- 这部分在pc端上没用
- 二.Bootstrap
- 1.起步
- 2.全局css

Bootstrap介绍

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

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

有boot的学习文档
有很多的业内技术学习文档
BootCDN

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

1. 什么是响应式

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

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

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

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

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

编写响应式布局

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

3.移动设备的适配 --视口-- 这部分在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倍（不缩放） --><!-- maximum-scale=1.0 视口最大缩放1倍 --><!-- user-scalable=0 用户不能缩放视口 --><!--最简方式--><meta name="viewport" content="width=device-width, initial-scale=1.0">

初学者, 尽量使用相对尺寸, 不要使用绝对尺寸, 尽量使用默认文档流+浮动+弹性, 不要使用定位
媒体查询
根据设备和屏幕尺寸不同, 使用不同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

起步
全局css
组件/js插件
定制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

**容器 **

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

按钮相关的代码

.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 块级按钮