Bootstrap致力于：快速、高效开发移动端应用为主的JS 框架
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
主要组成部分：三部分
全局样式：基本样式{按钮样式、表单样式、表格样式、图片样式..}
组件样式：基本元件和样式{导航条、导航栏、缩略图、下拉菜单..}
JS插件：对于组件样式，添加动作行为
下载安装配置
BS-下载-JS框架-js文件|****css****文件|操作案例
css文件：包含已经封装好的样式：引入css文件即可使用bs的样式库[大量已经实现的样式，可以直接通过提供的名称使用]
js文件：包含已经封装好的特效：需要引入jquery.js文件之后，引入bootstrap.js文件，因为bootstrap的网页特效，是以jquery为基础的。
下载：https://v3.bootcss.com/getting-started/#download
下载的文件是一个压缩包
版本：Bootstrap 2.x – 3.x – 4.x
2.x：很久以前流行的版本，古老的项目中经常见到bs2的身影。
3.x：现在流行的版本，不仅仅是对2的升级；开始侧重移动端的开发
4.x：未来可能会流行的版本，目前虽然官方发布了稳定版，但是公司一般很少选择
bootstrap3.3.7/ bootstrap主文件夹
js/ 包含bootstrap主要特效代码的js文件的文件夹[bootstrap.js]
css/ 包含bootstrap主要样式的文件夹，核心文件[bootstrap.css]
fonts/ 包含bootstrap中使用的默认字体文件、字体图标 文件等等
项目开发使用时，如果要求项目有良好的bootstrap支持，主要引入如下三个文件
bootstrap.min.css
jquery.min.js
bootstrap.min.js
bs中的网格布局：栅格系统
将网页按照行列的方式进行网格拆分
每一行可以包含12列；如果一行中超过了12列~超出部分自动换行显示[并不是新的一行]
bs中为了方便开发人员的操作，将常规的样式，全部封装好之后，提供了样式名称。
可以直接通过样式名称进行样式的处理[bs中~并不是学习新样式、新技术、新布局：bs中我们要做的，就是记住它的样式(学会使用它的文档)]
bootstrap基本语法– 2.0 基本样式
容器样式：网页中的内容，必须包含在一个指定的容器中。方便操作和统一管理。
.container ： 响应式的，指定宽度的容器~随着浏览器的尺寸变化自动变化宽度。
.container-fluid：铺满浏览器窗口的流式容器 - 浏览器有多宽 - 这个样式就有多宽
注意：不能嵌套使用。
目的：标记一个区域，这个区域中，就可以使用栅格系统布局。
首先出现容器样式，然后在容器样式中，就可以定义行样式和列样式了
案例
行样式：
.row 表示声明一行
列样式：
.col-md-n 表示声明一列，占用n个标准列的位置。
样式定义规则：
先有容器-> 再有行-> 再有列
列偏移：
.col-md-offset-n：从左到右偏移的列数
BS中网页尺寸的定义：lg-md-sm-xs四中尺寸样式，分别适用于不同尺寸的屏幕
lg:屏幕尺寸大于1170px情况下使用
md:屏幕尺寸大于970px情况下使用
sm:屏幕尺寸大于768px情况下使用
xs:屏幕尺寸小于768px情况下使用
.hidden-md:表示让修饰的元素标签在md尺寸下隐藏，其他三种尺寸下显示
.visible-md:表示让修饰的元素标签在md尺寸下显示，其他三种尺寸下隐藏
案例
栅格系统常规样式
.container 定宽容器
.container-fluid 平铺容器
.row 行
.col-md-n(col-lg-n/col-sm-n/col-xs-n) 列
.col-md-offset-n 列偏移
.hidden-md 响应式-隐藏元素
.visible-md 响应式-显示元素
内置段落样式
text-left 左对齐
text-right右对齐
text-center居中
lead让内容突出显示
案例
网友评论