一、Bootstrap简介
Bootstrap是Twitter于2011年8月在Github上发布的的开源产品,目前最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备有限的WEB项目。将常见的CSS布局组件和JavaScript插件进行了整合并完善的封装,能让没有经验的前端工程师后后端工程师都迅速掌握和使用,大大提高开发效率。
二、常用版本介绍
目前使用较广的是版本2、3和4,其中2的最新版本的是2.3.2,3的最新版本是3.4.1,4的最新版本是4.6,这里主要说一下4版本,在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下方面:
- 从 Less 迁移到 Sass
- 改进网格系统
- 缺省弹性框支持
- Dropped wells, thumbnails, and panels for cards
- 合并所有 HTML resets 到一个新的模块中:Reboot
- 全新自定义选项
- 不再支持 IE8
- 重写所有的 JavaScript 插件
- 改进工具提示和 popovers 的自动定位
- 改进文档
- 其他大量改进
三、bootstrap有什么优点?
浏览器支持:
- 目前主流的浏览器均支持bootstrap
容易上手:
- 只要您具备 HTML 和 CSS 的基础知识,就可以学习使用Bootstrap。
快速开发:
- bootstrap给我提供了大量的样式,布局解决方案和插件库,可以让程序员从基本的样式设计和调试上解放,快速搭建项目.同时bootstrap还给我们提供了大量的常用网页组件,可以让我们直接复制代码运行即可
响应式设计:
- Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
注意:从 Bootstrap 3开始,框架包含了贯穿于整个库的移动设备优先的样式。
四、bootstrap下载
官网:http://getbootstrap.com/
中文网:http://www.bootcss.com
由于此插件基于Jquery,所以必须引入jQuery
Bootstrap:最小化完整版本
Source code:包含了Less、Javascript的source和一些fonts库
HTML标准模版
使用Bootstrap的前提(按优先级)
-
标准HTML5文档结构
-
移动设备优先
-
Bootstrap css引入
-
Jquery引入
-
Bootstrap js引入
<!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"> <title>bootstarp</title> <!--Bootstrap--> <link rel="stylesheet" href="css/bootstrap.min.css"> <!--jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边)--> <script src="js/jquery-3.5.1.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> </head> <body> </body> </html>