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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JS解析XML的实现代码
Nov 12 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
python中模块的__all__属性详解
2017/10/26 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python发展史及网络爬虫
2019/06/19 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python selenium 获取接口数据的实现
2020/12/07 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
大学生村官典型材料
2014/01/12 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
清洁工工作总结
2015/08/11 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Python装饰器的练习题
2021/11/23 Python