先上思维导图吧
目录
1.bootstrap简介
bootstrap:栅格布局,提供响应式布局(也就是内容会随着窗口大小的改变进行改变)
2.bootstrap注意事项
1.bootstrap 提供 js font css 文件
这三个文件一定要考入到项目当中,而且要保证三个文件平级存放。
2.使用css文件
1.只需要在html 中将bootstrap.min.css引用进入就可以了。
如果在项目中不导入font可能会影响css的样式效果。
3.bootstrap的插件是基于jquery做的,所以要使用bootstrap的js插件必须要进入jQuery组件
3.全局样式
1.container
使用在div上,并且根据浏览器的大小进行适合的留白,适用于网页正文
2.container-fluid
使用在div上,不管浏览器大小直接占满全行,经常使用在top,bottom处
3.栅格系统
1.行内的div宽度不是用像素设定,而是占几个格子
2.注意事项
1.使用栅格布局最外层必须用container包裹
2.如果class有很多单位,它是以该单位适应的窗口为准则选择单位的,而不是以顺序或者别的。
4.组件,js组件
1.动态效果
需要导入bootstrap.js组件,还要在这之前导入jquery.js组件
代码: