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
工业控制系统 信息安全标准网络安全主要涉及信息存储安全信息传输安全网络应用安全等3个方面互联网+信息安全,-1信息安全企业排行开展网络安全工作动力无限做网站嵊州网站信息安全就是网络安全绿盟网络安全asp网站源码我,叫做程敏刚,她,叫做杜淑萍,杜淑萍是我的老婆,他是国之重器,科研天才,国士无双! 她是国民女神,国色天香,迷倒众生。 重生到另一个世界的洛铭,激活了系统。系统给予的奖励条件为暗恋,暗恋时间越长,奖励越丰厚。 谨慎选择了自己的暗恋对象云雨蝶之后,经历五年时光,作为可控核聚变,空天航母,外骨骼机甲等高端科研项目总工程师的洛铭,载誉归来。 而他不知道的是,在不久之前,已经成为国民女神,甜美天后的云雨蝶竟然在歌手巅峰对决节目中向他表白了。 原来这个可爱的女神,也在暗恋着洛铭。 五年一别,五年暗恋,五年思念,再次相逢,这对神仙眷侣开始谱写传奇而甜蜜的人生!  在无比寂静的黑夜中,是什么在黑暗中低语?   夜夜笙歌的都市下,那暗处不为人知的小巷你又可曾注意?   在神鬼交融波及的世界中,妖怪?鬼怪?怪物?都已经慢慢的浮出水面。   我只有一刀,在这万般沉沦,遥是苦海的世界中斩出一道惊芒!一位异世来客,意外穿越到类似山海经一样的修仙世界,他凭借着金手指和自身智慧度过一个个难关。 比如穿着人皮的老太太,喝血吃肉的飞尸,能够杀人于无形的鬼魅,诡异的祭祀,控制怅鬼的梼杌,嫉妒贪婪的饕餮,鬼狐办理的妓院,上古残留的神肉,无心的贯胸人,死亡才能繁殖的人,人首兽身的异人……2403年,世界资源枯竭。各国形成整体,组成联合政府。联合政府统一了各国年代,各国的政府。因此,2403年又被称为2403时代。星空五年,人们发现了一个有生命的行星,这个行星上的人们任然是小农经济,没有步入工业时代。但他们其中却有奇怪的职业——武士。武士们会超艺,超艺能发出像幻觉、迅速等技能,让联合政府的科技无法匹敌。由此,一个充满危机的时代诞生了。 如果除去天生阴阳眼的话,我的前半生应该是普通的不能再普通了,但自从那天之后,我墨色的生活被染上了色彩。从上个世纪八十年代到本世纪二十年的,四十年的半州,已经经过了风风雨雨。四十年河东,四十年河西。人,只有慈悲心,感恩心,恭敬心,才能善终。 不知源头何处的神秘星球,在芸芸众生皆不曾反映之际,降临到了太阳系地外虚空,遮天蔽日,扰乱了时分。而钟挺原本平凡无奇的人生也发生了翻天覆地的变化,不得不一直逆天而行······ 大道为络,天地作星,众生如子。一场谁也逃不开的博弈就此展开。 叩仙门,觅神迹,自是横刀向天笑! 之前的我,现在的我们。 我们有着各自的过往,各自的黑暗——它们潜藏于普通人的光芒之下,在每个长夜之中折磨着我们的精神,企图让我们堕入地狱。 而现在,我们站在这里,共同面对此世真正的暗面。 这是人的世界,无数平凡的生命于此度过安然的一生。可在此世的阴影处,总有不甘的梦魇想要吞没凡人。 我们都曾经是人生的失败者,是这个世界并不出众的存在。 我们如今存在的意义,便是潜入此世的黑暗,护好早已不属于我们的人间的光芒。 人,有人的尊严与底蕴。无论何时何地,人都不会被打败。 我们,便是最后的证明。我,我们,都不会再孤身一人。 东方君从小无法修炼使其实力微弱,但因一次机遇,激活了体内沉睡着的黄金圣龙,就此获得了不属于这个大陆的力量,从此实力超凡。 结束了东面西方的明争暗斗,最终成为人类的第九代战神,并渡劫成真神。
漏洞扫描与网络安全 网站建设公司平台 信息安全的基本目标网站怎么添加管理员 网站报价方案 互联网内容分发网络安全防护检测要求 中山做网站的公司 云南网站设计 信息安全企业排行 做静态网站 学网络安全技术到 孩子厌学的解决方法咨询【www.richdady.cn】 失业的自我提升【www.richdady.cn】 事业不顺的职场建议咨询【www.richdady.cn】 前世老公的前世记忆咨询【www.richdady.cn】 强迫症咨询【www.richdady.cn】 官司【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 冤亲债主干扰【企鹅383550880】√转ihbwel 什么原因意外的心理调适【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 精神不振的解决方法【企鹅383550880】√转ihbwel “缺心眼”对人际交往的影响咨询【σσЗ8З55О88О√转ihbwel 婴灵的前世记忆咨询【微:qq383550880 】√转ihbwel 脑部不清晰的自我提升【企鹅383550880】√转ihbwel 邪灵咨询【σσЗ8З55О88О√转ihbwel 如何克服升迁障碍?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 暗恋的心理成长【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的职场建议咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老公的前世因果咨询【σσЗ8З55О88О√转ihbwel 外灵的干扰特征咨询【σσЗ8З55О88О√转ihbwel 前世缘份的重逢故事咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的缘分解读【企鹅383550880】√转ihbwel 网站前端 网站报价方案 企业的网络安全 五种网络营销方法 网络安全信息法 美国 2000 不属于网络营销的职能 网站前端 沈阳做企业网站的公司 支付宝全网营销软件 桂林做手机网站 个人上网确保网络安全 滕州网站优化 互联网内容分发网络安全防护检测要求 手机微信一体网站建设 百度网络营销能力秀 计算机网络安全等级 河北网络安全周直播 济南营销型网站公司 信息安全等级保护证书 信息安全技术 终端计算机系统安全等级技术要求,-1 建网站视频 胶州建网站 网络安全威胁例子 顺的品牌网站设计信息 动力无限做网站 网络安全攻击 网络营销事件介绍 网络安全技术吧 网站报价方案 asp网站源码 公司网站定制 建手机网站一年费用 网站开发需要什么技术 莆田网站建设 漯河做网站 广州网站制 社区网站 信息安全 学院网络安全解决方案 网络安全销售招聘 互联网+信息安全,-1 公司网络安全做什么 网络安全销售招聘 顺的品牌网站设计信息 常见的网络安全体系 网络营销网站推广 安阳网站制作 绿盟网络安全 网络营销手段 网站怎么做域名实名认证 万州做网站 正规的搜索引擎营销企业 计算机网络安全等级 开展网络安全工作 佛山本地的网站设计公司 做门的网站建设 常用的网络安全系统日志分析工具 网站报价方案 网站设计模板免费建站 工业控制系统 信息安全标准 营销对企业的重要性常州网站设计制作 企业品牌类网站 网络安全与管理专业湖南企业全网营销 网站前端 网络安全信息法 美国 2000 公司网络安全培训 整合营销一站式服务 网站建设公司平台 信息安全的基本目标网站怎么添加管理员 胶州建网站 网络安全程序设计营销解决 莆田网站建设 安阳网站制作 独特的网站 网站开发需要什么技术 支付宝网络安全 互助网站制作公司 网络安全信息法 美国 2000 网络安全威胁例子 广州网站制 网络品牌网站建设 天津信息安全等级保护 淮北网站建设 公司网络安全做什么 支付宝全网营销软件 中华人民共和国网络安全发 天津信息安全等级保护 电气营销型网站方案 中国国家信息安全局 五种网络营销方法 2017网络安全生态峰会 做静态网站 佛山新网站建设特色 信息安全等级保护证书 中山做网站的公司 万州做网站 网络营销工具分为沟通类和什么 营销推广的策划书 网络安全三合一是什么意思 信息安全技术 终端计算机系统安全等级技术要求,-1 嵊州网站 互联网+信息安全,-1 深圳口碑营销 贵州 网站建设 济南学网络营销 互助网站制作公司 2017网络安全会 日程 网络营销工具分为沟通类和什么 企业的网络安全 企业网络安全 网站报价方案 国家信息安全认证服务资质 公司网站设 网站怎么装模版 漏洞扫描与网络安全 网站建设规划方案 绿盟网络安全 个人信息安全的例子 购物网站建立 中英文网站设计 邢台网站制作地方 售后服务网站 社区网站 信息安全 手机网站建设哪个 贵州 网站建设 江门网站设计 独特的网站 金水郑州网站建设 河北网络安全周直播 百度网络营销能力秀 建手机网站一年费用 网络安全预算 建设通网站 安阳网站制作 学网络安全技术到 济南营销型网站公司