bootstrap的相关知识点

发布于:2022-12-21 ⋅ 阅读:(174) ⋅ 点赞:(0)

先上思维导图吧


目录

1.bootstrap简介

2.bootstrap注意事项

3.全局样式


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组件

       

        

代码: