编程 Javascript

bootstrap栅格系统示例代码分享

Posted in Javascript onMay 22, 2017

本文实例为大家分享了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栅格系统示例代码分享

- Author -

YY小苹果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

Feb 03 Javascript

Javascript学习笔记之对象篇（四） : for in 循环

Jun 24 Javascript

JavaScript中Cookies的相关使用教程

Jun 04 Javascript

原生js实现旋转木马轮播图效果

Feb 27 Javascript

整理关于Bootstrap导航的慕课笔记

Mar 29 Javascript

微信小程序Redux绑定实例详解

Jun 07 Javascript

JS解决position:sticky的兼容性问题的方法

Oct 17 Javascript

vue路由组件按需加载的几种方法小结

Jul 12 Javascript

微信小程序如何获取手机验证码

Nov 04 Javascript

200行HTML+JavaScript实现年会抽奖程序

Jan 22 Javascript

vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

Oct 15 Javascript

Vue数字输入框组件使用方法详解

Feb 10 Javascript

vue+axios实现登录拦截的实例代码

May 22 #Javascript

详解Angular2 关于*ngFor 嵌套循环

May 22 #Javascript

bootstrap模态框远程示例代码分享

May 22 #Javascript

bootstrap手风琴折叠示例代码分享

May 22 #Javascript

移动端手指放大缩小插件与js源码

May 22 #Javascript

jQuery滑动到底部加载下一页数据的实例代码

May 22 #jQuery

详解Angular路由 ng-route和ui-router的区别

May 22 #Javascript