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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
jQuery Selector选择器小结
May 06 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 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
微信自定义菜单的处理开发示例
2015/04/16 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
强制设为首页代码
2006/06/19 Javascript
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
Python群发邮件实例代码
2014/01/03 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Django实现学员管理系统
2019/02/26 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
学Python 3的理由和必要性
2019/11/19 Python
Python os模块常用方法和属性总结
2020/02/20 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
异步传递消息系统的作用
2016/05/01 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
酒店管理求职信
2014/06/09 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
环保建议书作文500字
2015/09/14 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP