Responsive devices

BuiltWith Bootstrap

Bootstrap is made to not only look and behave great in the latest desktop browsers, but in tablet and smartphone browsers too. It's packed with features; a 12-column responsive grid, dozens of components, plugins and more!.

Supported Devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Layout width Column width Gutter width
Smartphones 480px and below Fluid columns, no fixed widths
Smartphones to tablets 767px and below Fluid columns, no fixed widths
Portrait tablets 768px and above 42px 20px
Default 980px and up 60px 20px
Large display 1200px and up 70px 30px

Default grid system 12 columns with a responsive twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The default grid system is a 12-column grid. It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns defined as part of the grid system.

Offsetting Columns

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

Nesting Columns

To nest your content, just add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.

Level 1 of column
Level 2
Level 2
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

Responsive Utility Classes

What Are They

For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support Classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible
网络安全500强中国公司排名湛江有那些网站制作公司掌握网络安全技术天钥网络安全审计个人主页网站模板网络营销中4C的特点网络营销宏观环境包括!网络营销的基本形式有哪些网络营销站点分类信息安全最新新闻我叶无心历千劫万险; 纵使魂飞魄散,我灵识依在; 战百世轮回,纵使六道无常,我依然永生; 洒我热血,一往无前,穿越了宇宙洪荒; 修我战枪,枪尖在燃烧……何人云端起舞; 让我望穿天涯,柔肠百折,心中风雪潇潇; 曲终人散,一枪刺破云霄,古今同一笑; 天地任逍遥,后世来者,莫与我比高。城市需要光,有光的地方就有影,我是狼养长大的,穿越到各大武侠融合的世界,成为了宋朝的皇子,赵月轩很是无奈。 咦,剧情还没展开?那我就不客气了。 九阳神功,九阴真经,神照经,六脉神剑……都是我的。 无忌别慌,本皇子这里有一本九阳神功,以后你好好修炼,千万别相信女人的话,让大哥帮你对付他们。 郭夫人,你也不想郭大侠在外受到伤害吧……天道之下的人,在追求着天道。只是,天道又是什么?人在追求什么?穷困潦倒的大学生陈阳,在经历种种不顺后,意外获得传承,入赘豪门,从此有了开挂的人生……许天扬。男。 未婚。职业:厨师,,。多愁善感,帅,只因女友丁羚一句话,所以他爱穿西装,甚至厨师的白大挂都想做成西装款。 在都市刻苦学艺,并因为从小练就了一身好功夫,在社会上结识了几位生死挚友并一起打拼出属于他们自己的一片天地。   在校大学生萧凡,从网店卖书开始,逐渐成为影响世界的文娱大佬。      其所创建的大方集团也成为千亿级别的巨无霸,涉及影视、游戏、出版、互联网等多个领域,已深深影响着全世界的文娱走向。      问及对大方集团老板萧凡的印象,人们亲切的称呼他‘重新定义资本的良心老板’、‘让华狼街投行和巴韭特畏惧的东方上帝’。 所有人对大方集团的印象都是大方、有钱。      私下里,萧凡泪牛满面:“一开始我就是想花光几万块钱,我真的好想亏本啊!”   一花一世界,一叶一菩提。汪洋苍穹下,历经人世劫。数不尽恩怨,道不尽离别。长歌一曲天地叹,谁是谁非谁来断。一剑断天涯,一掌摧群山,汪洋任我行。 这是一部给有机缘的人看的书。 超硬核群穿种田装逼打脸!超硬核!超硬核!超硬核!重要的事情说三遍! 旧世界的一群普通人,在两位神秘人士的帮助下,集体穿越到明末清初那个大时代。本书讲述的,是这群人如何筚路蓝缕开启山林,演绎出一段波澜壮阔、真实且魔幻的历史故事。当然了,毕竟这里所讲述的,是一个多角色群穿故事,所以开头有一些休闲、有一点慢节奏,然而前期的一切铺垫,都是为了今后的精彩。所以,此书不是单纯的小说,这里记录的,是一群人的秘史,因为现实比小说更魔幻,而你却能从魔幻的现实中读懂更真实的历史…… 叶墨带着记忆重生,来到了明朝,只是这里却和想象中不太一样。 在这里,有江湖 在这里,有权谋 在这里,有恩怨情仇 在这里一切的一切都将重新开始。在这崭新的大明中,且看叶墨如何书写自己的奋斗史。
网络营销站点分类 服务器网络安全设备方案 知名信息安全企业排名 网站建设广告 网站入口设计规范 信息安全案例演示 免费营销软件 中国网络安全50强 网络营销分为哪些类型 外贸网站建设 如何超度婴灵?【www.richdady.cn】 升迁障碍的心理调适咨询【www.richdady.cn】 暗恋的心理调适【www.richdady.cn】 感情纠纷咨询【www.richdady.cn】 解梦的情感释放【www.richdady.cn】 婴灵对家庭关系有哪些影响?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系咨询【www.richdady.cn】√转ihbwel 学习成绩差的心理调适【σσЗ8З55О88О√转ihbwel 前世今生的轮回真相【企鹅383550880】√转ihbwel 性压抑的前世记忆【σσЗ8З55О88О√转ihbwel 如何了解自己的前世今生?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的职场建议咨询【微:qq383550880 】√转ihbwel 亲子关系的自我提升咨询【企鹅383550880】√转ihbwel 升迁障碍的职场瓶颈咨询【σσЗ8З55О88О√转ihbwel 人际关系不好的前世记忆威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 官司的调解技巧咨询【σσЗ8З55О88О√转ihbwel 感情纠纷的情感咨询如何进行?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 耳鸣的心理调适咨询【www.richdady.cn】√转ihbwel 内心恐惧胆怯的解决方法【微:qq383550880 】√转ihbwel 有官司的前世因果咨询【微:qq383550880 】√转ihbwel 网络市场营销策略 网络安全验证是什么 2016网络安全大事记 国有企业信息安全管理办法 昆明网站营销 网络营销必看 书籍 电商 病毒式营销 西安网站架设公司 怎么做网络营销策划书 北邮信息安全找工作难吗北京市网络安全检测 江门网站设计 网络安全500强中国公司排名 中国e网网站建设 网站查外链 网站的类型 网站建设开源项目github 通信网络安全会议 深圳信息安全公司排名 网络安全法大赛 网络营销的实施计划方案 信息安全企业排名,-1 重庆整合网络营销 东莞深圳网站建设 营销型网站建设sempk 网络营销宏观环境包括! h5制作企业网站有哪些优势 信息网络安全答案 最新企业网站系统 国内网络安全大事件 整合营销方案是什么网络安全周报告 信息安全审计 深入 探讨 网络安全新闻视频 计算机网络安全心得体会 国家网络安全管理法规 网站策划方法 网络安全方面的电影 网络营销与ui设计方案 东莞深圳网站建设 快消品网络营销 西安网站架设公司 小米手机搜索引擎营销案例 网络营销必看 书籍 信息安全资质有效期 深圳信息安全公司排名 什么是传统营销型企业 1论述基于网络营销信息传递系统的六大类13种常用网络营销工具和资 商城网站建设浩森宇特 互联网信息安全资质证书 全球网络安全市场报告 信息安全讲座多少钱,-1 网站设计规划书 分栏型网站 最新企业网站系统 网络安全技术文档 网络营销内容是什么意思 网站建设字体变色代码 网络市场营销策略 电商 病毒式营销 湛江有那些网站制作公司 服务好的微网站建设 信息安全服务 全球 昆明网站营销 2016网络安全大事记 信息安全管理体系的三权分立 长沙专业网络营销 网络安全厂家介绍 互联网信息安全解决 sap信息安全搭建 建站宝盒网站制作系统 v5.0退出保持登陆状态 帮助 预览 发布 网络营销师做什么 网络安全大神道哥面试 东莞深圳网站建设 超低价的郑州网站建设 网络安全官方网站 网站建设字体变色代码 全球网络安全市场报告 信息安全管理体系的三权分立 自贡网站建设 信息安全专业相关工作的通知 泰州全网整合营销 网络营销站点分类 计算机网络安全心得体会 信息安全服务情况 服务器网络安全设备方案 信息安全工程师 培训 网络营销的基本形式有哪些 石家庄网站建设外包公司 银川网络营销 网站的类型 自助建手机网站免费 中国网络信息安全大会 湛江有那些网站制作公司 网吧网络安全 网络品牌营销公司 信息安全企业排名,-1 深圳信息安全公司排名 东莞深圳网站建设 网络安全500强中国公司排名 石家庄网站建设外包公司 互联网信息安全资质证书 网站策划方法 中国e网网站建设 4i营销理论的缺点 分栏型网站 网络营销分为哪些类型 本地佛山顺德网站建设 信息安全最新新闻 网站建设字体变色代码 godaddy邮箱营销 整合营销 线上活动 网络营销师做什么 信息安全 文件 银川网络营销 国内网络安全大事件 国有企业信息安全管理办法 微电影营销 展示型网站建设流程 网络安全 主动出击 信息安全资质有效期 自贡网站建设 网络信息安全 特点有 南平网站建设 长沙专业网络营销 信息安全专业相关工作的通知 通信网络安全会议 h5营销分析是什么意思武汉设计网站公司 国有企业信息安全管理办法 vivo手机营销目标 分栏型网站 信息安全管理主管,-1 网站入口设计规范 网络安全的现状2017 邮件营销 模板 开通网站后 网络营销必看 书籍