简介
bootstrap是一款前端开发自适应页面的js库,可以让你在开发网页的时候轻松实现网站的PC与移动端兼容,避免在移动端上面出现样式错位等。
原理
bootstrap的原理是媒体查询CSS3的@media,用于检测屏幕,从而改变样式的百分比。
结构
bootstrap是基于jquery而成的,因此我们在引入bootstrap之前需要引入jquery。bootstrap分为两个部分一个部分是脚本JS一个部分是样式CSS,同时还有额外的一个部分bootstrap-theme.css,这部分是用于部分bootstrap特效而引入的。
概括一下使用bootstrap最少需要引入3个文件jquery,bootstrap.js,bootstrap.css
代码
![63615dbfffec27242061fe3127234f18.png](https://i-blog.csdnimg.cn/blog_migrate/5e9f543061a02a7f4b2f2eca94e0f62e.jpeg)
解释
当我们需要给图片设置略缩图的时候,如上面代码所示,只需要添加一个class的类img-thumbnail即可帮我们实现图片略缩图,bootstrap的好处在于很多我们常用的CSS样式都集成在了类里面,这样我们可以只需要引入类名即可实现功能,减少编写代码的时间,实现快速开发。
![25bae582441e6f1d3a9f735c267d0259.png](https://i-blog.csdnimg.cn/blog_migrate/0a8b23c70fdfcf13742e8d8ae663fe2c.jpeg)