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如何创网站响应网站可信网站认证微博广告营销案例支付营销房产中介网站建设哈工大网络安全响应组网络营销文章网红网站建设在城南高校有一个鬼舍神秘的传闻吸引了很多人的注意。 在决胜榜第一名的天楚一接到组织安排来到城南高校调查特殊异能波动,却不成想第一天就遇到了强大的异能者! 能不成异能波动是他? 误会解除了,可波动是哪里来的? 还有异能者的身份暴露了!天楚一该怎么办?何去何从,难道任务就要放弃了吗?一对初恋情侣,阴差阳错分隔了二十多年。再次相逢时,已是物是人非,想爱也不能,彼此把那份爱深埋于心,不去触碰。当命运的厄运的再次降临时,把他们重新联系在了一起,两人恪守着人伦道义,彼此煎熬。他们无法逾越道德的界线,就这样一直默默的为对方付出着,不在乎世俗的异样眼光。直到女孩最终撒手西去,男人才得以从那份理不清,理还乱的情感之中解脱。现代佣兵周文意外魂穿到民国学生周文身上。他利用穿越带来的一颗佛珠的神奇功能,再加上后世带来的经验、知识和技能。打造了一只武功高强、军事技术顶尖的佣兵团队。 他带领这支佣兵团,历经中原大战、淞沪抗战、称雄上海滩。装备了当世最先进的各种武器,最后投身于伟大的抗日战争中。带着兄弟们杀鬼子......本来就只有一个平凡的一生,哪有那么多机遇让你改变自己的命运玄龙大陆,以武为尊。 少年叶平安得到败天武帝的至尊天眼,从一个卑微的蝼蚁,成为至高无上的绝世武帝! 一路上白骨累累,红颜多娇路飘摇,无敌路上太寂寥! 建文四年,朱棣拖家带口举兵造反,攻进应天府时,最疼爱的太孙朱瞻基却离奇失踪。 朱棣大怒,认为是建文乱臣所为,遂屠杀一万四千余建文乱臣及家眷,流放三万余靖难遗孤,以表对太孙疼惜之意。 …… 十一年后,一少年乱了朱棣心智,朱棣时常化作普通老头,与他一起打猎。 “老爷子,我真不是你孙子,我是从死人堆里爬出来的,没有亲人。” 朱棣听着朱辰的独白,禁不住就落泪了。 “谁说你没亲人,我现在告诉你,你爷爷是永乐大帝朱棣,你是大明皇嫡长孙。” 朱辰:“老爷子,您别骗我了。” 朱棣道:“不信也罢,我欠你一个盛大的复辟仪式。” 次日,应天府白日宵禁,万人空巷,十万大明铁骑进城,为首一人,正是那身穿铠甲,龙虎精神的老爷子! 爷孙俩隔空对望一眼,朱棣一笑。 十万大明铁骑下马,恭敬跪地大吼:“恭迎大明皇嫡长孙回朝!”厌倦了都市生活的许平,机缘巧合下获得一方神秘仙境。 仙境中有山,有水,有农庄。 仙禽翱翔于山巅,神兽奔走于密林。 于是他回到农村,开启了新的人生。 种种菜,养养鱼,遛遛狗,逗逗猫,泡泡妞,抱抱娃,闲暇时刻还可以进山打猎,寻幽探险,谁说这样的生活不精彩?喜欢一个人可以持续多久 一年 十年 还是一万年 这个世界只有黑色 这个世界只有地狱 我们只不过是,寻找那微不足道的光点 可笑的是,根本就没有光点 鸿蒙世界共有十重天,传说进入三重天后,便可长生不死,他们毕生都在追求长生之道,但若想要长生,谈何容易,得到多少?又会失去多少?【我叫许夜,因为心脏病突发,我死了,享年十八岁。】 【我穿越了。】 【我翻开《全球通史》,却发现这世界只有一百年的历史。】 【我走到镜子前,镜子里出现了一双手,掐住了我的脖子,大概是我的帅气让他心生嫉妒?】 【我躺在床上睡觉,天花板上浮现出一张人脸,她看着我,死死地看着我,我缓缓脱下了裤子,她移开了眼睛。】 【我已经沉思了五分钟,这个世界太不正常了。】 这是一个极其危险的废土世界,到处充斥着扭曲、污染、畸变、疯狂……还有,许夜!一个现代人到了古代会做什么。 裴尘对自己说: 如果这一切都是梦,梦醒时自然烟消云散。 如果这一切不是梦,那我要做的就是,好好活着,也让我身边的人,好好活着。 大周王朝,内忧外患,民不聊生,在这样的环境下,自己不愿随波逐流,想要改变。 事情要么不做,要么就做到极致。 纺织、制弩、黑火药、香皂、制盐、炼钢…… 一步一步的布局,一点一点的强大。 也有对喜欢人儿的心动、感动、冲动,以及对传说中武功的向往。
企业网络安全解决案例分析 银川建立网站 网站维护知识 维护个人网络安全 许昌网站建设 网络安全小组副组长是 培训学校 营销系统 2016网络安全事故 河北网站优化 甘肃做网站哪家好 婴灵的真实案例有哪些?咨询【www.richdady.cn】 老公家暴咨询【www.richdady.cn】 什么原因意外的心理调适【www.richdady.cn】 如何化解冤亲债主的干扰?咨询【www.richdady.cn】 前世缘份的前世影响【www.richdady.cn】 财运不佳的原因有哪些?【www.richdady.cn】√转ihbwel 家庭关系中的矛盾如何解决?【微:qq383550880 】√转ihbwel 性压抑的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 什么原因意外的前世修行【www.richdady.cn】√转ihbwel 精神不振的生活习惯咨询【微:qq383550880 】√转ihbwel 不爱读书的咨询技巧【www.richdady.cn】√转ihbwel 大龄剩女的婚恋规划【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 什么原因意外的前世修行【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的轮回存在吗?【www.richdady.cn】√转ihbwel 人际关系不好的前世因果【企鹅383550880】√转ihbwel 通灵老师预约咨询【σσЗ8З55О88О√转ihbwel 改善脑部不清晰的方法【www.richdady.cn】√转ihbwel 解梦【微:qq383550880 】√转ihbwel 特殊学校的前世因果【微:qq383550880 】√转ihbwel 前世今生的因果关系威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 特仑苏营销 中国信息安全测评中心 信息安全服务资质 淘营销报名 淘宝服装店营销策划 信息安全管理法,-1 网络安全周宣传活动 如何建一个网站 网络安全的原因分析 购物网站如何推广 企策和营销 上海著名营销公司 网络与信息安全监控记录表 seo属于什么营销 网络安全基础培训 网站制作北京 大良网站建设基本流程 漏洞对网络安全的危害 中央网络安全管理小组 流行的网络安全软件 如何建立信息安全标准化 h5网站开发 三零信息安全有限公司 网站主色调简介 校园 网络安全 北京网站开发制作公司 网络信息安全实训总结 甘肃做网站哪家好 郑州手机网站推广公司 长沙 做营销型网站的公司 公司网络安全管理方案 信息安全等级保护准则,-1 微机室网络安全管理 上海平台网站建设公司 郑州网站建设的公司 如何创网站 淘宝服装店营销策划 银川建立网站 网络安全的原因分析 商城网站建设新闻 中国网站建设 信息安全管理法,-1 温江建网站 搜索引擎的营销流程 网络安全技术之常见病毒种类与杀毒软件分析 江苏网站建设网络公司 销售观念的营销手段是 成都搜索引擎营销公司 信息安全组织机构 杭州电子科大大学信息安全专业 河北省网络安全公司 网络营销平台调研报告 长春作网站 做网站实验体会 深圳信息安全大学信息安全事件有哪些内容 外贸网络营销考题 汕头建网站 营销化系统 推广及建设网站 美国网络营销成功案例 网站制做公司 甘肃做网站哪家好 网站建设排版页面 购物网站如何推广 网络营销文章 萍乡做网站 广州专业网站设计企业 成都网站建设市场分析 网站维护知识 白山网站建设 网络营销新闻 企业做网站天津 郑州网站建设的公司 网络营销的劣势有哪些 网络安全有哪些技术 大良网站建设基本流程 百度提供营销功能 哈工大网络安全响应组 沈阳做企业网站的公司 长沙 做营销型网站的公司 网络营销的劣势有哪些 电商网站有哪些类型 房产中介网站建设 武汉网站建设 便宜的网站设计 企策和营销 营销建站 网站主色调简介 网络安全小组副组长是 武汉高端网站建设 济南网络安全培训 城阳建网站 河北网站优化 网络安全工程师 培训 石家庄网站设计 昆明响应式网站制作 网站维护? 中国网站建设 大良网站建设基本流程 银川建立网站 聊城定制化网站建设 网络直播营销 特点 特仑苏营销 郑州网站建设的公司 burp 网络安全题目 武汉手机网站建设咨询 信息安全培训办公室提醒您 江苏网站建设网络公司 南通网站建设seo 如何建立信息安全标准化 甘肃做网站哪家好 网站制作公司 番禺 网站制作北京 温江建网站 网络安全共享 网络安全有哪些技术 网络安全的原因分析 河北网站优化 商城网站建设新闻 北京网站开发制作公司 网络信息安全实训总结 网站建设周期 阿里巴巴 信息安全,-1 2016网络安全事故 建网站合同 营销工具 美国网络安全标准 网站推广报价 丹东网站建设 惠州网站开发公司 外贸营销网站建设 网络与信息安全监控记录表 网络安全与病毒防范 pdf 商城网站建设新闻 临沂网站推广 美国网络安全标准