BootStrap入门
BootStrap简介
- Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
响应式布局
- 一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
原理
响应式的原理其实就是CSS3新特性的媒体查询，这个知识点可以回顾CSS基础知识
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width:768px){
/* 小于768：手机屏幕 */
body{
background-color: red;
}
}
@media screen and (min-width:768px) and (max-width:992px){
/* 平板：pad */
body{
background-color: green;
}
}
@media screen and (min-width:992px) {
/* 电脑 */
body{
background-color: indianred;
}
}
</style>
</head>
<body>
</body>
</html>
响应式优缺点
优点
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
缺点
- 兼容各种设备工作量大，效率低下
- 代码累赘，会出现隐藏无用的元素，加载时间加长
引入BootStrap
版本
BootStrap目前经历了4个大的版本2.x 、3.x 、4.x 、5.x，其中应用最多的版本是3.x
本套课程我们仍然讲解3.x版本
官网
中文网
下载
- css文件、字体图标文件、js文件
引入
- 使用bootstrap.min.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">/*链接css*/
<script src="./js/bootstrap.js"></script>/*链接js*/
</head>
<body>
</body>
</html>
支持性
温馨提示
在windows上， 我们支持到IE8-11版本
- jQuery：前端类库，简化了JS的应用
- BootStrap：前端框架，因为它提供了很多功能，比如轮播图
BootStrap全局CSS样式
BootStrap容器
深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践
HTML5 文档类型
- 首先确保是HTML5的版本
<!doctype html>
<html lang="en">
...
</html>
移动设备优先
- Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放，需要在
<head>之中为了确保适当的绘制和触屏缩放，需要在<head>之中添加 viewport 元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器
- Bootstrap 需要为页面内容和栅格系统包裹一个
.container容器。我们提供了两个作此用处的类。 - 注意，由于
padding等属性的原因，这两种容器类不能互相嵌套 .container类用于固定宽度并支持响应式布局的容器- 左右对等，都留有空白
<div class="container">
...
</div>
.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器- 留了一点内边距，留了一点点空白
<div class="container-fluid">
...
</div>
栅格系统基础
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
- 随着视口变化，内容也会自动缩放
简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的
