电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: Bootstrap 网格系统（2） [打印本页]

作者: look_w 时间: 2019-5-13 09:28 标题: Bootstrap 网格系统（2）

网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作：

   超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px
（一个列的每边分别 15px） 30px
（一个列的每边分别 15px） 30px
（一个列的每边分别 15px） 30px
（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

基本的网格结构
下面是 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修改设备屏幕大小，发现可以自适应：

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