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
网站搜索框网络营销信息流网站模板和定制的区别广东省网络安全维护中国信息安全测试中心饥饿营销的促成常用的网络安全技术包括广州微网站建设案例网站互动网络安全会议流程图大夏皇朝,文武并存。 妖魔鬼怪,无奇不有。 孙七天穿越而来,以逆天悟性文武双修,问鼎巅峰。 朝廷江湖中,皆是他的传说。 他是大夏棋圣,举手投足间,胜天半子! 也是大夏诗仙,绝世诗篇,信手拈来! 还是文道魁首,以创新之法,使文道昌盛! 诸多头衔之中,孙七天最为看重的,是大夏执剑人!   “吾孙七天,大夏执剑之人,以手中之剑,斩尽天下不公,开万世太平!”这是一名在职侦探写下的故事,文笔可能不是很好,毕竟一般不是在调查,就是去调查的路上,实在没时间与精力酝酿出好的文字,我写下的故事可能很多人都不会相信,不过我能保证是真实发生过的事,各位凑合着看看吧。 我一直在想我什么时候能摆脱这些事呢? 无论鬼神,皆因信仰而存在。 等到某天没人相信鬼神的时候,可能我就真的能闲下来了吧?重生在了天道即将崩溃,鸿钧三清远走寻到,天地王母受援以进,现代科技飞速发展,对于修行却是半开放的世界,江屹煊被选为了复苏天道的棋子。 对于这些,江屹煊有话说:“我只想把仙丹当糖豆,把八九玄功当炼体术,让亲人无病无灾。用真火来炒菜,用灵泉当家庭饮用水,让石材释放出它最美味的口感。对于复苏天道什么的,谁爱作谁作,我没兴趣!”苍天啊,明明是穿越,你为啥还要买一送一。 刚得知自己兄长也是穿越者的孙国瑞不由得闭上了眼睛,算了,还是装傻当个闲散王爷吧。徐轩送外卖的路上,遭遇飞来横祸。 醒来后,他成功发现自己穿越到了异世界,而且一出场就是在世仙人,不仅天地同寿,长生不老,同时还觉醒了世界系统。 然而当他打开系统才发现,屏幕上提示的最大一个字是:“逃!”本书只是一个少年和少女的简单故事而已。没有荡气回肠,轰轰烈烈,多是细琐纷杂,小打小闹。相遇相知,相互扶持,共同进退,一世一心,双花相伴。灵兽人程森屮(che四声)十一岁丧母,十三岁遭灭族。程森屮,程猖,程狂兄弟三人幸存。一年后大哥程猖却操纵程森屮杀死小时密友和程猖,心灰意冷的程森屮消失了三个月后在长安佚名“山狼”靠杀人赚钱。两年后,“山狼”声名崛起无意间认识权门高氏二公子和洌氏二公,这时有人叫杀死两人。山狼不从,没曾想那人正是大哥程猖。几经挣扎后,山狼坠于程狂和卫天兰坠落的黑鹰崖。 十年后 顶级杀手——山狼,再次出现在高风舌眼前。 正义也许会迟到,但永远不会缺席。这个世界是无比的疯狂 沐川七,一个国家的皇子,一个捍卫太平的修士,和他的兄弟胡东,在这伸手不见五指的世界,开辟光明。师傅交给我一传家宝,却只是一本老旧的《水浒传》,我郁闷的回到家,闲来无事,翻到武松打虎的那一夜时,竟神奇的穿越回了书中的那个年代,还意外有了自己美娇妻金莲,在这个有点凄惨的开局下,且看我如何积攒实力,成功逆袭,手撕渣男,救我兄弟,扳倒高俅,收降梁山,抗击北辽,平定方腊,一改乾坤!什么是江湖?江湖便是人心,人心恶,江湖险。江湖风气云涌,邪恶势力盘根错节蓄势待发,墨家机关术再现江湖,是正是邪?活人炼僵尸,野兽军团汹涌来袭。八臂观音走下神坛,海底神功刀枪不如倭寇大军更要如何抵挡?一把来历不明的纯钧名剑,一处富可敌国的稀世宝藏,一场身不由己的家国恩怨。更有儿女情长,爱恨纠葛,他该如何面对?
网络信息安全综合实验平台 青岛 html5/flash设计开发|交互设计|网站建设 深圳网站维护公司 网络安全txt下载 网站建设中图片 制作外贸网站的公司 中小企业网络安全威胁 西安交通大学网络安全 营销推广点 个人网站推广 如何缓解耳鸣症状【www.richdady.cn】 前世缘份咨询【www.richdady.cn】 性压抑的解决方法【www.richdady.cn】 长期耳鸣可能是哪些疾病的信号咨询【www.richdady.cn】 财运不佳的财富规划如何制定?咨询【www.richdady.cn】 精神不振的前世记忆威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 有官司的法律咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 忧郁症的改运方法【σσЗ8З55О88О√转ihbwel 长期头脑混沌可能是哪些疾病的前兆【www.richdady.cn】√转ihbwel 事业不顺的职场心态威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵干扰的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 莫名其妙感伤的情感释放威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 存不住钱的理财建议咨询【企鹅383550880】√转ihbwel 与公婆前世的前世案例咨询【σσЗ8З55О88О√转ihbwel 亲子关系中的沟通艺术威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的心理建设【www.richdady.cn】√转ihbwel 与男友前世的识别方法咨询【微:qq383550880 】√转ihbwel 自闭症【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的社交技巧咨询【微:qq383550880 】√转ihbwel 暗恋的情感释放咨询【企鹅383550880】√转ihbwel 企业 推进信息安全 数据保护 徐州市网站 营销qq邮箱如何登录 单页的网站怎么做的 网络整合营销 网络信息安全的案例 广州企业网站建设 网络安全方案设计的注意点 吉安网站建设 网络安全txt下载 科站网站 博客营销类型 美国国家网络安全局 公安部网络安全员 国家网络营销师 网络安全审计措施 吉安网站建设 关系营销的劣势 网络安全防御平台 达内网络营销要学多久 网络安全管理局报警 网络安全专项清理整治 无锡网站建设原则 聊城网站制作 中国信息安全测试中心 淮安网站制作 佛山建网站 淘宝店铺营销推广方案 网络整合营销 徐州网站二次开发 公安部网络安全员 广东省信息安全 重庆营销网站建设公司 网络安全展会 网站建设发布营销型网站建设公司推荐 2015年3月份信息安全 青岛 html5/flash设计开发|交互设计|网站建设 邢台网站建设厂家 网络与信息安全的建议,-1 网站单选框的实现 迅腾科技-专注网络安全 上海品质网站建设 网站seo诊断 设计师交流网站 昆明高端网站建设 在线营销型网站建设 公司建网站 购买型网站建设 免费网站模板下载 营销资源 信息安全的起源,-1 中国网络安全 案例分析 2015 深圳市信息安全测评中心 官网 中国信息安全认证中心邮箱 全网营销系统是真的吗 国家安全下的网络安全 邢台网站建设厂家 营销邮件广告邮件优点 东莞网站建设公司 科站网站 农产品网络营销与实施 网络营销是做什么的 如何建立自己的网站 信息安全产品检测 服装网站模板 深圳市信息安全测评中心 官网 重庆营销网站建设公司 2015 信息安全学术会议,-1 互联网营销企业 网络安全的新闻 对青少年网络安全负责 应该双网站 学信息安全考研 公司建网站 网站模板和定制的区别 桌面端的信息安全 免费网站域名申请 济南之美营销策划有限公司 呼和浩特企业网站制作广东省信息安全等级保护,-1 网络整合营销 2016网络安全湖南峰会 营销推广点 邮箱营销案例 工控网络安全学院 石家庄手机建网站 高逼格网站 荣耀信息安全 淮安网站制作 网络安全的新闻 学网络营销有啥用 镇江网站推广 信息安全产品测评认证管理办法企业网站案列 深圳h5网站制作 在网站中添加百度地图 第十届信息安全大赛 博客营销类型 国家网络营销师 石家庄手机建网站 北京响应式的网站设计 广州网站设计公司招聘 最好的网络安全实验室 网络安全审计措施 互联网企业信息安全 南昌个人做网站 毕节网站建设 呼和浩特企业网站制作广东省信息安全等级保护,-1 网络安全审计措施 绵阳的网站建设公司 关系营销的劣势 推广网站多少钱 创建网站公司 徐州 网站建设中图片 创建网站公司 徐州 网络安全防御平台 可信赖的手机网站设计 学信息安全考研 hr服务台理解信息安全 深圳网站维护公司 中国网络安全 案例分析 2015 昆明高端网站建设 网络安全管理局报警 强化信息安全 网站设计开发的难点 方案网站 书法网站建站目标 2016网络安全湖南峰会 温州做网站 湖南网站推 无锡网站建设原则 hr服务台理解信息安全 网络营销就业明星 网络安全产品认证 信息技术与信息安全 广州微网站建设案例 信息安全保密管理体系