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
信息网络安全普及教育培训教程习题网络营销公关九九建站-网站建设 网站推广 seo优化 seo培训网络营销的技巧是什么广东汽车品牌网站建设制作网站网络营销的政策无敌邮件营销软件为什么发送的邮件被qq邮箱直接送到了垃圾站网站推广策略网络营销课程整体设计自家破,遇恩师、交良友,人生多不易,卧薪尝胆走江湖。人生多艰难,不过终是热血少年,起于乞丐,经艰险、遭磨难,玉汝于成,本就是英雄少年。万物终结之地已重新诞生出再次终结万物之人。 在虚空之树的见证下,新一轮的进化游戏已经开始。 无数魔神间的博弈将再次拉开序幕! 生化危机,合金弹头,异形,星际争霸,拳皇,西游释厄传... 被选召的契约者们将进入一个又一个危机四伏的世界完成虚空之树所给予的各类挑战! Q群:311763467我睁眼闭眼脑袋里面全是你,我做梦都想保护你,你尽管往前走,你保护世界我保护你。60年代的一次偶然相遇,从此,他和她的命运便紧紧联系在一起。他为了她,抛弃地位和财富,宁愿一切从零开始。她为了他,含泪步入他门,但心灵深处却从未与他远走。两心相依,是他们今生的企盼。来世聚首,是他们此生最大的心愿。且看他们在生命的路途中,如何用青春的音符,演奏一曲都市恋歌;怎样用智慧和汗水,携手编织明天的彩虹。一名普通职业经理人,意外魂穿到民国,成为一名军统特工,没有金手指,凭借前世的信息,依靠自己的知识并不断地学习、成长,在风云变幻的时代中为国家,为民族贡献自己的力量,并创造了一段段精彩的特工传奇……一次任上失误,小判官降临人世缉拿逃犯将功赎罪,缺不小心在世间创下系列故事,看看他如何在纷繁世间成就神鬼之判“这是哪?我不是在家么?刚才好像地震了,我好像被压死了……那我就好好再活一世吧!”叶岚想着,时间已经过去了许久。 “首先可以排除这里是仙侠世界,因为按照常规的话,仙侠小说一般都是古代!也不是末世,所以说……难不成是奥特世界么?但是我还是需要再想一想才好!”叶岚可是博士生,思考能力可不弱! “那我最近去一趟商场吧!那里应该有新闻!” 第二天…… “因帕克危机?难不成……捷德?那我肯定在奥特世界了!不然不可能没人管贝利亚!” “诶!兄弟!还什么因帕克危机,贝利亚,肯定是假的!这图片肯定是伪造的,对吧?”一个男子碰了碰他,笑着说。 “我觉得很有可能是真的!”叶岚边想边说。 (叶岚内心:我?不是碍于颜面就说这里有奥特曼了!) “诶?为什么?”那个男子问他到 “因帕克危机是由于一颗导弹而发生的!从图片里仔细观察就能看出!只要有怪兽,就一定会有奥特曼的!这是以前的事情,但是隔了几年了,可能也会出现怪兽了!”叶岚朝他道。 一位现初二的男学生的真实生活,随便写写,在不高兴的时候可以抒发一下。也请大家支支招,这样最好。不可一世的玄帝重生地球,发誓猥琐发育,靠着茅台修炼,被迫学习泡妞,而让他没想到的是,岳母竟是前世灭他满门且与他同归于尽的女帝。得知这个消息的唐玄虎躯一震,嘴角上扬:“既然如此,我有一个大胆的想法……”飞星坠世,山庄尽屠,一老一少骑着大青马离去,十余年后,小子出成,老人带着他重回少林,掀开五十年前的江湖风雨,故事之后,小子又该何去何从? 江湖一统,究竟是壮举,还是阴谋? 背后之人,到底是英雄,还是奸贼? 佛门四蒂,上浩传人,华山君子剑,川蜀姥姥山,又将卷起怎样的江湖故事?
国内最好的信息安全公司 信息安全服务资质安全工程类 国家信息安全工程研究中心 怎么用域名建网站 信息安全核心 网站建设中图片 营销培训讲课网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 南京专业做网站的公司国内营销公司 信息安全设备厂家,-1 最新网上营销方法 大龄剩女的婚姻选择有哪些?【www.richdady.cn】 感情纠纷的自我提升【www.richdady.cn】 升迁障碍的职业发展如何规划?咨询【www.richdady.cn】 与公婆前世的前世缘分【www.richdady.cn】 财运不佳的改善方法【www.richdady.cn】 脑部不清晰的自我提升【企鹅383550880】√转ihbwel 暗恋的解决方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的母亲的咨询技巧【σσЗ8З55О88О√转ihbwel 阴间生活的前世修行【微:qq383550880 】√转ihbwel 脑部不清晰的解决方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的前世影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 老公家暴的前世因果【σσЗ8З55О88О√转ihbwel 人际沟通障碍解决咨询【www.richdady.cn】√转ihbwel 家庭关系的心理调适方法有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的父亲的去向解析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 去世的父亲在哪咨询【www.richdady.cn】√转ihbwel 与男友前世的影响分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的家庭支持咨询【σσЗ8З55О88О√转ihbwel 前世老公咨询【σσЗ8З55О88О√转ihbwel 强迫症的案例分享咨询【www.richdady.cn】√转ihbwel 信息安全服务资质安全工程类 无敌邮件营销软件为什么发送的邮件被qq邮箱直接送到了垃圾站 2013年我国互联网网络安全态势综述 网站设计模块 推广网站多少钱 哪种网络营销最赚钱 全球信息安全认证 做定制网站 国内 信息安全 网络营销公关 网站多语言 信息网络安全 司法解释 开放网络安全吗 网络营销平台的建设 房地产网站制作 国家信息安全工程研究中心 2012年中国互联网网络安全态势报告 关于网站设计的价格 网络信息安全交流会 昆明网站排名优化 有哪些营销公司 车载网络安全 信息网络安全普及教育培训教程习题 牛蛙网络营销怎么样 网站推广营销实训方案 信息安全测评机构 资质 上海网络安全检测公司排名 网洛营销案例网站创建公司网站 数据库营销 委托建网站需要多少钱 网络安全日 赛 柳市做公司网站 智慧城市网络安全 国家信息网络安全局 信息安全 国家 学院,-1营销起源于什么时候 信息安全测评机构 资质 深圳企业网站建设报价 网站框架图 企业互联网营销的策略 成都网站建设电话 北京响应式的网站设计 张家港早晨网站建设 网络安全ppt 下载 保护信息安全的技术和手段有哪些,-1 网站内页 信息安全风险评估工具 长沙建立网站 怎样弄网站 营销型网站建设 网络安全ppt 下载 上海做网站的公司官网 网站推广策略 2012年中国互联网网络安全态势报告 网络安全测试请示 广东汽车品牌网站建设 优秀网站 网络营销平台的建设 国家注册信息安全 中国信息安全平台 信息安全 等级评估中心 长沙建立网站 国际网络安全 南京专业做网站的公司国内营销公司 全球信息安全认证 网站推广策略 网站制作及排名优化 网络信息安全交流会 微博营销运营方案 推广网站多少钱 网站框架图 黄国外网站 信息网络安全技术培训 网络e营销 网站优化合同 企业互联网营销的策略 网络营销的政策 智慧城市网络安全 小程序营销案例 网络营销的策略是什么 网络安全 数据安全 网洛营销案例网站创建公司网站 容易做的网站 方案网站 国家信息安全工程研究中心 网站推广营销实训方案 信息安全不猛 信息安全设备厂家,-1 推广网站多少钱 网络安全与信息办公室 网络营销的职位有什么 网络信息安全协议书 信息安全测评机构 资质 网络安全协会文件编号 济南信息安全管理培训,-1 网站色调 房地产网站制作 国家信息安全工程研究中心 乾冠信息安全 企业的整合营销 南宁网站优化 开放网络安全吗 网络安全是 营销式网站 长春全网营销 小程序营销案例 全国公安机关网络安全保卫工作会议 网络安全检查方案 电子邮箱营销优势 信息安全师国家职业 网络安全 个人隐私 文章 我国的网络安全现状分析 网络安全专题知识宣传 网站设计模块 国家信息网络安全局 网络安全竟赛 牛蛙网络营销怎么样 北京响应式的网站设计 上海做网站的公司官网 淘宝店铺营销推广方案 开放网络安全吗 中国信息安全标准分类 单页的网站怎么做的 昆明网络营销招聘 无敌邮件营销软件为什么发送的邮件被qq邮箱直接送到了垃圾站 上海网络安全检测公司排名 信息安全厂商 银川制作网站 武汉国家网络安全中心 牛蛙网络营销怎么样 九九建站-网站建设 网站推广 seo优化 seo培训 怎样弄网站 怎么用域名建网站 集中营销的优势 计算机网络信息安全证 网站免费注册 柳市做公司网站 信息安全 等级评估中心 集中营销的优势 江苏 信息安全 信息安全设备厂家,-1 容易做的网站 信息安全服务资质安全工程类 青岛外贸网站建站公司 昆明网络营销招聘 信息网络安全 司法解释 智慧城市网络安全 信息安全不猛 车载网络安全 哪个网站是专门为建设方服务的 委托建网站需要多少钱 网络营销的政策 单位信息安全等级保护工作部署 哪种网络营销最赚钱 广东汽车品牌网站建设 成都网站建设电话 多边形网站 2013年我国互联网网络安全态势综述 有哪些营销公司 车载网络安全 网络与信息安全事件 深圳企业网站建设报价 免费网站建设怎样 网络安全日 赛 昆明网站排名优化 优秀网站 网络微信营销公司简介 分类网营销 江西网站设计团队 信息安全的课程 网站建设中图片 国内最好的信息安全公司 淘宝店铺营销推广方案 国家信息网络安全局 网络e营销 网站管理 成都网站建设电话 信息安全大会 上海,-1 青岛外贸网站建站公司 上海做网站的公司官网 网站推广策略 2012年中国互联网网络安全态势报告 网络安全测试请示 广东汽车品牌网站建设 优秀网站 网络营销平台的建设 国家注册信息安全 中国信息安全平台 信息安全 等级评估中心 长沙建立网站 国际网络安全 南京专业做网站的公司国内营销公司 全球信息安全认证 网站推广策略 网站制作及排名优化 网络信息安全交流会 微博营销运营方案 推广网站多少钱 网站框架图 黄国外网站 信息网络安全技术培训 网络e营销 网站优化合同 企业互联网营销的策略 网络营销的政策 智慧城市网络安全 小程序营销案例 网络营销的策略是什么 网络安全 数据安全 网洛营销案例网站创建公司网站 容易做的网站 方案网站 国家信息安全工程研究中心 网站推广营销实训方案 信息安全不猛 信息安全设备厂家,-1 推广网站多少钱 网络安全与信息办公室 网络营销的职位有什么 网络信息安全协议书 信息安全测评机构 资质 网络安全协会文件编号 济南信息安全管理培训,-1 网站色调 房地产网站制作 国家信息安全工程研究中心 乾冠信息安全 企业的整合营销 南宁网站优化 开放网络安全吗 网络安全是 营销式网站 长春全网营销 小程序营销案例 全国公安机关网络安全保卫工作会议 网络安全检查方案 电子邮箱营销优势 信息安全师国家职业 网络安全 个人隐私 文章 我国的网络安全现状分析 网络信息安全协议书 网络安全专题知识宣传 国家网信网络安全应急 网络安全测试请示 银川制作网站 樟木头的建网站公司 网洛营销案例网站创建公司网站 网络营销的职位有什么 各国网络安全部门 最新网上营销方法 樟木头的建网站公司 营销培训讲课网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 网站内页 信息安全核心 营销培训讲课网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 网络安全 个人隐私 文章 国家注册信息安全 网络安全会议 网络营销公关 智慧城市网络安全 信息安全厂商 单位信息安全等级保护工作部署 信息安全发展过程 网络安全企业 深圳 网站制作及排名优化 网络安全竟赛 计算机流行的信息安全产品 好的信息安全论坛 计算机网络信息安全证 网络营销的技巧是什么 信息安全的课程 保护信息安全的技术和手段有哪些,-1 网站优化合同 重庆网站建设优化 网络信息安全员培训 建行企业网站 信息安全服务资质安全工程类 张家港早晨网站建设 网络安全专题知识宣传 单页的网站怎么做的 信息安全应急响应中心单一产品企业或多元化产品企业的网站建设与策划有什么不同? 服装网站模板 呼和浩特企业网站制作 有哪些营销公司 方案网站 营销型网站建设 开放网络安全吗 信息安全服务资质安全工程类 信息安全 国家 学院,-1营销起源于什么时候 网络安全攻防工资 美国网络安全中心主任 网站访问者 广州市手机网站建设 网络营销的策略是什么 信息网络安全普及教育培训教程习题 信息安全大会 上海,-1 建网站咨询 合肥微营销公司 做定制网站 网络营销好学吗? 济南网络营销训机构 国家网信网络安全应急 创建网站公司 徐州 关于网站设计的价格 b2c网站有哪些 亳州网站建设 信息安全师国家职业 北京高端网站设计外包公司 国内 信息安全 信息网络安全公安部重点实验室 重庆网站建设优化 呼和浩特企业网站制作 网络营销课程整体设计 网络安全法制定本行业 wifi信息安全登记平台 数据库营销 网络安全竟赛 企业网络营销方案 数据库营销 国内 信息安全 新媒体营销有哪些 国内最好的信息安全公司 网络安全ppt 下载 信息安全应急响应中心单一产品企业或多元化产品企业的网站建设与策划有什么不同? 网络安全关注的问题 小榄网站设计 如何重置网络安全密钥 网站多语言 腾讯网络安全研|究中心 网站内页 改网站标题 哪个网站是专门为建设方服务的 设计师交流网站 网络信息安全员培训 万户网络网站顾问 蓝盾网络安全(二级)测评记录 中国信息安全平台 网络安全 数据安全 电子邮箱营销优势 委托建网站需要多少钱 网站色调 策划营销 亳州网站建设 wifi信息安全登记平台 怎样弄网站 信息安全专业分支 策划营销 济南之美营销策划有限公司 合肥微营销公司 网站免费注册 济南之美营销策划有限公司