Bootstrap

概念:一个前端开发的框架

  • 框架:一个半成品软件,在他的基础上进行开发,简化代码
  • 好处:
    • 定义了很多css样式和js插件,我们开发人员可以直接使用这些插件得到丰富的页面效果
    • 响应式布局:同一套界面可以兼容多个分辨率的界面

快速入门:

  • 下载Bootstrap
  • 在项目中将三个文件夹复制
  • 创建html界面,引入必要的资源文件

响应式布局:

  • 同一套界面兼容不同分辨率的设备
  • 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
  • 步骤:
    • 定义容器,相当于之前的table
      • 容器分类:
        1. container:
        2. container-fluid:
    • 定义行,相当于之前的tr 样式:row
    • 定义元素,指定该元素在不同设备上所占格子的数目。样式:col-设备代号-格子数目
      • 设备代号:
        1. xs:超小屏幕 手机(<768px)col - xs -12
        2. sm:小屏幕 平板 (<=768px)
        3. md:中等屏幕 桌面显示器(>=992px)
        4. lg:大屏幕 大桌面显示器(>=1200px)

CSS样式和JS插件:

  • 全局css样式:
    • 按钮:class="btn btn-default"
    • 图片:
      • class="img-responsive":图片在任意尺寸都占100%
      • 图片形状
        • <img src="" alt="" class="img-rounded">:方形
        • <img src="" alt="" class="img-circle">:圆形
        • <img src="" alt="" class="img-thumbnail">:相框
    • 表格:查看文档
    • 表单:查看文档
  • 组件:
    • 导航条:查看文档
    • 分页条:查看文档
  • 插件:
    • 轮播图:查看文档
Last modification:July 22nd, 2020 at 10:20 pm
如果觉得我的文章对你有用,请随意赞赏