bootstrap栅格系统示例代码分享

本文实例为大家分享了bootstrap栅格系统的具体代码，供大家参考，具体内容如下

<!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, user-scalable=no"> 
 <title>栅格系统</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
 <link rel="stylesheet" href="css/main.css"> 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
 
 <style> 
  .a{ 
   background-color: #ccc; 
   height: 50px; 
   border: 1px solid #333; 
  } 
 </style> 
</head> 
<body> 
<!--1170px--> 
<div class="container"> 
 <div class="row"> 
  <div class="col-md-1 a">1</div> 
  <div class="col-md-1 a">2</div> 
  <div class="col-md-1 a">3</div> 
  <div class="col-md-1 a">4</div> 
  <div class="col-md-1 a">5</div> 
  <div class="col-md-1 a">6</div> 
  <div class="col-md-1 a">7</div> 
  <div class="col-md-1 a">8</div> 
  <div class="col-md-1 a">9</div> 
  <div class="col-md-1 a">10</div> 
  <div class="col-md-1 a">11</div> 
  <div class="col-md-1 a">12</div> 
 </div> 
 <div class="row"> 
  <div class="col-md-9 a">9</div> 
  <div class="col-md-3 a">3</div> 
 </div> 
</div> 
 
<div class="container"> 
 <div class="row"> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
 </div> 
</div> 
<!--嵌套 
style="padding: 0",因为栅格系统默认有15px 的padding--> 
<div class="container"> 
 <div class="row"> 
  <div class="col-lg-9 a" style="padding: 0"> 
   <div class="col-lg-4 a">a</div> 
   <div class="col-lg-4 a">a</div> 
   <div class="col-lg-4 a">a</div> 
  </div> 
  <div class="col-lg-3 a">a</div> 
 </div> 
</div> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# bootstrap # 栅格系统 # bootstrap的常用组件和栅格式布局详解 # Bootstrap栅格系统使用方法及页面调整变形的解决方法 # Bootstrap栅格系统简单实现代码 # Boostrap中栅格布局的实现 # 基于BootStrap栅格栏系统完成网站底部版权信息区 # bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等） # Bootstrap栅格系统学习笔记 # BootStrap栅格之间留空隙的解决方法 # 大家分享 # 具体内容 # 大家多多 # content # Compatible # viewport # edge # http # utf # UA # equiv # width # title # scalable # rel # link # initial # device # user # scale

返回目录在线咨询

上一篇：PHP 文件搜索：输入验证与敏感查询排除策略
下一篇：如何使用Golang处理表单提交数据_Golang表单请求解析技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

bootstrap栅格系统示例代码分享

您的项目需求