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
上海网站建设的价格网络营销专业都学什么网站代理维护网站导航条代码上海的外贸网站建设公司深圳信息安全企业排名,-1山东济南网站建设搜索引擎营销搜索引擎营销技术论坛微网页营销o2o营销-上海单仁信息移动科技有限公司国家信息安全服务资质查询大国脊梁,重伤失忆! 都市人生,重新开启! 我叫林凡,也叫林无双! 强悍女友,总想为我遮风挡雨,但她不知道的是,都市人生,我才是真正的王!!!石庆猛,原名石猛。1993年6月21日出生在罗溪村7组,2014年10月1日正式发布小说,以笔名石庆猛活动在文学界,可以说文网中一朵未绽放的花朵,其作品包括诗歌、传记、短篇小说、长篇小说。你有经历过人生的大起大落,大悲大喜吗?你能接受这样的狗屁现实吗? 巅峰时的锋芒毕露成为将你打入低谷的力量,意外夺走你在这个世界最后的温馨。 “你只要拯救了那个世界便能够拯救你的父母和挚友,不过那并非是游戏,而是真实,你在那里死去会真的死去,包括拯救失败。并且你无法回到这个世界,这样你还要去吗?” “他们是因我而死的,他们也是我在这个世界唯一存在的理由,所以无论是为了我还是他们,我都必须去。” 脱胎,换骨,洗髓,锻体,炼器,聚灵,称王,封帝,入圣,圣。在这些严格的等级制度下,或许人命只如草芥,强者独尊。 不管这个世界的人有多强,我也会为了你们成为这片天地的剑圣。由于我兄弟孟强的死,我走上了侦探之路,更是接触了很多喜气股改的事情,拐卖儿童、情杀仇杀,总结出了一条经验,不要挑战人性大武王朝,邪异降临,诡异杀人于无形。 江夜携带修改器穿越。 燃血功+一气功,破极【炎阳神功】。 牛魔大力拳+十三太保横练,破极牛魔大力拳.真意。【牛魔真身】 狂风刀+黑虎刀法,破极【霸刀诀】。 疾风掠影+御风步,破极【御风隐形】轻功。 生死看淡,不服就干,这是一个以蛮力,武道,横推一切的故事。秦政穿越成大康王朝的皇帝,一睁眼便在龙床上宠幸后宫美人。 原以为从此便可美人在怀,夜夜笙歌,好不快活。 他却发现这个国家已是权臣当道,世家横行,国库空虚,暴乱四起,异族虎视眈眈。 秦政只好手握屠刀,成为一代铁血皇帝! 顺我者昌,逆我者亡! 乱我江山社稷者,统统都得死!陆逸尘一觉醒来竟然重返90年代,并且获得大医无双签到系统。 重生带系统,开倆挂? 老天爷这么眷顾陆逸尘,陆逸尘自然也不能辜负老天爷。 全省首例肛门再造成形术。 全国首例双肺移植术。 全球首例心脏离体式、内镜下骶骨肿瘤切除术。 …… 一系列全球首例手术做下来,陆逸尘突然发现自己停不下来了,看着在场若干全球闻名的医疗专家,陆逸尘很无奈的叹口气,一群小垃圾,唉,无敌是多么的寂寞。 说实话陆逸尘对钱真没什么兴趣,只是重生了,不当个全球首富玩玩,实在是对不起重生者这个身份。 这个风起云涌的大时代,陆逸尘来了! 玄渊,究竟有多高,带着这个疑问 一位位诸天万界的领袖,踏入了万世轮回 百万年,千万年,重复着同样的命运 直到一位命途多舛少年的出现,命运的齿轮停止了转动,仙魔双瞳,横扫无敌,当远古神魔大战真相浮出水面 少年望着镇压万世轮回的背影,周慕:我这一剑,想问问你,究竟有多高我的第一个小说,想以小说的形式描绘出我(一个肥宅)的幻想世界,故事中男主黑屿在夜晚意外觉醒了沉睡已久的超能力【罗生门】,这是一种通过达成未知条件来不断进化的能力,他将使用【门】中封印的【们】以【漆黑】追逐光明你自己猜
公司信息安全教育 flash网站制作教程 华中科技大学信息安全综合设计与实践 成都网站建设方案 大连网站制作 诸城网站建设 传统市场的营销活动方案 顺德手机网站设计价位 青岛找网站建设公司好 企业网站需要多少钱 与女友前世的识别方法【www.richdady.cn】 有官司【www.richdady.cn】 解梦的前世因果咨询【www.richdady.cn】 大龄剩女的幸福指南有哪些?【www.richdady.cn】 自闭症的康复训练咨询【www.richdady.cn】 为什么过世的前世故事威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 升迁障碍的职业发展咨询【企鹅383550880】√转ihbwel 前世缘份如何影响情感生活?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 儿子不读书的案例分享咨询【企鹅383550880】√转ihbwel 长期精神不振的原因咨询【微:qq383550880 】√转ihbwel 缺心眼咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的风水布局威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 脑部不清晰的心理调适【微:qq383550880 】√转ihbwel 冤亲债主干扰有哪些案例?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 内心恐惧胆怯的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 冤亲债主干扰对生活有何影响?【www.richdady.cn】√转ihbwel 事业不顺的职场突破技巧有哪些?咨询【www.richdady.cn】√转ihbwel 失业【σσЗ8З55О88О√转ihbwel 脑部不清晰的自我提升【σσЗ8З55О88О√转ihbwel 前世老公的前世修行【微:qq383550880 】√转ihbwel 公安部信息安全电视会议 屈臣氏营销 绵阳的网站制作公司 网络安全情况分析 网络营销推广模式 flash网站制作教程 唐山做网站 大连网站制作 天津网站建站公司 下载免费网站模板下载安装 华中科技大学信息安全综合设计与实践 网络营销活动有哪些单位信息安全等级保护工作 那些层属于信息安全技术 国家有网络安全制度吗 桂林做手机网站设计 中国信息安全产业联盟 深圳信息安全企业排名,-1 网络营销销售代理 公安部信息安全监察 广州信息安全 金融网站建设 信息安全稽核通知 加强信息安全意识 自微网站 枣庄网站制作 营销进企业 信息安全 济南 性营销 新浪微博精准营销王 贵州网站制作哪家好 国内信息安全专家 加建网网站 全网营销系统是真的吗 吉安网站建设 企业网站需要多少钱 教你做网站河南信息安全专业 深圳信息安全企业排名,-1 网站的网页2013网络安全案例 新的网络安全文献 屈臣氏营销 网络安全设备应用分析 成都网站建设方案 石家庄手机建网站 购买型网站建设网络安全教育培训 外贸网站模板建立 部队网络安全 公安部网络安全法 华中科技大学信息安全综合设计与实践 三只松鼠的营销手段 饥饿营销广告语 北京市2017信息安全 b2b外贸网站 网络营销学 企业网络整合营销方案 那些层属于信息安全技术 线上线下结合营销策略 公安部信息安全监察 加强信息安全意识 桂林做手机网站设计 郑州网站建设更好 华中科技大学信息安全综合设计与实践 2015年6月 网络安全法 公司信息安全教育 怎么做sem营销 网站建设 cms 下载 网络安全问题分析 保定互动营销 云网客 搜索引擎营销推广是什么职位 成都网站建设方案 网站建设 cms 下载 信息安全评估机构 网络安全的公司 龙岗网站建 信息安全评估机构 怎么做一个网站 那些层属于信息安全技术 网站规划 石家庄手机建网站 高校信息安全建设方案 全网营销系统是真的吗 企业网站需要多少钱 郑州网络营销培训学校 网络营销专业都学什么 广州信息安全 淮安网站建设 网站主题下载 门户网站的建设 公司网站图片传不上去 购买型网站建设网络安全教育培训 开网站成本 网络营销推广模式 北京信息安全服务资质咨询公司,-1 营销策划公众号 营销型网站案例 如何来做全网营销 桂林建网站 国家信息安全标准 微信营销培训总结 网络安全态势感知 外文 微信营销代 2016信息安全 国家信息安全标准 杭州 网络安全公司 北京市2017信息安全 部队网络安全 为什么研究网络营销 交互网站 门户网站的建设 公安部信息安全电视会议 怎么做一个网站 饥饿营销广告语 遵义做网站 关于手机网络安全的 网站建设i 织梦cms 网站所有的链接target属性 怎么统一修改 email营销是什么意思 腾讯网络营销策划方案 诸城网站建设 国家信息安全服务资质查询 宣传营销科的重要性 西安 网站搭建 简述常见网络安全服务 五华区网站 两会 网络安全法 事件营销可执行方案 新浪微博精准营销王 网络安全 逆向 旅游项目网络营销案例 企业信息安全 厂商,-1 c2c网站有哪些 赛事化营销 公安部网络安全法 为什么研究网络营销 枣庄网站制作 国家信息安全认证产品型号证书