Board logo

标题: Bootstrap CSS----------Bootstrap 网格系统（2） [打印本页]
作者: look_w    时间: 2019-5-11 14:53     标题: Bootstrap CSS----------Bootstrap 网格系统（2）

基本的网格结构
下面是 Bootstrap 网格的基本结构：
<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

每个页面都需要一个容器<div class="container">...</div> ，确保居中和最大宽度。
一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-*"></div>。
网格中的每一行是由12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。则使用的样式class是col-md-6。
您可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。
您可以尝试一下，但要确保总和总是 12。





基本使用实例

Bootstrap 网格系统实例：水平分列

这是一个带有简单布局的网格实例：包含两个列，每个列包含两个段落。（在这里，为每个列分别定义了样式，不定义也可以），因为有2列，所以每列应该占6个网格，所以我们使用col-md-6。代码如下：

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 水平分成两列</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
       <h1>Hello, world!</h1>
       <div class="row">
          <div class="col-md-6"  style="background-color: #dedef8; box-shadow:
             inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>第一列的段落1
             </p>
             <p>第一列的段落2
             </p>
          </div>
     
     
          <div class="col-md-6" style="background-color: #dedef8;box-shadow:
             inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>第二列的段落1
             </p>
             <p>第二列的段落2
             </p>
       </div>
    </div>
    </body>
    </html>

页面效果把上面保存为html页面打开可见:


在chrome中F12修改设备屏幕大小，发现可以自适应：






Bootstrap 网格系统实例：中型和大型设备区分显示
在上个例子中，我们使用 2 个 div，并在视口宽度的中间对它们进行 50%/50% 分割：
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
但是，在大型设备上，您最后设计成 33%/66%。所以我们要做的是配置大型设备对应的列的宽度：
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
Bootstrap 在中型设备中，会查找带有 md 的class，并使用它们。在大型设备中，会查找带有 lg 的class，并使用它们。在本实例中，我们的 2 个 div 在中型设备中显示为 50%/50% ，在大型设备为 33%/66%。请查看下面的实例进行验证。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 中型和大型设备区分显示</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
       <h1>Hello, world!</h1>
     
       <div class="row">
     
          <div class="col-md-6 col-lg-4"  style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>第一列段落1
             </p>
     
             <p>第一列段落2
             </p>
          </div>
     
          <div class="col-md-6 col-lg-8" style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>第二列段落1
             </p>
     
             <p>第二列段落2
             </p>
       </div>
    </div>
     
    </body>
    </html>

代码保存为html打开可见效果:

在手机等中型屏幕是两列分别 50% 50%的布局


在大屏幕中是两列分别是33%/66%的布局



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0