Bootstrap：
- 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
- 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码
快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面，引入必要的资源文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--设置浏览器兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- 引用Bootstrap文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) （相当于引用jq文件）-->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
响应式布局
- 同一套页面可以兼容不同分辨率的设备。
-
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
-
步骤：
- 定义容器。相当于之前的table、
- 容器分类：
- container：两边留白
- container-fluid：每一种设备都是100%宽度
- 容器分类：
- 定义行。相当于之前的tr 样式：row
- 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
- 设备代号：
- xs：超小屏幕 手机 (<768px)：col-xs-12
- sm：小屏幕 平板 (≥768px)
- md：中等屏幕 桌面显示器 (≥992px)
- lg：大屏幕 大桌面显示器 (≥1200px)
- 设备代号：
* 注意： 1. 一行中如果格子数目超过12，则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。 4. ## CSS样式和JS插件 - 定义容器。相当于之前的table、
-
全局CSS样式：
* 按钮：class="btn btn-default"
* 图片：
* class="img-responsive"：图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圆形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表单
* 给表单项添加：class="form-control"
2. 组件：
* 导航条
* 分页条
3. 插件：
* 轮播图
1.弹性布局
创建弹性容器 d-*-flex/d-*-inline-flex *:xl/lg/md/sm
设置主轴方向 flex-*-row: 水平排列
Column: 垂直排列
row-reverse: 水平倒序排列
column-reverse: 垂直倒序排列
项目在主轴上排列方式
justify-content-start:左对齐
End:右对齐
Center:居中排列
Between:平均分布
Around:平均分布,在两侧各有一段空白
设置优先级
.order-x: x为1~12
2.表单
1.表单元素排列方向，form标签的样式
.form-group 堆叠表单(垂直排列，全屏的宽度)
.form-inline 内联表单(水平方向排列)
2.样式类
.form-control 块级，W-100
.form-check 相对定位，向右1.25rem
.form-check-input 绝对定位，向左1.25rem
.form-check-label 字体颜色，下外边距
.form-text 块级，上外边距0.25rem
样式布局最小的结构--3层结构
<div class="dropdown">
<button></button>
<div class="dropdow-menu">
<a class="dropdow-item"></a>
</div>
</div>
.dropdown-toggle在按钮上画三角
. dropdown-header给菜单加标题
<div class=" dropdown-divider"></div> 给menu加分割线
disabled禁用
事件的写法
在button写自定义属性
data-toggle="dropdown"
数据切换的目标，是dropdow-menu元素
2.按钮组
在外包裹的div上添加类
.btn-group来创建按钮组
3.信息提示框
<h3>信息提示框</h3>
<div class="alert alert-danger alert-dismissible w-50">
<span data-dismiss="alert" class="close">×</span>
请检查用户信息
</div>
提示框基本类 .alert
设置颜色 .alert-danger/success/info......
.alert-dismissible .close 后代选择器设置.close的样式
事件
data-dismiss="alert" alert的数据驳回---取消显示提示框
4.导航
1.水平导航
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">秒杀</a></li>
</ul>
最基本结构 ul.nav>li.nav-item>a.nav-link
ul.nav--->让ul变成 弹性容器。所有的弹性属性都可以使用
justify-content-end/start/center/between/around
flex-column......
li.nav-item--->配合ul.nav-justified，让每个item等宽显示
a.nav-link 设置块级和内边距，hover,focus，disabled都设置了
2.选项卡导航
选项卡的部分
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">神奇女侠</a></li>
</ul>
在水平导航的基础上，增加了一个nav-tabs类
显示内容部分
<div class="tab-content">
<div class="tab-pane active">神奇女侠: </div>
<div class="tab-pane">蝙蝠侠: </div>
<div class="tab-pane">闪电侠: </div>
<div class="tab-pane">超人: </div>
</div>
div.tab-content对父级div没有任何修饰
当子元素出现.tab-pane---->让该元素display:none
当子元素出现.active--->让该元素display:block
给a标签添加事件
data-toggle="tab"
设置数据改变的目标div的id，href="#id"
<a data-toggle="tab" href="#d1" class="nav-link active" >神奇女侠</a>
给第一个显示的a标签添加.active
3.胶囊导航
把选项卡导航中 ul的类，改为nav-pills
a标签 data-toggle="pill"
5.导航栏
<div class="navbar navbar-expand bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">钢铁侠</a></li>
</ul>
</div>
结构 div.navbar>ul.navbar-nav>li.nav-item>a.nav-link
响应式导航栏，div.navbar-expand-* *:xl/lg/md/sm
可以在不同屏幕下，这是导航是横向还是纵向显示
可以给ul设置bg-color来控制导航栏背景颜色
6.折叠
<button data-toggle="collapse" class="btn btn-danger" data-target="#demo">折叠</button>
<div id="demo" class="collapse">Lorem</div>
结构
button 折叠没有要求样式
div.collapse---->让div display:none;
事件
在button写自定义属性 data-toggle="collapse"
改变数据的目标是div,所以给div#id
在button指向这个id data-target="#id"
另，a标签指向目标 <a href="#id"></a>
7.折叠导航栏
<h3>折叠导航栏</h3>
<div class="navbar navbar-expand-md bg-dark navbar-dark">
<!--1.不隐藏的标题-->
<a href="#" class="navbar-brand">Bootstrap中文网</a>
<!--2.小屏幕显示的折叠按钮-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#content">
<!--画三条线-->
<span class="navbar-toggler-icon"></span>
</button>
<!--3.折叠的导航-->
<div id="content" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Boot3中文文档</a></li>
</ul>
</div>
</div>
1.结构
<div>
//1.不隐藏的标题
<a>Bootstrap中文网</a>
//2.小屏幕显示的折叠按钮
<button>
//画三条线
<span></span>
</button>
//3.折叠的导航
<div>
ul.navbar-nav>li.nav-item>a.nav-link
</div>
</div>
2.完成折叠
<button data-toggle="collapse" data-target="#content">
<div id="content" class="collapse ">
<ul class="navbar-nav"></ul>
</div>
3.导航栏中的导航ul
ul.navbar-nav>li.nav-item>a.nav-link
4.导航栏，最外层div
<div class="navbar navbar-expand-md bg-dark ">
5.在最外层div中写类名 .navbar-dark/light
注意，这个类对当前div没有任何修饰，他的作用是让div内部的brand和按钮上的三条线变成浅色(深色)
6.完成不折叠的a标签brand
<a href="#" class="navbar-brand">Bootstrap中文网</a>
7.完成按钮三条线
<span class="navbar-toggler-icon"></span>
8.按钮在md以上的屏幕不显示
<button class="navbar-toggler"
9.折叠的导航正常显示
<div id="content" class="collapse navbar-collapse">
栅格布局
把布局看成一行，每一行等分12份
<div class="row">
<div class="col-4"></div>
....
</div>
使用栅格的注意事项
1.必须放在容器中使用container/container-fluid
2.row的本质，flex warp 主轴是x
3.row自带左右-15px外边距
4.所有col自带左右+15px内边距
③响应式栅格
<p>一行4个div，大屏1:1:1:1，中屏1:1和1:1,小屏1/1/1/1</p>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">1</div>
<div class="col-lg-3 col-md-6 col-sm-12">2</div>
<div class="col-lg-3 col-md-6 col-sm-12">3</div>
<div class="col-lg-3 col-md-6 col-sm-12">4</div>
</div>
编写响应式
在meta中声明viewport设置视口
<meta name="viewport"
content="width=device-width, 设置视口宽度为设备宽度
initial-scale=1.0, 设置初始缩放，1.0不缩放
maximum-scale=1.0, 允许缩放的最大倍率
user-scalable=0> 用户是否可以手动缩放
如果项目不在移动端运行，可以不定义视口
如果定义，最简方式为
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
①容器
boot的所有代码，都要放在容器中
.container 定宽容器，每种分辨率下，给了写死的max-width值
. container-fluid 变宽容器，容器宽度永远是body的100%
②按钮相关的class
.btn 基本类，所有按钮都需要添加的class
按钮颜色
.btn-danger 红色
.btn-warning 黄色
.btn-success 绿色
.btn-primary 主要 蓝色
.btn-info 信息 青色
.btn-secondary 次要 灰色
.btn-dark 深色
.btn-light 浅色
带边框的按钮
btn-outline-danger/warning/info....
按钮不同的大小和样式
btn-lg 大按钮
btn-sm 小按钮
btn-link 链接按钮
btn-block 块级按钮
③图片相关
rounded 圆角0.25rem
rounded-circle 50%圆角
img-thumbnail 缩略图 有内边距和边框
img-fluid 响应式图片，图片可以缩放，但是不能超过原始尺寸
④文字相关
text-muted/danger/info... 字体颜色
text-uppercase/lowercase/capitalize 大写，小写，首字母大写
font-weight-bold/light/normal 字体加粗，加细，普通
.h1~.h6 不同字号
text-*-left/center/right *:xl/lg/md/sm
响应式的字体水平对齐方式
text-justify 两端对齐，没有响应式
注意 boot的媒体查询，向上兼容，低屏幕往高屏幕兼容
sm 兼容sm md lg xl
md 兼容 md lg xl
lg 兼容 lg xl
xl 只管xl
⑤列表相关的class
列表要显示成列表组的时候，才添加的样式
需要父子级组合类的使用
ul.list-unstyled 去点，去除左内边距
ul.list-group>li.list-group-item 创建列表组和列表项
列表项颜色 .list-group-item-danger/warning/info....
激活项 .active
禁用项 .disabled
⑥table相关
.table 基本类 对table本身和后代布局
.table-bordered 一个带边框的表格，为自己和后代添加边框
table-danger/warning......表格背景颜色
table-striped 隔行变色
table-hover 带鼠标悬停效果
辅助类
①边框
.border 基本类
.border-danger/info...边框颜色
.border-top/right/bottom/left 单边设置
.border-top-0 取消某个方向的边框
.border-0 取消所有边框
②浮动
float-*-left/right/none *:xl/lg/md/sm
解决高度坍塌，父元素添加.clearfix
③显示
.visible 显示
.invisible 隐藏
④背景颜色
bg-danger/warning/info.....
⑤圆角
rounded 0.25rem圆角
rounded-circle 50%圆角
重写rounded需要添加！important
rounded-top/right/bottom/left 单方向设置两个角
⑥内外边距
m/mt/mr/mb/ml/my/mx-*-0/1/2/3/4/5/auto
p/pt/pr/pb/pl/py/px-*-0/1/2/3/4/5 没有auto
*：sm/md/lg/xl 内边距无auto
⑦尺寸
w-25/50/75/100 很多时候，需要自定义尺寸
h-25/50/75/100
mw-100 max-width:100%
mh-100 max-height:100%
没有min
具体可以参考BootStrap中文网添加链接描述
对编程感兴趣的朋友可以一起交流交流！禁止一切招生，广告！抠Q裙：947405150
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
