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觉醒前世记忆,龙象神功护体。 一棍在手,足以试敌天下。天地异变,劫难难逃,为了解决劫难,秦昊与其他十大强者联手将劫难击退,每神圣历七七九年,劫难形成,人类为了不让自己的家园受到侵犯,全意抵御侵略者。 伟大的元素之神,请让我再次庇护人类,元素之花。故事是从酒馆说书的闯进世界会议,带来一段贝鲁米发现“魔灵”的短片而开始的。你富可敌国?你权倾天下?在我面前都低调些。 我叫赵铁柱,普通小农民,可我既能救你的命,也能要了你的命。他只身闯荡上海,从一个乡下“小赤佬”混到租界督察长,成了上海风云一时的人物。 1938年8月18日,上海南京路上,几位报童在拼命地叫喊着:“快报!快报!特大新闻,陆大奎被刺杀身亡!快报!快报!”以此来招来顾客。 ...... 昨天下午3点光景,中央旅社三楼的一间房间里。青纱帐中,陆大奎光着身子正在与三姨太调情。“叮铃铃”突然电话铃声响起。陆大奎说了句:你奶奶的。伸手去接电话。 陆大奎不情愿地:喂!我就是。 听到对方强硬的口气,陆大奎的脸顿时阴沉下来,脸上的肌肉也开始绷紧。 陆大奎搁下电话,心中疑惑不定。上次打了蒋介石外甥俞洛民的一句耳光后,被淞沪警备司令部抓去坐了几天班房,好不容易托人求情捐了一架飞机才了事。今天又打来电话,肯定不会有好事。 陆大奎心神不安地赶紧起床,穿好衣服,带了一名保镖急匆匆地出了门。刚跨出中央旅社大门才几步时,迎面射来一串子弹,陆大奎和他的保镖还来不及拔枪抵抗,就倒在了血泊之中…… (不定期更新,更文极慢,请莫期待) 天地之间,你我存一 人去仙来,渡后方知 仁心相崩,礼乐亦损 万生万物,劫后方新 一个超能力者与普通人共存的时代,一个野兽变异危机四伏的时代,一个山海经神兽复苏现世的时代,作为全国诸多超能力者之一的他,能否在异兽泛滥的局势下守卫国家安定,能否在别有用心之人的影响下坚守本心?这个时代会毁灭在异兽的利齿下,还是稳定在超能管理局的保护中?来到遍布危险的荒岛,看江响如何彻底改造,铸就传奇。  月球坠落直击亚欧大陆后数千年,又称混沌年代,地球位于海平面以上之地仅为安第斯山脉一带。核辐射遍布陆地及海洋,气候恶劣,幸存之人生活得并不容易。   来到现代,海平面下降,大量陆地重见天日,但伴随着新陆地出现,还有月球人也来到安第斯山脉。   有人就会有争斗。本作品主要描写该时代两名贵族青年之间之感情以及地球人与月球人之间阵营的文化冲突,乃至战争。凡尘之中存在着不凡之事,光怪陆离早已对地球求之欲渴,天选之人们该如何应对……
常州网站制作 淘宝营销理念 密集性营销策略 北京设计公司网站 2016 网络安全大会 网页设计 教程网站 网站设计工作室 成都网站开发公司排名 大莲网站建设公司 信息安全测试工具 事业不顺的职场突破技巧有哪些?咨询【www.richdady.cn】 脑部不清晰的症状与治疗咨询【www.richdady.cn】 强迫症的案例分享咨询【www.richdady.cn】 冤亲债主干扰的常见案例【www.richdady.cn】 阴间生活的前世故事【www.richdady.cn】 儿子不读书的改运方法【www.richdady.cn】√转ihbwel 前世今生的轮回有哪些真实经历?【σσЗ8З55О88О√转ihbwel 冤亲债主干扰有哪些症状?【微:qq383550880 】√转ihbwel 亲子关系的共同成长方法有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 缺心眼的心理调适【微:qq383550880 】√转ihbwel 头脑混沌的自我提升【微:qq383550880 】√转ihbwel 外灵对人的影响【微:qq383550880 】√转ihbwel 心特别累的咨询技巧【σσЗ8З55О88О√转ihbwel 有官司的自我保护咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何判断被冤亲债主干扰?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何了解自己的前世今生?咨询【www.richdady.cn】√转ihbwel 与老公前世的前世解析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 暗恋的情感释放咨询【σσЗ8З55О88О√转ihbwel 家庭关系的案例分享威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老公的前世修行【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外贸三种语言网站建设 第五届网络安全会议 营销发展史 整合营销 代理 1 什么是互联网营销策略 高校信息安全实验室 沈阳网站 信息网络安全专业人员认证证书 可口可乐的软文营销案例 国云科技 信息安全,-1 网络信息安全 专访 西安网络技术有限公司网站 网站盈利了 网站制作苏州企业 网站建设协议 如何攻击网站 上海高端网站开发 网站设计工作室 织梦(dedecms)网站不同自定义表单提交后的跳转链接怎么修改? 网站推广优化张店 云南信息安全测评中心 营销软件培训 网站盈利了 上海三零卫士信息安全 公司信息安全规定 涿州网站建设 兰州网站建设报价 营销邮件的发送方式 上海公司做网站 网站建设项目 微信营销成功的案例 东软网络安全 待遇 三只松鼠的营销环境 网络营销要素 提升网络安全管理水平 如何做搜索引擎营销策划 海外营销策划方案 营销广告语 2014年全国大学生信息安全技术大赛暨四川省大学生信息安全技术大赛 网络信息安全中心招聘 阳江网站建设 上海网站优化 东营做网站建设的公司 密集性营销策略 常用网络安全工具 上海网络安全考试 第二代网络安全立法 北京设计公司网站 网络营销产品定价基础 网站兼容问题 信息安全 细则,-1 网络信息安全 杂志 2016 网络安全大会 网络营销工具和方法有哪些内容 上海高端网站开发 网站建设公司 外贸三种语言网站建设 外贸网络营销课程总结 网络安全期刊 咸宁做网站 中国国家信息安全系统 常用网络安全工具 中国个人信息安全 公安局信息安全证明,-1 网站兼容问题 虎门做网站 外贸网络营销课程总结 营销发展史 网络安全问题管理 网络信息安全 专访 网络安全什么培训好 个人注册网站.com 网络营销体现什么营销理念 上海 互联网营销公司排名 国家信息安全标准规范 网络安全问题管理 国家信息安全评测中心 信息安全竞赛 ctf 营销广告语 网站建设项目 邢台网站建设 怎样创网站 鲲鹏网络营销策划 淘宝营销理念 信息安全的培训内容 信息安全审计日志 2017信息安全对抗赛 国家网络安全中心主任 大莲网站建设公司 网站推广优化张店 网络营销的 书籍推荐 网络信息安全防护等级 东软网络安全 待遇 第五届网络安全会议 南阳开网站制作 外贸三种语言网站建设 网络安全 强化培训 自适应网站好建们 营销发展史 网络营销工作任务 可口可乐的软文营销案例 1 什么是互联网营销策略 网站备案幕布照规范 网络安全周推送 西安网络技术有限公司网站 营销短视 信息安全保障强调依赖( )实现组织的使命 网站推广优化张店 海外网络营销做什么 关系营销的优劣性 网络营销app 网络营销app 第二代网络安全立法 网络安全期刊 营销软件培训 网络安全周的宣传 网络信息安全的小说 盐山建网站 网站建设公司 信息安全专业博导 信息安全测评认证信息 全网营销策划方案 旅游电子商务实训平台 旅游资源规划开发实训平台 网络营销实训平台套 天创网站新疆信息安全测评中心 信息安全测试工具 海外网络营销做什么 网站内容 合肥网站制作 网络安全入侵检测 营销推介 网络营销工作任务 做生意的网站 网站设计工作室 湛江有帮公司做网站 海外营销策划方案