1.什么是Bootstrap?
Bootstrap是一组来自 Twitter,对HTML、CSS和JAVASCRIPT进行了封装的前端框架。Bootstrap对HTML、CSS和JAVASCRIPT进行了封装,使它们使用起来更方便。我们只需要使用它已经设定好的类,或规则,即可快速应用它提供的功能。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
2.Bootstrap的组成
全局 CSS 样式
bootstrap提供了很多具有特殊含义的类,基本的 HTML 元素均可以通过使用这些类,来获得bootstrap的增强效果(栅格系统)
组件
bootstrap提供了很多封装好的具有特定功能的模块。这些模块被叫做【组件】。无数可复用的组件让bootstrap对前端开发的支持性变得更好。(组件包括包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。)
javascript插件
javascript插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。
3.Bootstrap的使用
a.下载
点击bootstrap3中文文档,点击下载bootstrap3
b.下载“用于生产环境的”
下载完后它有如右三个文件夹
c.在html文档中引入bootstrap
a) bootstrap.min.css
b) bootstrap.min.js
c) 引入jquery代码
引入css中的“bootstrap.min.css”和js文件夹下的bootstrap.min.js。由于bootstrap是基于jquery的,所以在引入”bootstrap.min.js”前,要先引入jquery代码。并且js和jquery要放在body的最底部。
d. 使用html5的文档类型声明
<!doctype html>,bootstrap用到了h5,所以它包含一个html5版本的DOCTYPE
e. 添加适用于移动端的meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
f.官网找到基本模板拷贝
4.Bootstrap的栅格系统
<div class="container"> //容器
<div class="row"> //栅格中的行
<div class="col-*-*"></div> //行下的直接元素列
<div class="col-*-*"></div>
</div>
</div>
5.更多控件
https://v3.bootcss.com/components/#navbar