BoorStrap 栅格系统(屏幕布局适配,根据屏幕大小分配成不同比例)

最新推荐文章于 2024-04-19 18:07:12 发布

houyanhua1

最新推荐文章于 2024-04-19 18:07:12 发布

阅读量4.8k

点赞数

分类专栏： BootStrap 移动web 文章标签： bootstrap 移动web

本文链接：https://blog.csdn.net/houyanhua1/article/details/79749957

版权

移动web 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

BootStrap

3 篇文章 0 订阅

订阅专栏

demo.html：

<!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">
    <title>栅格系统</title>

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

    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
          .row>div{
              border: 1px solid #0094ff;
          }
    </style>
  </head>
  <body>
<div class='container'>    <!-- 宽度固定(居中) -->
            <div class="row">
                      <div class="col-md-2">.col-md-2</div>
                      <div class="col-md-2">.col-md-2</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
              </div>
  </div>
  <div class='container-fluid'>    <!-- 宽度100% -->
            <div class="row">
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
                      <div class="col-md-1">.col-md-1</div>
              </div>
  </div>
    <div class='container-fluid'>   
            <div class="row">  <!-- 不同大小的屏幕,按不同的比例分配(超过12的部分另起一行) 【@media(媒体查询)】 -->
                      <div class="col-lg-4 col-md-5 col-sm-6 col-xs-12">..col-lg-4 col-md-5</div>
                      <div class="col-lg-4 col-md-5 col-sm-6 col-xs-12">..col-lg-4 col-md-5</div>
                      <div class="col-lg-4 col-md-2 col-sm-2 col-xs-12">..col-lg-4 col-md-2</div>
            </div>
  </div>
    </body>
</html>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  <!-- bootstrap的核心JS,先引入JQuery -->