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
专业网络营销整合服务网站建设前期资料提供网络安全检讨书工业控制系统网络安全网站设计公司 无锡信息安全体系建设禁忌网站徐文渊 网络安全营销综合平台首页信息安全高校衡水如何做企业网站网络安全工程 培训纵深防御原则 网络安全精品网站建设公司人大信息学院信息安全排名网络安全文明网络信息安全等级保护综合管理系统以色列的网络安全技术教育机构事件营销案例2016口碑营销的例子杭州网站优化网信办网络安全技术局中国网络安全防护企业网站的维护2012信息安全事件电子化营销网络安全问题反馈平台网站流程网络信息安全 实验室网站设计市场价会点小武功,懂点小医术,醒掌天下权,醉卧美人膝,这是许多男人的毕生梦想! 孙煌是一位从小在某座山里长大的男人,直到有一天……江山如画,美人妆! 龙腾万里,乐逍遥! 一个穿越者的灵魂; 一个当代皇者之命魂; 一个身负上天之意的天女; 当三者相辅相成,为天下先,为苍生意。 匡扶社稷,历经磨难。 是宿命的轮回还是这悠悠天意,人力难为; 朝堂,战场,血雨厮杀,阴谋密布; 烽烟过后,张翼回首看向背后孤寂的威威皇朝,看着曾经的硝烟之处,却早已物是人非。 上马提剑定天下,下马安国保苍生。 ps:慢热,有逻辑,不属于小白文,慎重选择。岳峰,蓝星玩家联盟核心团第四军团长,180级六转大剑士。 在抵御异世界文明入侵失败蓝星彻底沦陷之际,他借助时空神器的力量携带游戏记忆重回三年前,【降临】开服前夕。 三年多的游戏生涯,让他知晓无数赚钱技巧、副本攻略、传说任务、装备出处…… 这些还不算,在第一次登陆游戏的时候,岳峰意外发现背包当中竟然携带了游戏中唯一的圣器《传承之章》。 凭借种种优势,岳峰在游戏中找回爱人,建立势力,统一游戏版图。 当三年后位面融合的时候,异位面降临者们悲哀的发现,等待他们的是游戏内攀升到了极致的工程学科技以及无数装备精良的玩家。 当团结一切力量消灭所有入侵者之后,岳峰发现,更大的挑战,还在后面……凶案连连发生,旷世绝学现世,原始森林险地,让不平静的江南,更是杀气满天。 结束了吗? 从孤儿院出来在外漂泊十几年,却拒绝少年的请求离开了世界。 哈哈,不甘心, 如果上天再给我次机会, 我一定要好好活下去。 江明市民间一线香传人凌冬,在两年前遇到离奇死亡案件。两年后,江明市又发生了同样的特殊案件,江明市公安厅为了调查案件成立了特殊行动小组第七行动小组。江明公安因凌冬在此案件中有重要作用特力荐其加入专案组。顶级刑侦专家孟子仕出任组长,优秀法医夏帆月,优秀刑警付安良,顶级黑客林彬。一桩桩骇人听闻的案子诡异来袭,玉米地失踪案件,清明扫墓失踪案件,女老师支教失踪案件······江明市各路奇人齐聚特案组,为拨开迷雾,寻找真相,挖掘出隐藏在特殊失踪案件后的险恶人心。莫名其妙的姐姐若隐若现,关于师傅的死亡真相支离破碎的一点点出现,凌冬能否在行动小组兄弟的帮助下解开两年前的真相。穷了十好几代,你告诉我叶家有个仙尊老祖? 叶不凡不得已,牵着牛儿,开始了一段弑仙屠魔的之旅! 修炼我又快又猛,杀人我又猛又快! 惹到了萧家?大武朝最鼎盛的修真家族? 那得说声抱歉了,因为主角外挂已到货! 纳尼,老祖下线? 不要紧,都不要紧,我和牛儿冲上仙罡杀天尊! 顾江海有些困惑,不过是加班回来睡了一觉。怎么睁开眼睛之后世界就变了样子。 街上突然路人下手的红眼人、夜晚互相撕咬的怪物、路边的变异植物、会喷火的老虎..........还有复杂的人性。 无论世界怎么变化,活下去才是当下最重要的事情。 他本是龙国最年轻的国医圣手,却因为一次意外,重生回到了四年前。 上一世,他误入歧途,痛失妻女,尝尽了人间疾苦! 这一世,面对妻女的失而复得,他势要弥补当年的遗憾,快意恩仇。 且看一代鬼医传人,如何凭借一手鬼神难辨的惊天医术,守护心中挚爱,成为最强都市奶爸!谢青州凭着祖传的一点道术在末世中苟延残喘十年,最后仍惨死于变异动物口中。 再睁眼,却没想到回到十年前,重生后他做的第一件事,就是找到被他随意丢在客厅桌子上的签筒...... 从此踏上末世修仙路,一日一签保平安!
网站怎么制作 长春微营销 全网营销外包 北京网站建设公 工业控制系统网络安全 网络安全 绿盟 广东做网站策划 用别人网络安全问题 信息安全等级保护 英文 网络安全等保规定 企业网络安全的现状分析 网站怎么制作 Ios网络安全 团队营销案例 微博营销的心得 九月有什么节日可营销 访问相关网站掌握定制定价使用定价免费定价的运用试举例说明 搜索引擎营销漏斗 北邮网络安全研究中心 乐清企业网站建设 贵阳网站建设公司 全网营销外包 外贸平台营销方案 搜索引擎整合营销方案 营销的 信息安全检查 信息安全业务服务资质 广西网络营销使用 无锡网络营销外公司 网站大模板真流量 网络安全法中的网络一 互联网营销项目宏观环境分析的内容有 网络安全检讨书 网站设计市场价 海淀网站建设 rsa信息安全公司 龙岗网站建设 信科网络 工控信息安全专题交流会 信息安全专业... 成功企业的营销