今日内容
1. Bootstrap入门
Bootstrap-前端全局样式和效果的框架
使用此框架之前需要提前导入使用Bootstrap的环境
1)导入Bootstrap全局CSS样式
<link href="css/bootstrap.min.css" rel="stylesheet">
2)导入JQuery核心标签库
<script src="js/jquery-3.4.1.min.js"></script>
3)导入Bootstrap的js文件
<script src="js/bootstrap.min.js"></script>
2. Bootstrap布局和栅格系统
布局和栅格
boostrap布局都需要使用布局容器和栅格
boostrap页面布局
1)有一个容器 container(固定宽度)/container-fluid(100%宽)
2)在容器里面定义行 class="row"
栅格系统---一行有12列(格子数量)
列的定义
class="col-设备编号-所占的格子数量"
超小屏幕 手机 (<768px)---设备编号 class="col-xs-"
小屏幕 平板 (≥768px) ----设备编号 class="col-sm-"
中等屏幕 桌面显示器 (≥992px)---设备编号 class="col-md-"
大屏幕 大桌面显示器 (≥1200px) ---设备编号 class="col-lg-"
理解
就是在一个固定宽度的容器中,将每一行分为12列,根据需要不同,来分配每个内容占用几列
3. Bootstrap表格样式
表格样式
boostrap表格样式基本样式效果
-class="table"
class="table-striped"
-斑马条纹状样式
class="table-bordered"
-为表格和单元个增加边框样式
class="table-hover"
-每一行对鼠标悬停状态作出响应
clss="table-condensed"
-类可以让表格更加紧凑,单元格中的内补(padding)均会减半
将任何.table元素包裹在.table-responsive元素内,即可创建响应式表格
-其会在小屏幕设备上(小于768px)水平滚动
-当屏幕大于 768px 宽度时,水平滚动条消失
理解
在table-responsive下创建的表格可以随着页面的变化而变化!
-扩大就恢复正常
-缩小就改变布局为适应屏幕
4. Bootstrap表单和按钮
表单--在官网查看API
class="form-horizontal"
-水平排列表单
class="form-group"
-将label元素(表单组件中指定名称)和表单组件(input/sleect/textarea文本域)
-放在一个表单组中
按钮
class="btn btn-default"
默认按钮样式--没有颜色
预定义的按钮样式效果
class="btn btn-primary"
-深蓝色
class="btn btn-success"
-成功标识的颜色
class="btn btn-warning"
-警告的颜色标识
class="btn btn-danger"
-危险标识
5. Bootstrap图片
图片
class="img-rounded"
-四个角带有圆角弧度的图片
class="img-circle"
-圆形图片
class="img-thumbnail"
-相框图片
class="img-responsive"
-让图片响应式布局 ,宽度100%宽,高度auto
理解
类似于表格的自适应table-responsive
6. Bootstrap分页组件
分页组件
nav aria-label="Page navigation" 分页组件
举例
<nav aria-label="Page navigation">
<ul class="pagination">
<!--上一页-->
<!--禁用状态-->
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!--默认在第一页,激活状态-->
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li class="disabled">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>