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

The default grid system provided as part of Bootstrap is a 940px-wide, 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 we defined as part of our 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

With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

Example

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>

Fluid columns

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

Percents, not pixels

The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Fluid rows

Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

Markup

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

Fluid nesting

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>
Variable Default value Description
@gridColumns 12 Number of columns
@gridColumnWidth 60px Width of each column
@gridGutterWidth 20px Negative space between columns
@siteWidth Computed sum of all columns and gutters Counts number of columns and gutters to set width of the .container-fixed() mixin

Variables in LESS

Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.

How to customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

Staying responsive

Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

<body>
  <div class="container">
    ...
  </div>
</body>

Fluid layout

<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Responsive devices

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

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

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }

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

Test case

Resize your browser or load on different devices to test the above clases.

Visible on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop
网络安全最新技术网络营销就业怎样信息安全 电脑配置推荐网站制作报价优秀企业网站欣赏企业营销服务展示2015网络安全广西网络安全讲竞赛 讲话网络安全技术与应用 订阅网络安全威胁类型济南网站制作公司报价网络安全评价标准主要少年的路途有这不一样色彩和归途,但驶向的是自己内心的终点。 少年赢晨辉和伙伴一起追逐梦想。吕布戏貂蝉? 哥来了,没吕布什么事儿了,貂蝉是哥的暖床丫环! 卫仲道要娶蔡琰? 哥来了,没卫仲道什么事儿了,蔡琰是哥的红颜知己! …… 自古英雄出乱世。 现代苦逼青年刘战回到三国乱世,凭着一腔热血,收猛将,招贤士,纳美女,一步一步崛起,成为一方诸侯……一场全球病毒使人类文明的存在步入了尾声,生存还是毁灭,一个巨大的阴谋交易如同黑夜笼罩,斗争始终不曾停止,人类终究能否迎来黑暗后的黎明......太古年间 四大神兽争锋 引得妖修进入狂潮 公元521年间 四大神兽 古麒麟 古青龙 古白虎 古玄武传承....“我”醒了,我来到了这个世上但身边有奇奇怪怪的事情发生,跟“我”一起来一段奇幻的龙生冒险吧股市,是上帝留存在世间的最后一个伊甸园。 这个伊甸园,是圣人的天堂,凡人的地狱。 不管是圣人又或者是凡人,都被贪婪与恐惧所支配着。 稍不留神,便可能马失前蹄。 是驰骋在天堂里超凡入圣,还是在地狱里摸爬滚打,所有干系。 都寄于…… 指尖之上。抛妻弃子,间接害死了全家,李文军在懊悔中孤独生活了四十年后重生回到1980年。 这一世,他要做实业振国兴邦,带领各行业把技术提前二十年; 这一世,他要弥补所有过错,让家人温饱不愁,平安喜乐。 做出第一部对讲机,拥有了自己矿山,带领开发房地产,钞票哗哗流进来。 赚钱,对他来说才是最容易的事情。 未知的王朝,未知的身世, 内有皇储之争,外有敌国环伺, 作为没落家族子弟, 该何去何从? 风雨飘摇的乱世, 人命如草芥的时代, 在社会底层苦苦挣扎的人, 又该如何主宰自己的命运? 张强大学刚毕业就发生了父亲车祸死亡,有人利用家事躲避追责逃往国外,张强获赔一个废弃金矿,前往淘金时意外获得天外来物,来自M78星系的采矿飞船辅助系统,一步步收集能量,一步步制造科技,一步步强化身躯,炸R国神厕,灭M国黑宫,协助中国统治地球同志银河系!岳峰,蓝星玩家联盟核心团第四军团长,180级六转大剑士。 在抵御异世界文明入侵失败蓝星彻底沦陷之际,他借助时空神器的力量携带游戏记忆重回三年前,【降临】开服前夕。 三年多的游戏生涯,让他知晓无数赚钱技巧、副本攻略、传说任务、装备出处…… 这些还不算,在第一次登陆游戏的时候,岳峰意外发现背包当中竟然携带了游戏中唯一的圣器《传承之章》。 凭借种种优势,岳峰在游戏中找回爱人,建立势力,统一游戏版图。 当三年后位面融合的时候,异位面降临者们悲哀的发现,等待他们的是游戏内攀升到了极致的工程学科技以及无数装备精良的玩家。 当团结一切力量消灭所有入侵者之后,岳峰发现,更大的挑战,还在后面……
市场研究机构idc信息安全 网络信息安全公告 网络安全技术与应用 订阅 网络安全最新技术网络营销就业怎样 自学网营销运营 高端广告公司网站建设 20个中国风网站设计欣赏 计算机信息安全等级划分准则,-1 公司网络安全管理办法 我们网络安全等级保护级别 有官司的原因分析【www.richdady.cn】 耳鸣咨询【www.richdady.cn】 家宅磁场的检测工具【www.richdady.cn】 冤亲债主的干扰影响【www.richdady.cn】 婴灵的化解方法咨询【www.richdady.cn】 前世老公的前世案例【微:qq383550880 】√转ihbwel 孩子不爱读书的阅读计划如何制定?咨询【微:qq383550880 】√转ihbwel 大龄剩女的婚恋建议有哪些?【www.richdady.cn】√转ihbwel 前世今生的轮回转世威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 升迁障碍的职业发展如何规划?【www.richdady.cn】√转ihbwel 前世今生的轮回真的存在吗?【www.richdady.cn】√转ihbwel 特殊学校的课程设置咨询【企鹅383550880】√转ihbwel 冤亲债主的干扰与化解技巧咨询【www.richdady.cn】√转ihbwel 脑部不清晰的解决方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 事业不顺的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 年轻人过世的常见原因咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的轮回存在吗?【企鹅383550880】√转ihbwel 升迁障碍的职业发展如何规划?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 冤亲债主干扰咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的超度与慈悲心【σσЗ8З55О88О√转ihbwel 北京网络营销运营 苏州信息安全等级保护 信息安全 恶意代码 网络安全相关的网站 网络安全技术与应用 订阅 网站建设中心 信息安全分为 网络安全监测报告 网站制作新技术 网站制作 武汉 全网营销云推广 市场研究机构idc信息安全 手机网站生成app 亚太网络安全协会 网站建设趋势2017 技能竞赛信息安全人才 落地页网站 网络营销实战课程下载 我们国家网络安全吗 网络安全评价标准主要 悬浮滚动的网站jquery在线qq客服咨询代码 有6套皮肤可选 昆明建个网站哪家便宜 做网站公司广州 无锡网站 太原做网站 济南网站制作公司报价 信息安全分为 我们网络安全等级保护级别 北京网络安全与维护培训班认识网络营销调查的基本方法是 南宁专业网站制作设计 网络安全技术包括什么 微网站搭建平台 如何用代码设计一个网站有前台和后台一般用什么语言设计网站 微信整合营销是什么 德清做网站 防火墙与网络安全的关系 qq空间营销 武汉网络安全博览会 中科大信息安全学院,-1 公司网络安全管理办法 优秀企业网站欣赏 被黑网站 瑞星:2013年上半年中国信息安全综合报告 郑州医疗网站建设 大数据网络安全测试题 2015网络安全广西 我们网络安全等级保护级别 中企动力官网网站 如何成为网络营销师 app网站制作 高校 网络安全 研讨会 网络安全检测方法 悬浮滚动的网站jquery在线qq客服咨询代码 有6套皮肤可选 鹤壁网站制作 南宁专业网站制作设计 网站做成软件免费 东莞网站推广 推广型网站制作哪家好 福清网站建设 信息安全 恶意代码 整合营销传播的作用 信息安全 电脑配置推荐网站制作报价 qq空间营销 网站设计文档 大学生与网络信息安全 电子商务网站建设资讯 网络安全法和等级保护 南宁专业网站制作设计 简单的网站 咨询手机网站建设平台 徐州商城网站建设 信息安全测评中心主任 网站制作 武汉 大数据网络安全测试题 网站提供商 教育部信息安全研究中心营销工具网 合肥网站建设 信息安全部审核建议 网络营销功能表 旅游网站建站 信息安全部审核建议 徐州商城网站建设 网络安全从业学习指南 网站制作新技术 数字证书 网络安全 瑞星:2013年上半年中国信息安全综合报告 永川做网站的 济南网站制作公司报价 亚太网络安全协会 微博营销的特点是什么意思 网络与信息安全 网络信息安全面临的威胁 社区网站信息安全 武汉做网站价格 信息安全是什么系 上海做网站的公 高校 网络安全 研讨会 技能竞赛信息安全人才 网站公司成功案例怎么写 网络安全会议 建网站哪家好案例 目前流行的网络安全软件 网站建设中心 太原做网站 淄博网站 网络营销实战课程下载 合肥网站建设 网站怎么进入后台维护 市场研究机构idc信息安全 淄博网站 实行信息安全等级保护 信息安全 恶意代码 武汉网络安全博览会 实行信息安全等级保护 手机网站生成app 基于h5的个人网站建设 想建网站 公司网络安全管理办法 网站提供商 网络安全最新技术网络营销就业怎样 网络安全威胁类型 昆明建个网站哪家便宜 我们网络安全等级保护级别 网站优化推广公司 逆向工程 信息安全 gb/t 20984-2007 信息安全技术 信息安全风险评估规范 网络安全技术与应用 订阅 目前流行的网络安全软件 简单的网站 龙岗网站建 陕西网络安全监察大队 微网站搭建平台 申请做网站 遂宁网站设计 苏州信息安全等级保护 北京网络营销运营