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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
express.js中间件说明详解
Mar 19 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php你的验证码安全码?
2007/01/02 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
机关作风建设工作总结
2014/10/23 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript