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
信息安全体检要求什么是计算机信息安全营销号软文网络安全培训班病毒营销的定义与特点是什么意思信息安全等级保护申请ui设计和网络营销选择微博营销的原因家具网络营销推广网络安全国标每一次抬头看向无垠星空,可知道在那茫茫宇宙有多少无尽的欲望和折磨。遥远的未来,饱受创伤岌岌可危的地球,七道身影,七神座从天而降,好似神灵一般俯瞰着这个世界。一次次的折磨,一次次的伤痛,让他意识到这世界本就是一切欲望构成的。我,必将颠覆世界,找寻生命的意义。萧宸弥补之前犯下的错上山求教,师傅给予任务下山后抛去怜悯,同情,救出林青雨与其一同报仇雪恨,手握双刀,神挡杀神,佛挡杀佛。 啊~什么?兰若寺! 宿醉的梦晨一觉醒来,发现自己置身于破败的兰若寺! 怀里揣着一只七彩宝鼎~ 不会吧,虽然穿越小说没少看! 可是没想到今个儿轮到自己了! 穿越成谁不好,偏偏成了手无缚鸡之力的寒碜书生! 拿什么跟万恶的黑山老妖斗? 还好,随身携带了一个能够呼风唤雨的无敌模拟系统! 开启了他开挂的诛魔修仙之旅~前世今生,同样的经历,就该同样的命运吗? 看他如何逆天改命。我叫荆少雨,荆轲的荆,年少的少,下雨的雨,出生于南方的一个偏僻的小山村里,故事发生在我十八岁的时候,父母在我出生那年离奇死亡。宇宙因未知原因,总质量大量缺失,导致宇宙持续膨胀时没有足够的物质填充膨胀,迫使这片区域的粒子,甚至连光子都被撕裂成更小的粒子。修复,还是离开......地球,位于猎户支臂上,远离宇宙中心,其上的科学家因为地表的严重核污染和接连不断的战事而无暇抬头仰望天空。国家高层也只关注两件事:科技,战争。科技,为了逃离这颗将绕坠入太阳的行星;战争,为了拥有足够的资源支持科技研发。这间接导致民间的治安管理不再受到重视,全球每年失踪人口瞬间翻了四倍—3000万。而主角也成为这三千万人口中的一员.......没人在意他在哪里,除了他自己。丁锋,被一个快递送到了未知星系,这也算是失踪案件里挺奇葩的了。为了回家,他不得不踏上了冒险的旅程,强化自己。旅程中,丁峰发现好像有什么东西在所谓的真相身后挣扎着,核污染,地球坠日,真的是这样吗?好像一直有一只手拨动宇宙的琴弦,演奏着早已谱写好的序章......一个冷静正直的剑客。   一个自强不息的傻少爷。   和一个刁钻古怪的公主。   他们本不是一路人。   可是一件惊天劫案,让三个性情完全不同的人走到了一起,从此生死与共,祸福相依。   为了追查劫案,他们又无意中卷入了江湖四大家族的明争暗斗之中。   英雄翻身动乾坤,自此天下不太平。   江湖中,十大剑客纷纷现身,四大家族你争我夺;朝野上,萧王一心匡扶社稷,东厂却屡屡诸杀忠臣。   我师三人行,共赴江湖路。风云突变疾,剑中影重重。(注:此书原名《剑中影》,为修订版本,纯武侠风格。)。 主角楚枫穿越到了一个已驯兽师为主体的天玄大陆,为了寻找被楚家囚禁的父母,不断变强。从第一次系统签到获得的麻雀,慢慢进化为上古神兽。急急急,修为高深的仙子要杀我,怎么破局?! “系统已切换成攻略版本,助宿主攻略成功。” 急急急,收不到天姿绝顶的弟子怎么破?! “系统已切换成最强师徒养成版本,为您保驾护航,助宿主登顶最强。” 大科科员王科深深地爱着自己的妻子左丽。王科本人也颇有才华,但是左丽却欺骗他。同事妒嫉,领导排挤,让他很痛苦。在仙境,王科却不断取得成功。
龙岗做网站 网络信息安全博览会,-1 太原网络营销 优帮云 信息安全等级保护申请 网站建设常出现的问题 普及化营销 家具网络营销推广 南京微信营销 b2b网络营销企业过程 专业的网络营销培训 婴灵的超度仪式【www.richdady.cn】 与男友前世的前世修行咨询【www.richdady.cn】 脑部不清晰【www.richdady.cn】 精神不振的自我提升【www.richdady.cn】 感情纠纷的案例分享咨询【www.richdady.cn】 邪灵【微:qq383550880 】√转ihbwel 头脑混沌的生活习惯咨询【微:qq383550880 】√转ihbwel 精神不振的前世因果【www.richdady.cn】√转ihbwel 如何应对冤亲债主的干扰咨询【σσЗ8З55О88О√转ihbwel 阴间生活的描述与传说咨询【企鹅383550880】√转ihbwel 如何提高孩子的阅读兴趣?咨询【企鹅383550880】√转ihbwel 前世缘份的化解方法咨询【企鹅383550880】√转ihbwel 公司破产的案例分享咨询【www.richdady.cn】√转ihbwel 什么原因意外的前世修行咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 不爱读书的前世记忆威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 不爱读书的咨询技巧【www.richdady.cn】√转ihbwel 如何缓解耳鸣症状【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的情感和解威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的自我提升威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的相处之道【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 网络安全法构成我国 信息安全cip 专业的网络营销培训 北京企业建立网站 信息安全与管理评测师 龙岗做网站 沈阳科技网站首页 国内顶级网络安全公司排名 网络安全专家认证 网络营销能力秀做什么 wifi网络安全解决方案 网店营销计划有哪些 企业网页设计网站案例网络安全防护2017 baidu营销学院 网络安全相关网站 现代感网站 信息安全服务管理规范 网站类型网站名称表现主题内容设计色彩搭配服务对象综合网站个人网站 网络信息安全博览会,-1 网络营销营销渠道淄博市网站开发 第三方平台的问答营销 国家公安部信息网络安全专业人员认证 企业网页设计网站案例网络安全防护2017 网络安全证书报名 网络安全中的黑客攻击技术 网络营销的五大定位 网站加黑链 身边的营销 无锡微信网站 什么叫整合营销机构 信息安全安全管理体系法律管理 网络安全管理的目标是 台州哪里做网站 东台网站制作 信息安全专业大学排名2017 国家公安部信息网络安全专业人员认证 网络信息安全部 普及化营销 网吧信息安全证明 网络营销整合 响应国家网络安全 简述网络安全的管理策略 武汉 网站设计公司 选择微博营销的原因 公安部网络安全监察 武汉营销型网站 直复营销与网络营销万先生网站 计算机信息安全技术 专科网络营销就业前景 建立http网站 网络营销方式 软件营销 武汉 网站设计公司 专科网络营销就业前景 如何优化网站 网络安全国标 无锡微信网站 如何优化网站 企业网站项目流程 网站制作推广 信息安全安全管理体系法律管理 ui设计和网络营销 淄博微网站 普及化营销 信息安全竞赛宣传 关于公安网络安全的通报 国际网络安全公司 公安网络安全系统的设计与实现的案例 网站建设未来发展前景 信息安全不涉及的领域 b2b网络营销企业过程 武汉营销型网站 专业的网络营销培训 营销型网站有哪些 什么是计算机信息安全 什么是网络营销工具 珠海营销型网站建设 网络安全证书报名 营销反馈 网络安全产品谁的好 石家庄市制作网站公司 网络信息安全部 电子商务型网站 计算所信息安全 ecshop网站里面有伪静态页面还有部分动态页面不是作弊吧 网络安全.ssl信息过滤ddos 淄博网站设计 广州网站建设哪家比较好 信息安全领域 cia 广州网站优化公司 网络安全产品谁的好 网店营销计划有哪些 九江网站建设 国家公安部信息网络安全专业人员认证 软件营销 银行发的网络安全短信 网站自建 网站加黑链 无锡微信网站 国家网络信息安全座谈 句容网站建设 国际信息和网络安全会议 成都的国家信息安全所 多语言外贸网站设计 互联网平台信息安全 建网站的公司哪家好 广州网络安全评估公司 淄博网站设计 没有任何漏洞:信息安全实施指南 西安信息安全公司排名,-1 baidu营销学院 保障电脑安全和信息安全的建议 有经验的佛山网站设计 网络安全 防御多样化原则 专业的网络营销培训 家具网络营销推广 广州网络安全评估公司 信息安全的前沿技术 网络营销策划的方法 国家公安部信息网络安全专业人员认证 简述网络安全的管理策略 镇江网站seo 石家庄市制作网站公司 网络营销整合 网络营销营销渠道淄博市网站开发 公安网络安全系统的设计与实现的案例 网站类型网站名称表现主题内容设计色彩搭配服务对象综合网站个人网站 国际信息和网络安全会议 什么是网络营销工具 网站速度 信息安全领域 cia 网站建设未来发展前景 保障电脑安全和信息安全的建议 太原网络营销 优帮云 定制网站的好处有哪些