自学前端-BootStrap响应式布局框架

252 阅读1分钟

BootStrap

  • 是Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定的Html架构和JavaScript,快速的编写功能完善的网页及常见的交互效果。
  • 中文官网:www.bootcss.com/

BootStrap使用步骤

  1. 进入中文官网首页->选择BootStrap3中文文档->选择用于生产环境的BootStrap下载。
  2. 用link引入BootStrap提供的CSS代码。(min版的是经过压缩的体积比较小。)
  3. 根据自己想要实现的样式调用BootStrap提供的样式。

BootStrap支持用户定制样式,改变参数定制BootStrap更适合自己的项目。

BootStrap删格系统:

  • 删格化是将整个网页的宽度分成若干等份。
  • BootStrap3默认将网页分成12份。
  • 根据不同屏幕尺寸定义不同的类,实现响应式布局

屏幕快照 2022-07-02 上午12.00.09.png

BootStrap预定义了大量的CSS样式,组件,和JavaScript插件,我们可以根据BootStrap的中文文档导航找到自己需要的样式来使用它。

第一步选择要使用CSS样式或组件或JavaScript插件: 屏幕快照 2022-07-02 上午12.09.13.png 第二部找到自己需要用的样式: 屏幕快照 2022-07-02 上午12.09.28.png 企业站或者内容比较少的网站,可以做成腾讯前端类似的响应站。