## 响应式布局

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

  实现:依赖于栅格系统:将一行平均分成十二个格子,可以指定元素占几个格子

    步骤:

      1、定义容器,相当于之前得table

        容器分类:

          1、 container:两边留白

          2、 container-fluid:每一种设备都是100%宽度

      2、定义行相当于之前得tr  样式:row

      3、定义元素,指定该元素在不同得设备上所占的格子数目   样式:col – 设备代号 – 格子数目

        设备代号:

          1、xs:超小屏幕 手机 (<768px):col – xs – 12

          2、sm:小屏幕 平板 (≥768px)

          3、md:中等屏幕 桌面显示器 (≥992px)

          4、lg:大屏幕 大桌面显示器 (≥1200px)

      注意:

1、一行中如果格子数目超过12,则超出部分自动换行

2、格栅类属性可以向上兼容。格栅类适用于屏幕宽度,大于或等于分解点大小的设备

3、假如真实设备宽度小于了设置格栅类属性的设备代码的最小值,会一个元素沾满一整行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <title>Bootstrap HelloWorld</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">


  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="js/bootstrap.min.js"></script>
  <style>
    .inner{
      border:1px solid red;
    }

  </style>
</head>
<body>
<!--1.定义容器-->
<div class="container">
  <!--2.定义行-->
  <div class="row">
    <!--3.定义元素
        在大显示器一行12个格子
        在pad上一行6个格子-->

    <!--<div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>-->
    <div class="col-md-4 inner">栅格</div>
    <div class="col-md-4 inner">栅格</div>
    <div class="col-md-4 inner">栅格</div>

  </div>

</div>

</body>
</html>

 

原文地址:http://www.cnblogs.com/agzq/p/16848168.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性