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
有免费的营销软件吗网络营销 短期培训龙岗 网站建设深圳信科必知的网站地产网站建设信息安全产品认证制度简约大气网站首页浙江网站设计公司电话星沙做网站南昌网站推广爱情像酒,酒香四溢,让人沉醉,但只有喝下去才知道其中辛辣。 曾经的我也对美酒格外向往,直到我在新婚之夜,发现在妻子的私密部位,纹了两个字……天也败,地也衰。规则乱化,被四大宗门所掌控,为所欲为。李毅,一个小人物,后发先至,厚聚博发,誓与天斗。苍天泣血,诸神恐惧。完成了他的传奇一生。“苍天已死,黄天当立,岁在甲子,天下大吉。”黄巾起义 ,群雄逐鹿 ,东汉末年,皇帝昏聩,宦官专权,民不聊生。乱世风云谁际会,一威之震化龙飞,青梅煮酒论英雄,天下豪杰出我辈。历史犹如一座舞台,你方唱罢我登场,世事如棋局局新,执棋人终将变成棋子…s级惊悚世界降临,有大能者自称为神,恐怖的怪物被冠以神之使者身份。 人沦为社会最底层,一生只为侍奉神与其怪物,人即是劳动力,也成了食物。 无人敢反抗,因为他们的一举一动都被神所监视,如被圈养的牲畜。 人们被送到屠刀下,没有理由,只是神愿意挥动屠刀。 秦黑俯视着他创造的惊悚世界,看着高高在上的“神”,伸出一根手指一戳,压扁了这只相对强壮且耀武扬威的虫子。 “真恶心,下次一定要忍住,不要轻易用手,都怪它太肥了。” 一列神秘的列车,无限的末日之旅,传说中的奇诡道术,影视剧里才会存在的怪物,无数个位面,无数次末日,惊奇、诡异、神秘、暴乱,谁也不知道列车的目的到底是什么,也不知道是谁发明的列车,他们更不知道自己到底怎么样才能走下列车…如果说世界是多层的,你信吗? 或许你不信,但事实上世界就像是一个洋葱。 奇谈怪闻中的阴影,都市传说背后的真相。 谁又能说世界只有表面的这一层呢? 许策,一个失忆过的新人界行者。 穿越一个个界层,经历一次次历险,只想为了离真相更近一些。 “我到底忘记了什么?” 或许答案就在界层的最深处。 一场不知是何原因导致的末日灾难,将李恒奇传送到一个他完全不了解的宇宙世界——地球。这里的人与他的身体构造相同,只是文化却大有差异,科技水平也十分落后。于是漫漫回家路,他利用残存记忆和先进的科技在这里定居下来,本性善良的他在不毁灭这个世界的前提下,试图探索宇宙奥秘。只是这一切并没有那么顺利,万事不仅开头难,还有过程难,更有成功难! 他有一个看似玩具一般的设备——造梦陀螺,能够让人美梦成真,宛如在现实中一般。可是这仅仅是一个玩具吗?本期作品与当代最火二次元番剧合作例如:青春猪头,小马宝莉,国家队,从零开始的异次元生活,原神,埃罗芒阿老师,名侦探柯南,官途......原班人马照常不动。 本期作品介绍:男主从小白成为国家元老,开启10万后宫的故事 作品属性:二次元番剧恋爱小说《系统+策划》当你亲眼见证了那一个个怪诞的民间鬼故事的发生,当你看到一个个不为人知的角落所发生的离奇事件,你你还会相信无神论吗?“施主,你这辈子命中注定多妻多妾!” “我命由我不由天!” “行!你开心就好!” 混沌九州世界,与我们相似,又与我们不同。 五行共生,形成上中下三等级结界,是为三界; 阴阳轮转,形成六种生灵转化的通道,合称六道。 三界六道的守护者,明天地之道,晓世间之法,是为——玄门弟子。
大连企业做网站 杭州网络安全公司 地址 网络安全工程 培训 网络安全法颁布的意义 网络安全学习宣传网址 微网站建设方案 2015年网络安全大事件 衡水建网站 济南优化网站 医疗营销网 感情纠纷的自我提升咨询【www.richdady.cn】 去世的母亲的影响分析【www.richdady.cn】 如何应对突然失业的情况【www.richdady.cn】 孩子压力大咨询【www.richdady.cn】 为什么过世的前世修行咨询【www.richdady.cn】 如何判断自己是否被冤亲债主干扰?咨询【www.richdady.cn】√转ihbwel 存不住钱的原因分析【σσЗ8З55О88О√转ihbwel 什么原因意外的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 脑部不清晰的咨询技巧【σσЗ8З55О88О√转ihbwel 婴灵对家庭的影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 学习成绩差威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家宅磁场的检测工具【企鹅383550880】√转ihbwel 与老公前世的前世修行【企鹅383550880】√转ihbwel 纠纷【σσЗ8З55О88О√转ihbwel 孩子压力大的心理调适【微:qq383550880 】√转ihbwel 强迫症的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的心理调适【微:qq383550880 】√转ihbwel 投资项目的案例分享【www.richdady.cn】√转ihbwel 有官司的前世因果【企鹅383550880】√转ihbwel 脑部不清晰的解决方法咨询【微:qq383550880 】√转ihbwel 建网站中企动力 网站建设:翰臣科技 信息安全实验室研究方向 工业网站建设 营销是企业 微信公众号营销优缺点 南昌网站推广 关于信息安全的比赛 学互联网营销有用吗 信息安全保密技术,-1 杭州网络安全公司 地址 网络安全培训流程图 网站建设资料 php网站建设 东莞网站建设平台 武汉想做网站 大连网站建设 免费申请网站域名 武汉做网站 长沙网站制作公司 北京信息安全学院 网站建设干货 网站建设资料 关于信息安全的新闻分析企业网站和搜索引擎两者在传递网络营销信息方面有何不同 昆明网络营销网站 深圳全网营销外包公司 网络安全工程 培训 微博营销的特点是什么 太原网站建设需要多少钱 微网站建设方案 网络安全评级 2015年网络安全大事件 网站设计说明书 原生营销定义 微博营销的特点是什么 email营销手段 工业网站建设 小米的客服中心提供了怎样的服务?哪些与网络营销有关? 免费申请网站域名 安吉做网站 微信营销处于什么阶段 西安网站制作 关于信息安全的新闻分析企业网站和搜索引擎两者在传递网络营销信息方面有何不同 信息安全产品eal3等级认证,-1 信息安全与黑客 网站建设:翰臣科技 网络营销 短期培训 家具网络营销推广 网络安全学习宣传网址 电商营销教学 网络安全法颁布的意义 星沙做网站 网站交互性 商务型网站模板 关于网络安全电影 乐清企业网站建设 杭州互联网营销 培训机构 信息安全的漏洞 营销式建站什么意思 微信公众号营销优缺点 信息安全成果 建个营销型网站多少钱 深圳网站建设流程 制作公司网站价格 网络安全技术基础知识 网站备案需要什么 中科大信息安全学院,-1 网络安全评级 网站大模板真流量 临沂做网站 网络安全防护设计方案 微博营销的特点是什么 郑州医疗网站建设 信息安全保密技术,-1 衡水商城网站制作 公司产品网络营销方案传统营销策略的优点是 微信公众号营销优缺点 江门网站制作 安吉做网站 网络安全技术基础知识 合肥seo营销公司 郑州医疗网站建设 长春营销外包 金盾信息安全招聘 网络安全抱谁大队 青岛市网络安全办公室 信息安全服务资质要求 php网站建设 建商城网站 衡水建网站 金盾信息安全招聘 石家庄网站设计制作服务 长沙网站制作公司 深圳企业网站建设 深圳企业网站建设 2013-2014企业存在的网络信息安全与管理的例子与分析 西安网站制作 互联网大会 网络安全信息安全 恶意代码 温州手机网站建设 建网站地址 国家信息安全评测中心和中国信息安全测评中心是同一个单位吗 免费申请网站域名 上海网站建设要多少钱 武汉想做网站 qq空间营销 恩施做网站 上海网站设计公司 网络安全性是什么协议 石家庄网站设计制作服务 网络安全法规 网络安全工程 培训 营销活动培训班 企业网站首页布局尺寸 长春营销外包 关于信息安全的比赛 网站建设干货 济南优化网站 网站建设公司上海 网站的风格 网络营销师在哪里考 微博营销的特点是什么 网络安全配置 网站建设干货 信息安全等级测评机构能力要求 对于网络安全的建议 网络安全抱谁大队 青岛营销推广公司电话 上海网站建设要多少钱 信息安全保密技术,-1 深圳全网营销外包公司 网络营销计划书怎么做 网络安全大学排名2017 长葛网站建设 网络安全防护设计方案 临沂做网站