Bootstrap栅格布局系统实例

来源：懂视网责编：小采时间：2020-11-27 18:48:01

Bootstrap栅格布局系统实例

Bootstrap栅格布局系统实例:一、基本原则: 1. 将屏幕看作是一个个,沿水平和垂直方向的有序排列的网格/栅格/单元格/组成; 2. 所有数据必须放在栅格中; 3. 采用响应式布局,移动设置优先二、屏幕分辨率划分依据 1. ( screen < 768px ): 超小屏幕 col-xs-x 2. (768px

推荐度：

点击下载本文 文档为doc格式

导读Bootstrap栅格布局系统实例:一、基本原则: 1. 将屏幕看作是一个个,沿水平和垂直方向的有序排列的网格/栅格/单元格/组成; 2. 所有数据必须放在栅格中; 3. 采用响应式布局,移动设置优先二、屏幕分辨率划分依据 1. ( screen < 768px ): 超小屏幕 col-xs-x 2. (768px

一、基本原则:

1. 将屏幕看作是一个个,沿水平和垂直方向的有序排列的网格/栅格/单元格/组成;

2. 所有数据必须放在栅格中;

3. 采用响应式布局,移动设置优先

二、屏幕分辨率划分依据

1. ( screen < 768px ): 超小屏幕 col-xs-x

2. (768px <= screen < 992px): 小型屏幕 col-sm-x

3. (992px <= screen < 1200) : 中型屏幕 col-md-x

4. (1200 <= screen ) : 大型屏幕 col-lg-x

二、实现原理

1.第一步: 必须创建一个容器,class="container"

2.第二步: 必须创建一个行, class="row"

3.第三步: 必须创建栅格,class="col-md-x", 以中型屏幕为例,临界点为992px

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="dist/css/bootstrap.css">
 <script src="jquery-3.2.1.js"></script>
 <script src="dist/js/bootstrap.js"></script>
 <title>栅格布局系统</title>
 <style>
 .grid {
  border: 1px solid #696969;
  border-radius: 5px;
  background-color: lightskyblue;
  min-height: 30px;
  text-align: center;
  line-height: 30px;
 }
 .green {
  background-color: lightgreen;
 }
 .pink {
  background-color: lightpink;
 }
 </style>
</head>
<body>
<div class="container">
 <h4>整行:</h4>
 <div class="row">
 <div class="col-md-12 grid">内容</div>
 </div>
 <h4>二等分:</h4>
 <div class="row">
 <!--<div class="col-md-6 grid">内容</div>-->
 <!--大屏39分-->
 <!--<div class="col-md-6 col-lg-3 grid green">内容</div>-->
 <!--小屏48分-->
 <div class="col-md-6 col-lg-3 col-sm-4 grid green">内容</div>
 <!--<div class="col-md-6 col-sm-8 grid">内容</div>-->
 <!--<div class=" col-md-6 grid">内容</div>-->
 <!--<div class=" col-md-6 col-lg-9 grid pink">内容</div>-->
 <div class=" col-md-6 col-lg-9 grid col-sm-8 pink">内容</div>
 <!--<div class=" col-md-6 col-sm-4 grid">内容</div>-->
 </div>
 <h4>三等分:</h4>
 <div class="row">
 <div class="col-md-4 grid">内容</div>
 <div class="col-md-4 grid">内容</div>
 <div class="col-md-4 grid">内容</div>
 </div>
 <h4>四等分:</h4>
 <div class="row">
 <div class="col-md-3 grid">内容</div>
 <div class="col-md-3 grid">内容</div>
 <div class="col-md-3 grid">内容</div>
 <div class="col-md-3 grid">内容</div>
 </div>
 <!--<h4>五等分:12除5除不尽,不用五等分</h4>-->
 <h4>六等分:</h4>
 <div class="row">
 <div class="col-md-2 grid">内容</div>
 <div class="col-md-2 grid">内容</div>
 <div class="col-md-2 grid">内容</div>
 <div class="col-md-2 grid">内容</div>
 <div class="col-md-2 grid">内容</div>
 <div class="col-md-2 grid">内容</div>
 </div>
 <h4>四八开:</h4>
 <div class="row">
 <div class="col-md-4 grid">内容</div>
 <div class="col-md-8 grid">内容</div>
 </div>
 <h4>三九开:</h4>
 <div class="row">
 <div class="col-md-3 grid">内容</div>
 <div class="col-md-9 grid">内容</div>
 </div>
</div>
</body>
</html>

【相关视频推荐：Bootstrap教程】

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Bootstrap栅格布局系统实例

推荐度：

点击下载本文 文档为doc格式

标签：系统布局实例

热门焦点

Bootstrap栅格布局系统实例

Bootstrap栅格布局系统实例

Bootstrap栅格布局系统实例

最新推荐

猜你喜欢

热门推荐