超好用的Bootstrap框架-了解

Bootstrap

1. 概念：一个前端的开发框架
   • 好处：
     • 定义了很多css样式和js插件，可以丰富页面效果
     • 响应式布局【同一套页面兼容不同分辨率的设备】
2. 快速入门
   1. 下载bootstrap
   2. 在项目中将三个文件夹复制进来
   3. 创建html页面，引入必要的资源文件

响应式布局：

• 同一套页面可以兼容不同分辨率的设备
• 实现：依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格子
• 步骤：
  1. 定义容器：相当于之前的table
     • 容器分类：
       1. container：两边留白【xs不会】，看起来更舒适，很多地方都在这样用
       2. container-fluod：100%的宽度
  2. 定义行。相当于之前的tr【样式row】
  3. 定义元素：指定该元素在不同的设备上，所占的格子数目。【样式col-设备代号-格子数目】
     • 设备代号：
       1. xs：超小屏幕 手机（<768px）:col-xs-12【有时候xs用不了，就直接默认不要xs就是最小号】
       2. sm:小屏幕 平板(>=768px)
       3. md:中等屏幕 桌面显示器(>=992px)
       4. lg:大屏幕 大桌面显示器(>=1200px)
     • 注意事项：
       1. 可以向上兼容，【小的可以承接到大的：xs-1，那么默认比他大的都是1】
       2. 如果设置的单位大小，大于了整个一行，那么这个单位就默认占一行

scc样式和js插件

1. 全局css样式：
   • 按钮：class=“btn btn-default”
   • 图片：
     • class=“img-responsive”:图片在任意位置都占100%【好像视频也管用】
     • 图片形状：
       • <img src=“…” at=“…” class=“img-rounded”>方
       • <img src=“…” at=“…” class=“img-circle”>圆
       • <img src=“…” at=“…” class=“img-thumbnail”>
   • 表格：查表
   • 表单：查表
2. 组件
   1. 导航条：查表【还有汉堡按钮】
   2. 分页条：查表
3. 插件
   • 轮播图：查表