Bootstrap栅格系统简单实现代码


Posted in Javascript onMarch 06, 2017

Bootstrap栅格系统的简单介绍,供大家参考,具体内容如下

栅格系统:总共分为12个,超过12个会自动换行,可嵌套,嵌套也不可超过12个,且不会超过父栏

代码:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
div{
 border:1px solid #cccccc;

}
</style>

</head>


<body>
<!-- 栅格系统 -->
<div class="container">
<div class="row">
<div class="bg-primary col-sm-9">A</div>
<div class="bg-success col-sm-2">B</div>
<div class="bg-info col-sm-1">C</div>
</div>
</div>

<!-- 中等屏幕与超小屏幕的处理 -->
<div class="container bg-primary">
<div class="row">
 <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>


<!-- 偏移:offset -->
<div class="container">
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</div>
<!-- 嵌套 -->
<div class="container">
<div class="row">
 <div class="col-sm-9">
 Level 1
 <div class="row">
  <div class="col-xs-8 col-sm-6">
  Level 2
  </div>
  <div class="col-xs-4 col-sm-6">
  Level 2
  </div>
 </div>
 </div>
</div>
</div>
<!-- pull:从右向左 push:从左向右 -->
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-9 .col-md-pull-9</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

结果:

Bootstrap栅格系统简单实现代码

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

Javascript 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
javascript DOM的详解及实例代码
Mar 06 #Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 #Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 #Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 #Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 #Javascript
Bootstrap模态框案例解析
Mar 05 #Javascript
video.js使用改变ui过程
Mar 05 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
初三开学计划书
2014/04/27 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书