一.BootStrap
1.UI框架
- 包含CSS,JS特效插件的工具集,快速开发网页
- 经典的UI框架:BootStrap,JQueryUI,MeiziUI…
2.BootStrap
- 用于生产环境(CSS\JavaScript)
- 源码(LESS) (LESS是CSS预处理器)
- SASS(SASS也是CSS预处理器)
3.CDN服务
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
4.响应式布局
4.1手机屏幕的分辨率
- 现在绝大部分手机视网膜屏幕,有物理分辨率和渲染分辨率
- iphone8 物理分辨率750 * 1334 渲染分辨率:375 * 667
- 手机浏览器为了让没有做响应式处理的网页能够正常显示,自动进行缩放.视口的大小通常会设置位980px
4.2媒体查询
@media (min-width) {
选择器 {
}
选择器 {
}
}
媒体特性:
min-width
min-height
max-width
max-height
width
height
......
4.3 视口
让手机浏览器无法进行缩放操作
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
5.布局
5.1 栅格系统
.container
<768px 100% 超小屏幕 xs
768px<= <992 750px 小屏幕 sm
992px<= <1200px 970px 中等屏幕 md
>=1200px 1170px 大屏幕 lg
行和列
行 .row
列 col-xs-* col-sm-* col-md-* col-lg-*
把父元素分为12份,指定多少份就可以了
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">文本内容</div>
</div>
</div>
实例:流式布局容器
将最外面的布局元素 .container
修改为 .container-fluid
,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid">
<div class="row">
...
</div>
</div>
5.2 表格
.table 表格
.table-striped 斑马条纹
.table-bordered 边框
.table-hover 鼠标悬停
.table-condensed 紧缩表格
.sucess 标识成功或积极的动作
.ingfo 标识普通的提示信息或动作
.active 鼠标悬停在行或单元格上时所设置的颜色
.wranning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
5.3表单
.form-horizontal 水平排列表单
.form-group
.form-control
.control-label