一.BootStrap
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
中文镜像网站：http://www.bootcss.com
英文官网 http://getbootstrap.com
用于开发响应式布局、移动设备优先的 WEB 项目。
1.使用boot
1.创建boot02文件夹，在boot02中创建css和js文件，把4个文件复制进去，使用ws open boot02
2.在ws中new 新项目 boot02,在boot02中创建css和js，把4个文件复制进去
2.全局css样式,1rem=16px
1.按钮相关class
基本类 btn
btn-danger 危险红色
btn-success 成功绿色
btn-warning 警告黄色
btn-info 信息蓝色
btn-primary 主要
btn-secondary 次要
btn-dark" 深色
btn-light 浅色
不同边框按钮
btn-outline-danger 红色边框
btn-outline-success 绿色边框
btn-outline-info 蓝色边框
…其他颜色都适用
不同按钮大小
btn-lg 大按钮
btn-sm 小按钮
btn-block 块级按钮
btn-link 链接按钮
2.图片相关class
rounded 圆角
rounded-circle 圆角50%
img-thumbnail 缩略图
img-fluid 响应式图片，图片会缩放，但是不会超过原始大小
3.文字相关class
字体颜色
text-danger/success/info/primary/warning…
字体的粗细
font-weight-bold/light/normal
文字对齐方式
text-left/right/center/justify
大小写/首字母大写
text-uppercase/lowercase/capitalize
字体大小 .h1~.h6
4.列表相关class
list-unstyled 去除标识符
基本类 ul.list-group 列表组
li.list-group-item 列表项
acitve 列表项激活状态
disabled 禁用状态
列表项颜色
list-group-item-success/danger/warning…
5.table相关的样式
table类名，让后面的td有上边框
table-bordered 带边框的表格
table-striped 隔行变色
table-hover 带悬停效果的表格
table-primary/danger/warning。。。。 表格颜色
响应式表格，用于table父元素上
table-responsive-sm/lg/md/xl
3.辅助类
1.边框
border 基本类,或者border-top/right/bottom/left
颜色 border-danger/warning/info…
清除边框 border-0 border-top-0。。。。。
倒角 rounded
清除倒角 rounded-0
2.显示
visible 显示
invisible 隐藏
3.背景颜色
bg-danger/warning/success
4.浮动
float-left/float--left
float-right/float--right
代表屏幕分辨率：xl/lg/md/sm
解决高度坍塌，父元素中添加clearfix
5.尺寸
w-/h-*
:25/50/75/100
25%，50%，75%，100%
6.内外边距
m-/mt-/mr-/mb-/ml-
p-/pt-/pr-/pb-/pl-*
:0 / 1 / 2 / 3 / 4 / 5
0 0.25rem 0.5rem 1rem 1.5rem 3rem
4.栅格布局(重点**********************************)
1.web文本页面布局方法(三种)
table div+css Boot中栅格
优点 简单，易控制 语义正确，渲染效率高 简单，容易控制，语义正确，渲染效率高，支持响应式
缺点 语义错误
渲染效率低 代码编写和控制比较麻烦 页面非常复杂，不推荐使用
使用栅格布局
1.最外层需要使用容器
container 定宽容器 （容器宽度写死了）
container-fluid 变宽容器 (容器宽度随着父元素改变)
2.容器中声明行 row (每一行等分12个单元格)
3.行中声明列 col col-n （n指的是n/12）
4.针对不同屏幕的需求使用不同的列名
col-xl-1/2/3/…12
col-lg-1/2/3/…12
col-md-/1/2/3/4…12
col-sm-1/2/3/4…12
xl：Extra large 超大 >=1200px
lg:large 大PC屏 >=992px
md：medium 中屏pad >=768px
sm:small 小屏 >=576px
xs:Extra small 超小屏
col不添加数字，自动处理布局
每一行的每个列宽度相等
练习：一行一列，第一行匹配小屏50%
第二行，匹配中屏50%
第三行，匹配大屏50%
5.注意：不同屏幕下的列有适应性问题
col-xl-* 只在xl下有效
col-lg-* 在lg/xl下有效
col-md-* 在md/lg/xl有效
col-sm-* 在sm/md/lg/xl 有效
总结：列可以在当前屏幕以及更大的屏幕下有效
作业：
1.栅格完成下图
2栅格完成下面样式
原文地址：https://blog.csdn.net/lb569484787/article/details/100622093
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。