Bootstrap前端框架
1.移动设备优先策略
- 基础的CSS是移动优先。优先设计更小的宽度
- 媒体查询。针对于平板电脑、台式电脑
- 渐近增强。随着屏幕大小的增加而添加元素
2.响应式布局
- 响应式布局：同一套页面可以兼容不同分辨率的设备
- 栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
- 容器分类：相当于table
- container：两边留白
- container-fluid：每一种设备都是100%宽度
- 定义行：相当于之前的tr ，样式：row
- 定义元素：指定该元素在不同设备上，所占的格子数目。样式：col-设备代号-格子数目
- 设备分类：
- xs：超小屏幕 手机
- sm：小屏幕 平板
- md：中等屏幕 桌面显示器、笔记本
- lg：大屏幕 大型显示器、台式机
- 注意：
- 一行中如果格子数目超过12，则超出部分自动换行
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行
导入JS插件的坑
错误代码
无论你怎么点按钮。都不会弹出窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
- Bootstrap所有Javascript插件都依赖于jQuery
- 必须先导入jQuery.js，后导入bootstrap.js
正确代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--Bootstrap的所有JavaScript插件都依赖于jQuery，必须放在最前-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--加载Bootstrap所有JavaScript插件-->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
