Bootstrap入门
背景
- 传统方式是使用div+css实现响应式布局，为了适配各种设备，会写大量的css代码，导致开发效率降低，顺应时代诞生了bootstrap
概念
- bootstrap是一个能够快速搭建响应式布局的前端ui框架
特点
- 内置了很多的组件，比如轮播图、标签页、分页、表单等等，用户可以直接使用
- bootstrap提供了一套用于构建响应式布局的栅格系统，用于快速搭建一个适应性良好的页面布局
- bootstrap有一些内置组件不易修改，本身用了JavaScript来实现，比如轮播图
版本
- 目前国内常用版本是3.3.7，版本稳定。内部使用了浮动布局来实现响应式
- 国外常用版本是4.6版本，以及国内未来普及的版本。内部使用了弹性容器来实现响应式布局
- 4.6不兼容IE低版本
bootstrap3与bootstrap4的区别
| Bootstrap3 | Bootstrap4 |
|---|---|
| Less预处理 | Sass预处理 |
| 4种栅格类 | 5种栅格类 |
| 使用px为单位 | 使用rem和em为单位（除部分margin和padding使用px） |
| 使用push和pull向左右移动 | 偏移列通过offset-类设置 |
| 使用float的布局方式 | 选择弹性盒模型（flexbox） |
Bootstrap3的4种栅格：
- 特小（col-xs-） 适配手机(<768px)
- 小（col-sm-） 适配平板(≥768px)
- 中（col-md-） 适配电脑(≥992px)
- 大（col-lg-） 适配宽屏电脑(≥1200px)
Bootstrap4的5种栅格：
- 特小（col-）(<576px)
- 小（col-sm-）(≥576px)
- 中（col-md-）(≥768px)
- 大（col-lg-） (≥992px)
- 特大（col-xl-）（≥1200px）
Bootstrap4特点：
- 新增网格层适配了移动端；
- 全面引入ES6新特性（重写所有JavaScript插件）；
- css文件减少了至少40%；
- 所有文档都用Markdown编辑器重写；
- 放弃对IE8的支持
引入
- 引入css
- 官网下载对应版本的生产版本的bootstrap文件
- 页面
<head>中通过<link>引入bootstrap.min.css
- 引入jQuery以及js
- jquery:一个JavaScript框架，主要用于减少页面中的JavaScript代码，bootstrap的组件使用了jQuery，至少引入jQuery3.0以上版本
- 除了jQuery以外，还需要引入
bootstrap.min.js以及bootstrap.bundle.min.js
js文件推荐在body标签中使用<script>引入：
<script src="jquery文件地址"></script>
<script src="bootstrap.min.js文件地址"></script>
<script src="bootstrap.bundle.min.js文件地址"></script>
- 一个标准的使用bootstrap页面初始代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 设置浏览器的兼容模式版本(让IE使用最新的渲染引擎工作) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 声明在移动端端所用到的属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>微金所</title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!-- 条件注释的作用：
判断条件满足时，就会执行注释中的HTML代码
条件不满足时，就会当做注释
-->
<!--
html5hiv: 让浏览器可以识别HTML5的新标签
respond: 让低版本浏览器可以使用css3的媒体查询
-->
<!-- [if lt IE 9]>
<script src="lib/html5shiv/html5shiv.js"></script>
<script src="lib/respond/respond.src.js"></script>
<![endif] -->
<!-- 自己写的CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- 必须引入，位置必须这样 -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 自己写的js文件 -->
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
两种常见使用流程
- 单独使用css：页面只使用栅格系统或者不需要js的组件，只需要引入css即可
- 如果需要使用一些带js的插件，就必须引入js文件
栅格系统
-
概念：凭借12列系统、5个默认响应层、sass变量和混合以及数十个预定义类使用强大的移动优先flexbox网格构建各种形状和大小的布局
-
思想：内置了很多的用于布局的预定义类，我们需要根据它所定义的规范去使用内置的class来搭建页面
-
主要内容
-
12列系统
- bootstrap会将一行看成12列，12列由该行的内容进行分配
-
布局的HTML架构
-
最外层容器会设置
.container让容器本身有自适应效果 -
container容器内部只允许有.row的直接子标签- 每个
.row的容器内部采用12列系统 - 12系统内的标签可以通过bootstrap所提供的内置的类来进行分配列数
- 可以设置一行在不同屏幕宽度下占据的列数
- 特大（1140px）：一行显示2个（
col-xl-6） - 大（960px）：一行显示3个（
col-lg-4） - 中（720px）：一行显示6个（
col-md-2） - 小（540px）：一行显示2个（
col-sm-6） - 特小：默认是一行一个（
clo-12）
- 特大（1140px）：一行显示2个（
- 每个
-
-
如果希望每一行的内容列数自动分配，可给.row的每个直接子标签添加
.col
-
| 超小 <576px | Small ≥576px | Medium ≥768px | Large ≥992px | 特大 ≥1200px | |
|---|---|---|---|---|---|
| 最大容器宽度 | 无（自动） | 540像素 | 720 像素 | 960 像素 | 1140 像素 |
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 列数 | 12 | 同左 | 同左 | 同左 | 同左 |
| 天沟宽度 | 30px（每列15px） | 同左 | 同左 | 同左 | 同左 |
| 可嵌套 | 是的 | 同左 | 同左 | 同左 | 同左 |
| 列排序 | 是的 | 同左 | 同左 | 同左 | 同左 |
常见组件
按钮
<button type="button" class="btn btn-primary">
Primary
</button>
<button type="button" class="btn btn-info">
Primary
</button>
<button type="button" class="btn btn-danger">
Primary
</button>
最低0.47元/天 解锁文章
5853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
