一、概述
①当下最流行的前端UI框架(有预制界面组件),组件简洁大方,代码规范精简,界面自定义性强,可以有效提高web开发效率
②有自己的生态圈,不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单,提高了开发的效率。
③虽然界面组件样式已经定义好了,但是扩展性相对较强,也就是说我们还可以自定义,修改默认样式
二、版本
①2.x.x 停止维护,兼容性好,但是代码不够简洁,功能不够完善。
②3.x.x 目前使用最多,稳定,但是放弃了IE6-IE7,对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。
③4.x.x 测试阶段,更偏响应式,移动设备。
三、文档
①英文文档:https://getbootstrap.com/docs/4.1/getting-started/introduction/
②中文文档:bootstrap中文网 、菜鸟教程 、css88
四、基本模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--要求当前网页使用浏览器最高版本的内核来渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"> <!-- 优先加载和浏览器解析:上述3个meta标签*必须*放在最前面,任何其他内容都必须跟随其后! --> <title>Bootstrap基本模板</title> <!-- 引入Bootstrap css文件 :Bootstrap 核心样式--> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- 引入HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- 引入jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="lib/jquery/jquery.js"></script> <!-- 引入 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="lib/bootstrap/js/bootstrap.js"></script> </body> </html>
五、normalize.css
①bootstrap为了增强跨浏览器表现的一致性,我们使用了Normalize(是一个css样式重置库)
②normalize.css和自己写的reset.css的异同:
- 都是重置样式库,都是为了增强浏览器的表现一致性
- 但是normalize不会重置已经一致的元素
- 比如:ul,reset.css 因为需求会设置list-style:none ,但是normalize.css 不会重置ul样式 ,因为本身已经在每个浏览器表现一致的元素
六、布局容器
①响应式容器:固定宽度
扫描二维码关注公众号,回复:
2289806 查看本文章
<div class="container"> ... </div>
②流式布局容器:全屏幕宽度的容器使用, 填满你视口的整个宽度
<div class="container-fluid"> ... </div>