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
网御网络安全管理系统v3.0顺德营销网站设计制作房地产网站页面网络安全法 上位法关于网络安全基线信息安全与服务营销劣势营销型网站厦门网站优化营销网站手机站江山如此多娇,引无数英雄尽折腰。因一场奇妙的接触,张耀文等人来到了汉末乱世。面对民族浩劫,他们愤然而起,携手华夏精英扛起民族的大旗。在仙人指引下,掀起了一场王朝与帝国的碰撞。在这里没有遗憾千古的赤壁之恨,也没有好大喜功的官渡之败,更没有霸业破碎的夷陵之憾!这里有的只是金戈铁马的豪情,气吞天地的帝王,决胜千里的谋士,英明睿智的将帅,骁勇善战的将士。在这里,只有强盛辉煌的华夏,有的只是我的民族梦!这是讲述精灵王东东与混沌魔君索伦森之间的关系,以及关于其他精灵王的故事我本对生活已经陷入了深深的绝望,就在我要跳河自杀的时候,一张诡异的招聘单飞到了我的脸上,可恰巧正是这个诡异的招聘单改变了我接下来的人生…出生在河南农村的零零后。从小随着父母搬进城里以后便开始觉得不适应城里的生活,从小自卑又孤僻的他。在现如今离谱的房价和就业困难的压力下。从一个不学无术的少年。变成了一个刻苦,勤奋的孩子。在不懈的努力下,终于考上了省理工的本科。然而却引来了父母的不满意。心灰意冷下选择了离开大学,独自去社会上闯荡。,【妹妹+武道、热血又轻松,御兽+魔法、弥补武道缺,修仙+科幻、精彩又好看,文学+自创、名言嘎嘎多…】 我有一口冥皇棺,可葬天、葬地、葬日月星辰、葬仙神魔圣、葬星空万族、葬宇宙八荒、葬无上大能、葬尽世间一切不公,为万世开太平。 社会不再不仁,学习已不是唯一的出路,灵气复苏,武道兴起、法道繁荣、修仙道法、异能者频繁出现、御兽者也在争其锋芒、不过这一切只是表面,灵气复苏导致地球星空坐标暴露,这么好的一个可利用资源,谁不想对其侵略? 不过,地球上的众人、众兽怎能容其侵略? 又名《猫来》《拳来》《法来》《爷来》《爸来》《星空入侵》《全球高武》《全球御兽》《全球修炼》《全球异能》《开局从爷爷手中接过传家宝》《星空入侵》《全球高武》《全球御兽》《全球修炼》《全球法师》《冥皇棺来》规培医生王磊应聘失败,却获得透视脏器能力,更有神级手术技巧。 幼儿误诊,即将死亡,王磊:我看到了,支气管断裂,马上手术。 主刀医生误伤主动脉,鲜血喷到天花板,王磊轻松搞定。主刀:幸亏王磊在。 农庄爆发奇怪病症,全市医生晕头转向,大佬:快去请王磊! 小小的乡卫生院逐渐成为世界医学中心,无数患者和名医云集于此,周边房价超过市中心。 这一切,都是因为一个人。 在这异能者至上的时代,在这神秘充斥的时代,何者生存三年前,他破产落败,从天堂跌落地狱,尝遍了人情冷漠,白眼奚落,谩骂针对。 三年后,他携一身本领强势回归! 他是神医,也是杀神!不论你是想活命,还是想见阎王,都一个一个来! 东来剑帝率领无数修士,打破九重天宇,杀入圣域之内,斩杀万千神族,却因一人叛变,导致一朝身败,无数修士葬身圣域,魂归天外。 断剑携破碎虚空,十万年之后,少年剑辰降世。 因玲珑剑心被心爱之人所夺,一身修为尽废,幸获乾坤珠认主。 断剑觉醒,记忆复苏,剑辰记起十万年前的过往。 记起自己曾一剑斩断擎天山柱,擎天山柱化作登天仙路。 记起自己曾一剑独入冥间炼狱,冥间炼狱化作轮回之路。 记起自己曾一剑斩破诸天避障,诸天融合化为诸天玄界。 ...... 记起自己曾剑断圣域,无数修士魂断圣域。 他日我为剑帝东来,今日我为剑辰,悟无上剑道,修无垢剑体,势要让这天地再难遮住我的眼,无人能够阻挡我的剑。奇幻仙侠小说我来创作,来我这享受仙侠奇幻之旅
信息安全有限公司排名,-1 昆山企业网站设计 保定市网站制作公司 制作房地产网站页面 虹口做网站 武汉信息安全网,-1 搜索引擎营销怎么做 网站套餐 国家网络安全周logo php网站管理系统 感情纠纷的沟通技巧咨询【www.richdady.cn】 升迁障碍的案例分享【www.richdady.cn】 特殊学校的教育理念咨询【www.richdady.cn】 灵魂化解【www.richdady.cn】 事业不顺的咨询技巧【www.richdady.cn】 意外事故的应急处理方法咨询【σσЗ8З55О88О√转ihbwel 有官司的解决方法【σσЗ8З55О88О√转ihbwel 干扰的常见类型咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 脑部不清晰的环境影响【微:qq383550880 】√转ihbwel 前世今生测试在线咨询【www.richdady.cn】√转ihbwel 发育倒退的前世记忆【微:qq383550880 】√转ihbwel 前世记忆恢复技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运不佳的原因分析【企鹅383550880】√转ihbwel 强迫症的前世因果咨询【σσЗ8З55О88О√转ihbwel 前世今生的缘分揭秘【σσЗ8З55О88О√转ihbwel 意外的前世缘分【σσЗ8З55О88О√转ihbwel 感情纠纷的解决方法咨询【www.richdady.cn】√转ihbwel 什么原因意外的原因分析【www.richdady.cn】√转ihbwel 化解冤亲债主的有效方法咨询【www.richdady.cn】√转ihbwel 突然过世的原因有哪些咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 信息安全测评认证中心 php网站管理系统 佛山网站建设服务器 网页制作 公司网站 苹果支付信息安全吗 南昌企业网站设计 网络安全 指导原则 酒店网络营销的方法 形象类网站 成都网站制作设计 互联网信息安全要求信息 信息安全有限公司排名,-1 宣城网站建设 中国亚马逊营销的特点 网络安全 网站 免费申请网站 长沙o2o网站制作公司 顺德营销网站设计 信息安全意识培训ppt 优秀网络信息安全 嘉兴网站开发 网络安全 数据统计 宣城网站建设 简易静态网站制作流程图 营销劣势 互联网信息安全要求信息 北京网络安全评测公司 美国信息安全博士 杭州网络科技网站建设 建网站挣钱网站被 营销型网站 做一个网站的费用构成 佛山网站建设服务器 建网站要多少钱 无缺陷营销 外贸型网站 无线网络安全性密码 全网营销系统 深圳 网站建设信息 网络与信息安全法 2015.6.1网络安全主题 信息安全有限公司排名,-1 桃城区网站制作公司 做一个网站的费用构成重庆建网站 网站注册域名 建网站挣钱网站被 信息安全人员资质证书 免费申请网站 形象类网站 桃城区网站制作公司 四川网站建设 娱乐营销的优点 湖北省网络安全等级保护网 形象类网站 买网站模板 网络安全和信息化职责 见网站建设客户技巧 买网站模板 手机版网站建设开发 网站运营者 网站套餐 《国家信息化领导小组关于加强信息安全保障工作的意见》 春秋 网络安全 微营销新闻 网络与信息安全法 固原网站建设 网络安全法 上位法 色系网站 微信营销技巧 网络安全有哪些证书 中国亚马逊营销的特点 什么是渠道营销策略 中科大信息安全 中国亚马逊营销的特点 如何架设php网站 外贸型网站 信息安全竞赛时间 酒店网络营销的方法 网络安全攻防战 网警提示信息安全 营销网站手机站 欧盟网络安全 哪一年 无锡微网站开发 昆山企业网站设计 php网站管理系统 做一个网站的费用构成重庆建网站 军用信息安全等级军b级 国内ui网站 郑州营销外包公司有哪些 信息安全应急响应服务 网络与信息安全法 网络营销怎么推广 什么是企业营销网站 娱乐营销的优点 B2B网站系统 信息网络安全杂志 什么是渠道营销策略 买网站模板 信息安全应急响应服务 网站运营者 信息安全等级保护 整改,-1 网络营销战略和策略分析 6.2信息安全 营销劣势 美国信息安全博士 b2b网络营销过程 信息网络安全杂志 形象类网站 杭州网络科技网站建设 社交网络的营销方式 中国网络安全周 微口碑营销 国内ui网站 互联网网络安全中心 金融网站开发方案 网络安全 数据统计 桃城区网站制作公司 政府网站设计 营销推广的功能 外贸型网站 四川网站建设 中科大信息安全 营销的种类 网络安全有哪些证书 信息安全等级保护测评中心 网页制作 公司网站 郑州营销外包公司有哪些 政府网站设计 娱乐营销的优点 军用信息安全等级军b级 美国信息安全博士 360杯全国大学生信息安全技术大赛搜索引擎营销的注意点 固原网站建设 2017网络安全调查报告 信息安全有限公司排名,-1