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 变宽容器 (容器