北京网站建设公司网站优化,wix和wordpress,微信营销软件收费排行榜,好的做蛋糕网站Bootstrap-1学习Bootstrap介绍一. 响应式布局(css3的技术)1. 什么是响应式2. 响应式网页必要的要求3.移动设备的适配 --视口-- 这部分在pc端上没用二.Bootstrap1.起步2.全局cssBootstrap介绍
bootrap简称boot,是一个简洁的,直接的,强悍的,直接的一个框架,这是官方对它的描述.主…
Bootstrap-1学习Bootstrap介绍一. 响应式布局(css3的技术)1. 什么是响应式2. 响应式网页必要的要求3.移动设备的适配 --视口-- 这部分在pc端上没用二.Bootstrap1.起步2.全局cssBootstrap介绍
bootrap简称boot,是一个简洁的,直接的,强悍的,直接的一个框架,这是官方对它的描述.主要用于响应式和移动端的布局.bootstrap是封装了一些常用的css样式和js脚本(也就是说已经帮我们写好了,用的时候引用就可以了),例如一些滚动条,菜单,模态框,轮播图等等…
① 3个需要掌握的知识点: 媒体查询 栅格布局 scss ② bootstrap官网 bootstrap中文网 bootstrap英文网
有boot的学习文档有很多的业内技术学习文档BootCDN
一. 响应式布局(css3的技术)
1. 什么是响应式
响应式网页 Respomsive web page根据浏览网页的设备不同(设备: 硬件, 尺寸, 分辨率, 解析度, 横竖屏…)自动改变页面布局, 图片文本效果, 不影响用户浏览体验
2. 响应式网页必要的要求
布局尽量不要固定容器的尺寸, 尽量使用默认文档流浮动弹性的写法布局(针对初学者)文本图片大小随容器大小改变媒体查询技术(css3提供)如何测试响应式网页
我们开发时一般使用chrome自带的模拟软件
使用真实设备测试使用模拟软件测试chrome自带的模拟软件优点:测试效果真实可靠优点: 便宜, 方便优点: 极其方便缺点:成本高, 测试任务量巨大缺点: 测试效果有限,需要进行一步验证测试效果极其有限
编写响应式布局
响应式布局 ----- 适配移动设备复杂页面不适合使用响应式
3.移动设备的适配 --视口-- 这部分在pc端上没用
移动设备的适配代码(一般会自动生成) !--全写方式--
meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0, user-scalable0 !-- widthdevice-width 视口宽度为设备宽度 --!-- initial-scale1.0 视口初始化缩放1倍不缩放 --!-- maximum-scale1.0 视口最大缩放1倍 --!-- user-scalable0 用户不能缩放视口 --!--最简方式--meta nameviewport contentwidthdevice-width, initial-scale1.0初学者, 尽量使用相对尺寸, 不要使用绝对尺寸, 尽量使用默认文档流浮动弹性, 不要使用定位媒体查询 根据设备和屏幕尺寸不同, 使用不同css样式, 忽略其他css样式
媒体: 设备 screen (pc,pad,phone)/print/TV屏幕尺寸超小屏 xs576px 屏幕尺寸小屏 sm768px 屏幕尺寸 576px中屏 md992px 中屏幕 768px大屏 lg1200px 屏幕尺寸 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 nameviewport contentwidthdevice-width,initial-scale1按照顺序引入css和js文件link relstylesheet hrefcss/bootstrap.cssscript srcjs/jquery.min.js/scriptscript srcjs/popper.min.js/scriptscript srcjs/bootstrap.min.js/script所有boot的代码写在container中div classcontainer/div2.全局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 块级按钮
图片的相关代码
rounded 圆角rounded-circle 50%圆角img-thumbanil 在边框的和内边距的缩略图img-fluid 图片可以缩放, 但是最大不能超过原始尺寸
文本相关
① 文本颜色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/justifytext-*-left/center/right *.sm/md/lg/xl 但是boot没有封装相应的justify
列表相关
列表组ul.list-group 创建列表组 弹性 , y轴.list-unstyle 去掉列表示项 li.list-gtoup-item-danger/warning 列表项颜色 .active 选中.disabled 禁用
表格相关
table 宽100% 对table本身和后代做了样式table-bordered 给本身和后代th, th添加边框tbale-striped 隔行变色, 在奇数行上添加一层0.05的黑纱table-hover 鼠标悬停, 给tr添加0.075的黑纱
辅助类(所有元素都能用的样式被封装成了辅助类)
① 边框borderborder-top/right/bottom/leftborder-0border-top/right/bottom/left-0border-ingo/danger/warning② 浮动float-*-left/right/none *:sm/md/lg/xlclearfix 父元素解决高度坍塌③ 背景颜色bg-transparent/white/danger④ 圆角rounded:0.25rem 的圆角rounded-top/right/bottom/leftrounded-circlerounded-0⑤ 内外边距的封装m/mt/mr/mb/ml/mx/my - 0/1/2/3/4/5/auto 49m/mt/mr/mb/ml/mx/my-*- 0/1/2/3/4/5/auto *:sm/md/lg/xl 196p/pt/pr/pb/pl/px/py/- 0/1/2/3/4/5 42p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 *:sm/md/lg/xl 1680:01:0.25rem2:0.5rem3:1rem4:1.5rem5:3rem⑥ 尺寸w-25/50/75/100h-25/50/75/100
