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 in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.

<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

p>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="span6">
        Level 1 column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">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>

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>

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: 767px) { ... }
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }
  /* 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 hiding 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
工控网络安全 研究方向美国网络安全战略对中国有何启示哪种网络营销最赚钱微信广告和微信营销方案第六届全国网络安全等级保护技术大会网络信息安全员培训计算机安全中的信息安全主要是指用户信息安全培训,-1上海网络安全检测公司排名蓝盾网络安全(二级)测评记录天外来物,犯之地球,千亿之人,迎难而战在唐僧师徒四人成圣之后。百年后,人间的邪教与冥界沟通准备推翻仙界,并重新的创立一个新的世界与秩序。而这时悟空与另三人踏上了一场“路途”。你是想当无名小卒,还是名扬天下? 2050年,一颗直径超过10公里的小行星落入浪漫之城玛丽安娜境内,随后,地震引发的海啸淹没了第五大陆,全球气候发生剧变,爆炸扬起的尘埃覆盖了天空,遮蔽了太阳,全球温度下降了约15摄氏度,人类陷入恐慌之中。 2051年,武器商人赫尔曼以合众国的名义进入第二大陆东北角的贫穷国家,索尼亚。 2055年,第二大陆被索尼亚统一 2059年,第四大陆,雨林之国森巴的原政府被推翻,新政府上台。 2060年,第一大陆南部国家被不明势力尽数占领。 2061年,第五大陆剩余土地上,除不列颠帝国外,全部沦陷,同年,赫尔曼发表通告,宣布建立人类复兴政府,向现存各国宣战。 同年,世界建立了北部战时联合国,东部战时联合国以及西部战时联合国,向人类复兴政府宣战。 2074年,这是世界变成地狱的13年后,也是故事的开端。 一个中土废材艺术家,获得了穿越神魔两界的能力,成为超级异能人,同时发生了一连串既可笑又匪夷所思的事情,打破了三界千年的机械化运作,重新恢复了人类世界的生机活力,找到了爱情和生命的真正意义。 绝世天帝重生为家族赘婿,受尽他人白眼,却觉醒宝物镇天神符。 修武道,踏万界,镇天地万物,成众生之主。 “这世间天才千千万,唯我林枫一人能镇压!”loser张谅一顿酒把自己喝回了千禧年间! 重来一次,看张谅如何把握住机会实现财富自由! 顺便谈几场轰轰烈烈的恋爱! 可是上学真的很痛苦…… 你还是把我送回去吧……万界领主游戏开启,所有人穿越异世成为一国之君。 但几天之后,大家才悄然醒悟自己将要面临的处境。 藩王作乱,宦官专政,太后垂帘… 在这些势力眼中,国君只不过是任人揉捏的傀儡蝼蚁。 而这并不是演习,稍有不慎,即是亡国换代,身死异世。 好在,梁秋觉醒了帝皇模拟器。 【获得三道帝皇气运,现在开始模拟】 【二月廿二日,你成为一国之君】 【二月廿三日,你励精图治,朝堂之上震展龙威!】 【二月廿九日,被刺客潜入皇宫杀害,你死了】 【模拟结束,可永久保留一道帝皇气运】 …… 当七日后的新手保护期结束时,梁秋望着这败乱朝堂温雅冷笑。 “是时候变天了。”【都市+剑修+ 读了红楼梦,每个人心里都有一个红楼“梦”.... 这是一个平平无奇,不知所谓,符合环境,普通凡人版的文艺梦。
武大信息安全夏令营 提升网络安全意识 建议 口碑营销的概念 网络安全技术规范及标准 上海信息安全中心 以前的域名是非经营性网站备案现在如何转成经营性网站备案 京东区域营销策略 达内培训 网络营销机构 网站模板下载 无网站营销 婴灵的超度方法【www.richdady.cn】 财运不佳的财富积累【www.richdady.cn】 发育倒退【www.richdady.cn】 什么原因意外的前世故事咨询【www.richdady.cn】 人际关系不好的前世因果【www.richdady.cn】 前世缘份的前世缘分【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 失业的前世记忆【企鹅383550880】√转ihbwel 大龄剩女的社交技巧【σσЗ8З55О88О√转ihbwel 化解咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 祖灵对家族的影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老公的识别方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的心理调适咨询【企鹅383550880】√转ihbwel 与男友前世的前世解析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何克服“缺心眼”的问题【www.richdady.cn】√转ihbwel 婴灵的超度与心灵净化咨询【企鹅383550880】√转ihbwel 暗恋的心理调适咨询【www.richdady.cn】√转ihbwel 前世今生的缘分再续【www.richdady.cn】√转ihbwel 孩子厌学的咨询技巧【微:qq383550880 】√转ihbwel 情感心理咨询在线【www.richdady.cn】√转ihbwel 发育倒退的医学检查【www.richdady.cn】√转ihbwel 网站模板下载 重庆璧山网站制作公司哪家专业 网络信息安全模型 上海信息安全培训班,-1 无锡网站推 网络营销师在哪考 网络安全ppt 下载 营销型网站建设 网站建设的网站定位 网络安全框架 nist 企业建网站的 程序 关于举办第11届(2014)信息安全与对抗技术竞赛登陆首页 苏州做网站推广的公司 免费域名注册网站 手机微网站 请公司建网站 宝安做网站的 网络安全会议 政府无线网络安全隐患 怎么做问答营销的策划 第六届全国网络安全等级保护技术大会 我理解的网络营销 网络营销哪个学校好 上海信息安全???生招聘 信息共享与信息安全 网络营销方案 杭州网站设计 信息安全博士 网站建设一条龙 网站备案注销 亳州网站建设 信息安全防护等级单一产品企业或多元化产品企业的网站建设与策划有什么不同? 无锡网站推 青岛模板化网站建设 免费新建网站 网站中主色调 网络安全关注的问题 网络信息安全管理员培训 中科院 网络与信息安全 永久免费企业网站申请 全球网站建设服务商 网络安全监测云平台 对搜索引擎营销的认识 信息安全服务资质安全工程类 网络营销实训 广东省信息安全服务备案 信息网络安全普及教育培训教程习题 建行企业网站 联通网络安全资质营销推广理论 联通网络安全资质营销推广理论 联通网络安全资质营销推广理论 武汉 信息安全比赛 2015 中国信息安全标准分类 永久免费企业网站申请 总结网络营销岗位所需能力 营销型网站建设 上海网络安全检测公司排名 总结网络营销岗位所需能力 免费网站建设怎样 信息网络安全普及教育培训教程习题 龙岩做网站 网络营销软文案例分析 深圳微网站建设 杭州网络安全研究院 中科院 网络与信息安全 微信广告和微信营销方案 网站首页制作 请公司建网站 自己怎样建立个人网站 信息安全技术手段 江苏 信息安全 网站内容的实现方式 京东区域营销策略 信息安全服务资质安全工程类 营销和运营哪个重要性 网络营销研讨班 网络营销资料 网络信息安全员培训 建行企业网站 信息安全服务资质安全工程类 网站怎么添加管理员 高大上设计网站欣赏 苏州做网站推广的公司 信息安全防护等级单一产品企业或多元化产品企业的网站建设与策划有什么不同? 创建自己的个人网站 重庆专业的网站建设 手机微网站 网站颜色搭配网站 营销型网站建设 长沙做网站的 网络安全ppt 下载 网络安全技术规范及标准 信息共享与信息安全 重庆网站开发设计公司电话 长沙做网站的 信息安全技术手段 网络信息安全管理员培训 app营销推广公司电话 网络安全 百度网盘 网站建设的网站定位 上海信息安全???生招聘 网络信息安全管理员培训 网站中主色调 信息安全场景 营销成功 网站怎么办信息安全技能树 中科院 网络与信息安全 营销在哪里培训 青岛模板化网站建设 美国信息安全部门 无敌邮件营销软件为什么发送的邮件被qq邮箱直接送到了垃圾站 广州市信息安全测评 以前的域名是非经营性网站备案现在如何转成经营性网站备案 网站的申请dns根服务器与网络安全 京东区域营销策略 免费新建网站 中科院 网络与信息安全 网络营销实训 营销型网站建设 用户信息安全培训,-1 做公司网站的专业公司深圳 昆明网站设计公司 网络营销广告策略 网站设计的论坛 信息安全防护等级单一产品企业或多元化产品企业的网站建设与策划有什么不同? 重庆网络营销服务 自己建网站程序 网络信息安全管理员培训 网信部门和有关部门获取的网络安全保护信息 营销和运营哪个重要性 重庆璧山网站制作公司哪家专业 龙岩做网站 美国网络安全战略对中国有何启示 潜艇 信息安全 网络安全 断网 网络安全监测云平台 哪种网络营销最赚钱 指纹营销 网络信息安全协议书 企业网站适合做成响应式吗 营销型网站建设 台州市网站建设 怎么做问答营销的策划 网站上线后 信息共享与信息安全 网络安全ppt 下载 全球网站建设服务商 网络营销资料 口碑营销怎么开展 做网站好处 网站颜色搭配网站 搜索引擎 营销 高大上网站建设公司 网站策划案 以前的域名是非经营性网站备案现在如何转成经营性网站备案 政府无线网络安全隐患 网站上线后 移动网络安全吗 网络信息安全竞赛 网络营销研讨班 亳州网站建设 网站模板下载 第六届全国网络安全等级保护技术大会 上海信息安全???生招聘 牛肉营销 亳州网站建设 网络营销方案 口碑营销的概念 武汉 信息安全比赛 2015 网络营销方案 网络安全等级保护细则 工控网络安全 研究方向 网站备案注销 免费新建网站 网络安全技术规范及标准 创建自己的个人网站 网站设计的论坛 美国网络安全战略对中国有何启示 网络营销师在哪考 青岛模板化网站建设 网络营销常用媒介方式 长沙做网站的 建行企业网站 网络营销广告策略 重庆网络营销服务 重庆网站开发设计公司电话 信息共享与信息安全 网络信息安全竞赛 网站托管维护 网络安全会议 南京交通大学信息安全 免费营销型网站建设 东莞营销型网站建设 口碑营销怎么开展 高大上网站建设公司 广州市信息安全测评 江苏 信息安全 企业网站适合做成响应式吗 对搜索引擎营销的认识 济南信息安全管理培训,-1 蓝盾网络安全(二级)测评记录 达内培训 网络营销机构 亳州网站建设 自己怎样建立个人网站 免费营销型网站建设 网络营销资料 如何搭建自己的网站 网络营销广告策略 网络营销方案 免费营销型网站建设 政府无线网络安全隐患 贵阳网站制作免费 中科院 网络与信息安全 网络营销方案 网络信息安全协议书 上海信息安全中心 自己怎样建立个人网站 网络信息安全协议书 怎么做问答营销的策划 广州市信息安全测评 京东区域营销策略 无敌邮件营销软件为什么发送的邮件被qq邮箱直接送到了垃圾站 国家信息网络安全局 济南信息安全管理培训,-1 杭州网络安全研究院 达内培训 网络营销机构 重庆璧山网站制作公司哪家专业 银川制作网站 网站怎么添加管理员 网信部门和有关部门获取的网络安全保护信息 网络安全 断网 提升网络安全意识 建议 网络营销的政策 牛肉营销 济南信息安全管理培训,-1 东莞营销型网站建设 网络信息安全管理员培训 网站建设一条龙 网络营销软文案例分析 以前的域名是非经营性网站备案现在如何转成经营性网站备案 新媒体营销有哪些 请公司建网站 中国信息安全标准分类 工具型网站 西安信息安全企业,-1 对搜索引擎营销的认识 第六届全国网络安全等级保护技术大会 重庆网络营销服务 搜索引擎 营销 网络营销常用媒介方式 网络营销方案 全球网站建设服务商 app营销推广公司电话 牛肉营销 网络安全等级保护细则 上海信息安全培训班,-1 无锡网站推 女生做网络营销 网站的申请dns根服务器与网络安全 永久免费企业网站申请 做公司网站的专业公司深圳 青岛模板化网站建设 网络与信息安全事件 网站建设一条龙 网站管理 江苏 信息安全 杭州网络安全研究院 海尔内容营销 第六届全国网络安全等级保护技术大会 贵阳网站制作免费 用户信息安全培训,-1 南京做网站 广州市信息安全测评 重庆璧山网站制作公司哪家专业 网络安全监测云平台 如何通过dreamweaver做一个完整丰富的完整网站全国网络安全等级保护测评机构推荐目录 上海信息安全培训班,-1 女生做网络营销 上海信息安全中心 牛肉营销 青岛开发区制作网站公司 信息安全 2016 达内培训 网络营销机构 深圳微网站建设 哪种网络营销最赚钱 信息安全博士 河源网站建设 青岛模板化网站建设 无网站营销 中国信息安全标准分类 关于举办第11届(2014)信息安全与对抗技术竞赛登陆首页 京东区域营销策略 南京做网站 无网站营销 2016年 网络安全规划方案 免费新建网站 口碑营销怎么开展 2016年 网络安全规划方案 信息安全技术手段 用户信息安全培训,-1 成都学校网站制作 南京交通大学信息安全 网络营销定价的特点是 网站设计的论坛 什么是网络营销概念 网络营销方案 台州市网站建设 工控网络安全 研究方向 上海网络安全检测公司排名 免费域名注册网站 重庆网络营销服务 网络与信息安全事件 网络安全会议 广告营销的好处 信息安全防护等级单一产品企业或多元化产品企业的网站建设与策划有什么不同? 昆明网站排名优化 口碑营销的概念 网络信息安全综述,-1 东莞营销型网站建设 网站怎么添加管理员 网站的申请dns根服务器与网络安全 南京交通大学信息安全 美国网络安全战略对中国有何启示 网络营销实训 贵州网站推广优化 计算机安全中的信息安全主要是指 网站建设一条龙 工具型网站 总结网络营销岗位所需能力 网站内容的实现方式 无网站营销 网络e营销 网站怎么办信息安全技能树 网络安全 数据安全 网络信息安全模型 国家信息网络安全局 深圳微网站建设 网络营销哪个学校好 免费域名注册网站 网信部门和有关部门获取的网络安全保护信息 东莞营销型网站建设 深圳微网站建设 信息安全防护等级单一产品企业或多元化产品企业的网站建设与策划有什么不同? 总结网络营销岗位所需能力 贵阳网站制作免费 信息安全设施建设情况 网络营销推广宝典 关于举办第11届(2014)信息安全与对抗技术竞赛登陆首页 企业网站适合做成响应式吗 我理解的网络营销