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 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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
PHP include_path设置技巧分享
2011/07/03 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python实现连续图文识别
2018/12/18 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
体育教师自荐信范文
2013/12/16 职场文书
新年晚会主持词
2014/03/24 职场文书
《火烧云》教学反思
2014/04/12 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
python中validators库的使用方法详解
2022/09/23 Python