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
网站 排版模板长沙 做营销型网站的公司南天信息 信息安全海淀重庆网站建设南阳网站建设2017中国信息安全形势辽源网站建设网络安全认证体系北京大学信息安全实验室信息安全行业招聘网站注册器清末民初是个动荡不安的年代,同样也是英雄辈出的年代。李氏家族由无到有,由兴盛再到衰落,时间鉴证了这一切。他们不屈不挠,拼搏奋斗的精神,将永远激励我们不断前行。威武华夏!一个巧合,一段经历。野微微因为一次意外被卷进了一个匪夷所思的世界。本是一个刚上高中的女孩确拥有了一种神奇的能力。热血的战争,痛苦的坎坷。 为报仇,他杀人如麻, 进入仙界,他修炼无上仙法,仙路坎坷,正邪难分,勇夺皇位,为了天地,他遇神杀神,遇魔降魔,他勾心斗角,出卖兄弟,残杀无辜, 但是他却是个好人....... 重生到了弱肉强食的修真世界。 资质太差,无法修仙,成了方家废柴。 强者为尊的时代,家族繁荣如同薄纸,触碰即破! 于是,不甘沦为废柴的方休,在古书中寻到修仙之法,成为灵修者。 上一世,是和谐社会救了那些作恶的人。这一世,我修仙成道,举全身之力,灭掉所有不公和压迫!还有精灵么? 抱歉,你来晚了,精灵已分发完毕。 啊?能不能走个后门,给我个不听话的... 没等说完,管理员就“砰”的关上窗口。 西树:?? 联盟就这服务态度?我要去投诉! 随便,你投诉联盟,关我们火箭队啥事儿。 【无金手指,非正经精灵文。】秦小满穿越成了地主二代,本想当个败家子躺平,可总有人想夺他的粮、抢他的钱、要他的命。 “既然无法低调,那我就不装了。” 于是,大乾朝百官想巴结他、公主想嫁给他、皇帝想让贤给他,就连周边国家的王族都想跪下叫他“爸爸”求庇护。 可他真的只是想当一个闲散的败家子而已……网瘾少年林徉魂穿大武朝,凭借着网上冲浪的经历纵横武朝! 造纸?我会古法造纸; 赶海?这个季节的沙滩有很多花旦蟹; 行医?脸上出现蜘蛛斑,一抹无痕。 …… 穿越到天龙世界的屌丝,凭着对原著小说的耳详能熟,是选择修炼成绝世高手还是辅助原著主角成就霸业?不,武功要练,最重要的是篡改剧情,别让乔峰自杀… 江南水乡,一俊俏女子在等待着自己心仪的男子 天下,朝廷,藩王,蛮夷之间的摩擦愈演愈热 江湖,即将到来的战争使江湖暗流涌动 少年。。。顶级特工失忆,悄然回到故乡; 各国巨头首脑,一夜之间沸腾! “他是可以一人攻破一个国家最高防御的利刃!” “他是医仙王诩的唯一传人,他是医好我不治之症的人!” “他还是我女儿的意中人……” “给我找!不论付出任何代价,一定要找到他!”
厦门商场网站建设 网络营销推广方式有哪些 江苏省网络安全 网络营销思维 营销策划去哪里学 2014用户信息安全,-1 中央企业网络安全交流 自适应网站优点缺点 商丘做网站哪家好 武汉高端网站建设 前世今生的故事如何影响现代生活?【www.richdady.cn】 事业不顺的风水布局咨询【www.richdady.cn】 耳鸣的咨询技巧咨询【www.richdady.cn】 家庭关系咨询咨询【www.richdady.cn】 公司破产【www.richdady.cn】 莫名其妙感伤的自我提升【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 特殊学校的案例分享咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 大龄剩女的社交技巧【www.richdady.cn】√转ihbwel 解梦【www.richdady.cn】√转ihbwel 感情纠纷的情感和解方法有哪些?【企鹅383550880】√转ihbwel 如何改善精神不振的状态咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运不佳的财富积累方法有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子不爱读书的原因【σσЗ8З55О88О√转ihbwel 前世今生的故事如何改变命运?咨询【微:qq383550880 】√转ihbwel 感情纠纷的情感咨询如何进行?咨询【σσЗ8З55О88О√转ihbwel 事业不顺的风水布局【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子压力大的改运方法【微:qq383550880 】√转ihbwel 事业不顺的原因有哪些?【企鹅383550880】√转ihbwel 人际关系不好的表现及原因咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主的干扰与超度【σσЗ8З55О88О√转ihbwel 购物网站如何推广 郑州做网站公司 网站 排版模板 广州知名营销策划公司 广东信息安全专业介绍 信息安全防范标准 网络营销基础知识学习 博客营销的弊端雅虎网络安全小组 市场营销4c战略 湖南专业做网站企业 网站建设seo优化的好处 河北网站建设推广 深圳市珠宝网站建设 问答营销好处 厦门商场网站建设 网站名注册 网站恶意刷 与信息安全等级保护有关的机关 国家网络安全中心领导小组办公室 网络营销的劣势有哪些 海淀重庆网站建设 北京时间网站建设 深圳市珠宝网站建设 免费自学网络营销网站 网络营销推广方式有哪些 邮箱营销软件哪个好用 汽车网络信息安全峰会 网络营销与网络广告 财务软件信息安全 网络营销行业数据分析 长沙网站托管 湖南长沙网站建 2014用户信息安全,-1 美国 信息安全审查 网站稳定性 北京时间网站建设 信息安全管理职能部门 商丘做网站哪家好 连网站建设 上海信息安全等级培训 医疗行业网络安全现状 网站维护? 广州市网站网页制作公司 构建网络安全防护体系 免费自学网络营销网站 网络安全宣传目录 新潮网络营销 重庆专业网站设计服务 网络营销的新闻 信息安全的主要特性 创新发展可信计算 加强信息安全保障体系建设,-1 北京大学信息安全实验室 美国 信息安全审查 问答营销好处 信息安全管理体系培训 网络营销产品策略种类 与信息安全等级保护有关的机关 政府 网络安全 江苏省网络安全 网络安全是国家强制吗 北京时间网站建设 美国 国家网络信息安全战略 2014 最新 网站制作公司 网站的大小 中央企业网络安全交流 的营销推广措施分析 移动营销缺点网站的目标 北京高端网站制作 网站制作公司 加强网络安全技术培训 北京大学信息安全实验室 自适应网站优点缺点 网络营销与网络广告 信息安全行业招聘 假网站备案 网络安全法 行业 财务软件信息安全 移动营销缺点网站的目标 清华大学 网络安全 装修微营销 长沙网站托管 网络安全是国家强制吗 加强网络安全技术培训 武汉高端网站建设 信息安全实验室品牌 网络品牌营销 机械类内容营销案例 中国信息安全测评中心 成立时间 江苏省网络安全 构建网络安全防护体系 北邮成为首批网络安全 网络营销平台调研报告 广州知名营销策划公司 网络安全审计设备 中关村信息安全联盟 网络营销推广方式有哪些 移动营销缺点网站的目标 郑州做网站公司 企业网络信息安全方案 网络安全大事件 信息安全防范标准 设计类网站 网络安全性评估周期 什么是网络营销推广 信息安全服务资质查询 武汉高端网站建设 免费自学网络营销网站 网络安全专业是什么 深圳市珠宝网站建设 顺德网站建设市场 全网营销推广如何做 北京时间网站建设 问答营销好处 四川信息安全杂志,-1 中国国家信息安全漏洞网站 上海信息安全等级培训 工作室营销 网络营销专业知识 上海网络信息安全宣传,-1 广州品牌营销策划有限公司官网 辽源网站建设 信息安全管理体系培训 重庆专业网站设计服务 网络安全性评估周期 网络信息安全 教材 北邮成为首批网络安全 海口做网站 网站建设有模板吗 网络安全认证体系 机械类内容营销案例 长安做网站 问答营销好处 网站维护? 假网站备案 2014用户信息安全,-1