BootStrap前端开发框架的使用

基本概念

一个前端开发的框架

• 框架：一个半成品软件，开发人员可以在框架的基础上，再进行开发，简化编码，试开发更加的简洁快速
• 好处：
  • 定义了很多css样式和js插件，我们开发人员可以直接使用这些样式和插件，得到丰富的页面效果
  • 响应式布局：同一套页面可以兼容不同分辨率的设备

快速入门

• 下载bootstrap
• 复制压缩包里的文件到自己web根目录中
• 在html中引入css等

响应式布局

同一套页面可以兼容不同分辨率的设备

• 实现：依赖于栅格系统

• 栅格系统：将一行平均分成12个格子，可以指定元素占多少个格子

• 实现步骤

  • 定义容器，相当于table
    • container：固定宽度，两边留白，白的部分因分辨率不同而不同
    • container-fluid：100%宽度
  • 定义行，相当于tr
  • 定义元素，相当于td，指定该元素在不同设备上，所占格子数目。
  • 样式：col-设备代号-所占格子数
  • 例子：xs：超小屏幕手机 ： col-xs-12
  • ps：设备代号具体看bootstrap文档

• 注意事项

  • 一行中格子数目超过12，则自动换行
  • 栅格CSS类可以向上兼容，栅格类使用与屏幕宽度大于或者等于分界点大小的设备
  • 如果设备宽度小于了设置的CSS栅格类属性的设备代号的最小值，那么会一格占一行

CSS样式和JS插件