响应式布局--BootStrap

Bootstrap

1. 使用Bootstrap的好处
   • 定义了很多的css样式和js插件,我们开发人员直接可以使用这些样式和插件得到丰富的页面效果.
2. 入门

   • 下载Bootstrap

   • 在项目中将这三个文件夹复制

     <!-- Bootstrap -->
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
     <script src="bootstrap/js/jquery-3.2.1.min.js"></script>
     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
     <script src="bootstrap/js/bootstrap.min.js"></script>
     

   • 创建html页面,引入必要的资源文件

3. 响应式布局
   • 原理: 使用媒体查询针对不同宽度的设备进行布局和样式的设置, 从而适配不同设备的的目的.
   • 实现:依赖于栅格系统,将一行平均分为12个格子,可以指定元素占几个格子.
   • 步骤:
     1. 定义容器,相当于之前的table.
        • 容器分类:
          • container: 两边存在留白
          • container-fluid: 每一种设备都占满屏幕
     2. 定义行,相当于之前tr 样式:row
     3. 定义元素,相当于该元素在不同的设备上,所占的格子数目. 样式:col-设备代码-格子数目
        • 设备代号:
          • xs: 超小屏幕 手机 (<768px)
          • sm 小屏幕 平板 (≥768px)
          • md 中等屏幕 桌面显示器 (≥992px)
          • lg 大屏幕 大桌面显示器 (≥1200px)
     4. 注意:
        1. 一行中如果格子数目超过12,则超出部分自动换行.
        2. 栅格类属性可以向上兼容.栅格类适用于与屏幕宽度大于或等于分界点大小的设备,
        3. 如果真实设备宽度小于了栅格类属性的设备代码的最小值,会一个元素占满一行.
4. 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">	带边框的
       

     • 表单
     • 表格
   • 组件:
     • 导航条
     • 分页条
   • 插件:
     • 轮播图
5. 具体代码可访问官网查看. https://www.bootcss.com/