Bootstrap

242 阅读1分钟

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。

 中文官网: Bootstrap中文网

现在有更好用的框架   Element 和vant

下载安装包。

开发中,我们都是按需导入,简单理解,需要用到啥,我们复制那个文件,没有必要都放入,提高性能。

 使用步骤

  1. 引入: BootStrap提供的CSS代码
  1. 调用类:使用BootStrap提供的样式

3 . container:响应式布局版心类

使用BootStrap栅格系统布局响应式网页

  1.  栅格系统(grid systems),也叫“网格系统,它就通过一系列的行(row)与列(column)的组合创建页面布局
  2. 我们的内容可以直接放入BootStrap栅格系统里面。
  3. 栅格化是指将整个网页的宽度分成若干等份
  4. BootStrap3默认将网页分成12等份

 掌握BootStrap手册用法,使用全局CSS样式美化标签

手册用法:

BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点。

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

使用BootStrap插件实现常见的交互效果

  • 插件的使用步骤

  •  引入BootStrap样式
  • 引入js文件:jQuery.js + BootStrap.min.js(一定记得要引入进去)
  • 复制HTML结构, 并适当调整结构或内容