第三篇Bootstrap网格基础


Posted in Javascript onJune 21, 2016

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里,可以是div,内容放置在列内,网页设计中的网格用于布局内容,让网站易于浏览,下面是一个用bootstrap网格布局的例子。

<div>
<div>col2</div>
<div>col10</div>
</div>

显示效果如下:

第三篇Bootstrap网格基础

加了Class=”row”的样式表示行,加了class=”col-sm-2”的样式表示列,系统将整个屏幕分为12份,col-sm-2表示该列跨2份,col-sm-10比表示该列跨10份。显示的效果就会如上图所示,表示一行两列,第一列占2份,第二列占10份。

bootstrap是一个响应式的前端框架,体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示:

<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>

Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列,第一列占8份,第二列占4份,在平板电脑下一行两列,第一列占12份,第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。

下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的

第三篇Bootstrap网格基础

以上所述是小编给大家介绍的第三篇Bootstrap网格基础 的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
js中创建对象的几种方式
Feb 05 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
You might like
如何使用PHP往windows中添加用户
2006/12/06 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
微信支付扫码支付php版
2016/07/22 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
爱情寄语大全
2014/04/09 职场文书
环境科学专业求职信
2014/08/04 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS