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
营销一体化信息安全测试方法网络安全 教学安排网站没域名pc网站增加手机站上海网络安全大会主会场简洁的网站免费seo网站诊断网站设计 价格营销优势洪武十二年,大明初创。 蒙元余孽依旧在虎视眈眈,逐渐走出黑暗中世纪的西方也开始文艺复兴。 就在这个古老民族即将被世界抛弃的关键节点。 一个穿越的灵魂降临大明,附身到了一个十五岁的少年身上。 “有一人。 他文可订币制,育良种,办大学,开科学为天下先! 武可发明蒸汽机,造枪炮,扬帆七海,让凶残的草原蛮子为朕歌舞助兴!” “他,就是我朱元璋的孙子,朱肇辉!”民国年间唐山的一个普通的男人闯关东只为谋求生计没想到遇到了那些只发生于民间怪谈中的诡事我的古董店今日又有客人说要听故事了,店里一个小姑娘却打碎了我最为珍视的照片,也罢,便讲个我的回忆好了......比别人的人心更可怕的,是自己的人心。关于回忆录,所谓回忆录,那就是什么时候想起来什么,什么时候更新好了.......由于自然环境的破坏导致这世上出现了一批能力者,而恽晨就是其中之一。 原本想一直隐藏自己身份的恽晨却碰巧遇到了改变他一生的世界少女——林夕。 而这个世界的真相也将逐渐浮现.......【简介:御兽 +单女主+宠物+搞笑】 源星这个奇妙的世界,充斥着许多既美丽又强大的生物,“月渊兽 幽冥龙 婆罗花……… 人类只要达到16岁就会觉醒属于自己的本命契约兽。 而牧清辰则不一样他一出生就有了自己的本命契约兽……“暗黑金龙王” “龙皇大人你是公的还是母的啊! “龙皇大人为什么我和别人不一样” “龙皇大人你为什么会说话啊!” “闭嘴!” 一个小气朋友的故事 来自数百年后的特种兵王,穿越成为和自己名字同音的晚明皇帝天启身上。 狙建奴,收日韩,木匠皇帝?不,工匠皇帝!大国工业自明而始! 铁血皇明,平推世界!王宇是名从未被编辑签约过的网络作者,灰心失意下重开了小说,竟然成为了新一代的神,没等他享受成神的待遇,竟意外进入了他之前写的一本小说中,成为了主角!无数年前灵气复苏蓝星生命变异,人族岌岌可危。 此时,武者应运而生,终于在妖魔的攻击中寻得一丝生机。 林枫以武者为目标,日复一日却不得寸进,都是因为他做了一个奇怪的梦。 梦中,他如同在万万年前度过了一生,循环往复。 直到他发现自己居然能够影响梦中的自己,还能继承部分实力。 基础锻体法,修行百年!参悟出自然呼吸法! 基础血气法,修行千年!参悟出武神不灭经! 基础武者拳法(基础血气法),修行万万年!参悟武道神拳,一拳开天地! “他的基础功法……怎么和武神传下的残缺功法如此相像!” “为何他的炼丹技术……比之活了百万年的家族还要精通!” 直到无数年过后,通天大妖率众妖进攻,人族无力抵抗。 无数人鼎礼膜拜,诵经之声传遍天地! “求武尊救救人族!” 一道武神虚影自泰山之中走出,而这道虚影……光鲜亮丽的皮囊只是一副躯壳,当它干涸,会露出里面的东西。
农业网站模板 信息安全的感谢 搜索营销 成都网站建设v 网站设计 价格 网络信息安全的图片,-1 国家信息安全实验室 网络安全渗透测试工程师 信息安全可控制 最新网络安全故事 公司破产咨询【www.richdady.cn】 财运不佳的财富规划【www.richdady.cn】 改善脑部不清晰的方法【www.richdady.cn】 精神不振的前世记忆【www.richdady.cn】 感情纠纷的改运方法咨询【www.richdady.cn】 与公婆前世【www.richdady.cn】√转ihbwel 冤亲债主干扰对生活有哪些影响?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 什么原因意外的前世修行咨询【σσЗ8З55О88О√转ihbwel 学习成绩差的自我提升【www.richdady.cn】√转ihbwel 前世记忆恢复技巧咨询【www.richdady.cn】√转ihbwel 脑部不清晰的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 有官司的法律援助咨询【www.richdady.cn】√转ihbwel 精神不振咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子学习不好的心理调适【σσЗ8З55О88О√转ihbwel 存不住钱的前世因果【www.richdady.cn】√转ihbwel 纠纷的心理调适咨询【www.richdady.cn】√转ihbwel 事业不顺的职场调整咨询【σσЗ8З55О88О√转ihbwel 公司破产的心理调适【企鹅383550880】√转ihbwel 头脑混沌的环境影响【企鹅383550880】√转ihbwel 外灵干扰的原因分析咨询【www.richdady.cn】√转ihbwel 小企业网站免费建设 信息安全 科普 信息安全测试方法 信息安全服务要点,-1 关键信息基础设施网络安全检查填报系统 网站翻页 广州信息安全服务资质咨询公司,-1 搜索营销公司 无线网络安全性如何 网络安全符合性评测 快速网络营销费用 晋中网站建设 新手建网站 信息安全与嵌入式 网站建立需要多少钱 网络安全是啥 家装微营销 信息安全分析师是什么专业 南昌网站开发 信息安全服务要点,-1 关键信息基础设施网络安全检查填报系统 网站翻页 广州信息安全服务资质咨询公司,-1 搜索营销公司 无线网络安全性如何 网络安全符合性评测 快速网络营销费用 晋中网站建设 新手建网站 信息安全与嵌入式 网络安全 迪普 网站开发公司 上海 网络安全 数据分析 横向纵向网络安全防护 搜索营销公司 企业网络安全视频 免费seo网站诊断 公司网站url 信息安全软件有那些 信息安全与嵌入式 营销优势 教育市场营销策划方案 网络安全周 负载均衡 东莞 建网站 珠海哪里做网站的 工控信息安全防护指南 app 网络安全案例 网络安全是啥 如何用网络营销的方法有哪些方法有哪些方法有哪些内容 网络技术与信息安全 网络广告营销优缺点 芜湖网站优化 家装微营销 信息安全风险识别清单 网络营销 微信 医疗 网站建设 网络推广 企业网络安全视频 企业网站的一、二级栏目名称 企业响应网站 信息安全 科普 顺的品牌网站设计价位 网站没域名 微网站后台 免费网站制作 工控信息安全防护指南 公安部 信息安全通报中心 搜索营销 深圳市信息安全 信息安全测试方法 学习网站建设烟台网站建设 北京信息安全公司 安顺网站建设 无锡企业网站制作公司 顺的品牌网站设计价位 信息安全可控制 高端网站定制 广东省网络安全宣传高峰论坛 东莞那里有营销课堂 电视整合营销 什么是网络营销策划 岳阳建网站 网络营销 微信 医疗 广州网站建设公司招聘 关键信息基础设施网络安全检查填报系统 免费建个人网站 信息安全咨询 资质,-1 网络安全 律师 横向纵向网络安全防护 国家信息安全评测证书 网络安全 迪普 温州网站制作的公司 优化企业营销 网站翻页 网络安全资产管理制度 成都网站建设v 新田网络营销 东莞那里有营销课堂 信息安全专业报名 信息安全的保护技术 网络营销要做什么 广州信息安全服务资质咨询公司,-1 网络安全 教学安排 营销的外部环境 南昌网站开发 郑州网站建设怎样 网站翻页 网站建设教程 信息安全服务资质未通过 搜索营销公司 武昌手机网站 电子产品商务网站模板 南京 网站设计 网络安全技术与应用 级别 网络安全 律师 网站建设的域名注册 上海网络安全大会主会场 无线网络安全性如何 沈阳做网站有名公司 中国网络安全技术30所 信息安全管理研究包括网站建设的方式 网络广告营销优缺点 营销的外部环境 新田网络营销 学习网站建设烟台网站建设 中国网络安全技术30所 信息安全与嵌入式 国家信息安全评测证书 网络安全符合性评测 免费建网站的网站 信息安全服务资质未通过 信息安全与嵌入式 东莞那里有营销课堂 信息安全服务要点,-1 网络安全是啥 东莞那里有营销课堂