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
伪原创网站网络安全认证考试网络通信与信息安全网络安全大会2017主题网络营销公司 优帮云长沙微网站网站建设天津天津专业网站建设公司开设信息安全大学名单武汉市网站制作 一代大帝,君问,世人尊称为问帝,成名后高处不胜寒,打尽天下无敌手的他,最终选择逆天而行,破开时间长河,散尽一身修为,只为重生到年轻时,只是重回年少后,他收因果反噬,变成了一个废少,更是遭遇到前世未曾遭遇的退婚,就在他要喊出三十年河东三十年河西的时候,他发现好像不对劲,这个退婚怎么和他想象的不一样,渐渐的,他发现事情并不简单,当他发现一切都往反方向发展的时候,他选择开始摆烂了。天上仙人来人间,我辈乘风上星空。 花间酒,人间月。月下对饮成三人!这是多少豪情男儿的壮志幻想。在兰国的一边陲小镇,徐游东一家被昏官污吏残忍杀害,即后奋发图强拜师学得绝世武艺欲要报仇和打破社会的不公。 步入江湖的徐游东手持名剑芦笛势要斩尽世间一切罪恶,孤身行走江湖结实了一帮好友并开展了玄幻精彩的历程。 当尘埃落定,立于江湖之巅时,蓦然回首。可曾有几分感慨?当修真者穿越到了现代,因为语言不通闹出了许多笑话。 谁能想到,一个不起眼学生竟然是修真界的最强者? 最强S级异能者?对不起,只需要一剑。 异能者和修真者的碰撞,核武和仙术的对轰…… 一声枪响,彻底打破了海天市的宁静。一起持枪杀人案就这样发生了,案发之后,海天市公安局立即展开侦破工作。于是,就开始了一场正义与邪恶的较量。来自星辰的启示, 人与神明相抗争。 超前进化的智慧, 痴迷幻梦不愿醒。 败军之将,梦途惊醒,逆天改命,铸就新(醒)程。 别条龙都是纯种的,生来高贵,而江尘只能从最底层向上爬; 别的修士可以拼法宝,势力,而江尘唯有拼命; 别人天赋异禀,而江尘则是资质平庸; 但江尘还有她!穿越大明 唐鼎本想做个游手好闲的败家子 奈何摊上了个败家爹 开局败光家产,欠债十万两,被诬造反 家里还有三个美貌娇妻要养活 唐鼎无奈支棱起来 开启亲爹养成计划。 他本是虚夷之境人人景仰的尊圣,连仙帝都畏惧三分,在苍穹之巅上缥缈度日,虽为神,却终日郁郁寡欢,无人知晓他的感受,但他又是这世间必不可少的存在。千百年的时光,终将消磨掉他的信念。于是,他便就此陨落,虚夷之境也再无一位至尊。 后天,先天,宗师,大宗师,圣人,尊神,尊圣 (初境,小成,中境,大成,圆满 )简介: 天下九洲,证道无人。 从一个洞窟开始,莫闲靠改写命运线的能力迈向顶峰。 他看到修士屠城,妖兽作乱,穹顶之下民不聊生。 他看到秘境开启,阴谋四起,修炼之路上白骨皑皑。 他看到神器现世,九洲争夺,大道面前众生皆蝼蚁。 抬眼都是萧瑟,垂首尽显荒凉。莫闲手握众生命运之线,长啸一声:“九洲有我,大道不悲!”
但是网站相关内容和程序并没有建设完其次网站公司给我公司的 搜索关于网络安全或计算机/网络取证方面的论坛将网址记录下来. 信息安全培训服务,-1 大丰做网站 郑州微信网站 上海营销外包公司 新媒体营销热点 网络安全检测机构新媒体营销的典型案例 网络安全方法 郑州微信网站 亲子关系的改运方法咨询【www.richdady.cn】 佛教视角下的前世今生咨询【www.richdady.cn】 学习成绩差的环境影响【www.richdady.cn】 财运不佳的财富增长【www.richdady.cn】 事业不顺的前世因果【www.richdady.cn】 事业不顺的职场调整有哪些方法?咨询【σσЗ8З55О88О√转ihbwel 婚姻生活不顺的环境影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感觉整天没精神怎么办【企鹅383550880】√转ihbwel 亲子关系的互动模式有哪些?【www.richdady.cn】√转ihbwel 感情纠纷的情感沟通方法有哪些?咨询【www.richdady.cn】√转ihbwel 儿子抑郁症的环境影响【企鹅383550880】√转ihbwel 特殊学校的课程设置咨询【σσЗ8З55О88О√转ihbwel 前世缘份的解读方法咨询【www.richdady.cn】√转ihbwel 儿子不读书的案例分享【www.richdady.cn】√转ihbwel 升迁障碍的咨询技巧【σσЗ8З55О88О√转ihbwel 前世今生的故事与轮回【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的常见案例【微:qq383550880 】√转ihbwel 发育倒退的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵对人的影响【www.richdady.cn】√转ihbwel 事业不顺的职场建议咨询【www.richdady.cn】√转ihbwel 北京互联网营销培训 国际 网络安全竞赛 自己建网站的优势 太原推广型网站制作 论坛营销的优点 网络通信与信息安全 周口网站建设 大丰做网站 微信的网络营销推广案例 郑州微信网站 智能网联 信息安全,-1 网络安全自动化处置 如何做网站 自己建网站的优势 中国网络安全防护 前端营销 网络安全大会2017主题 网络与信息安全 访问控制 负责信息安全等级保护工作的监督 网站建设公司深圳 国家信息安全体系 Ios网络安全 东营网站制作 国家金融信息安全 湖南的商城网站建设 网络安全自动化处置 国家信息安全专项介绍 外卖网站设计 酒泉做网站 网络安全检测机构新媒体营销的典型案例 扁平化网站建设公司 前端营销 珠海网站策划公司 智能网联 信息安全,-1 高端电子网站建设 中国网络安全防护 周口网站建设 广州网站建立 专业网站制作公司 微博营销案例 大丰做网站 网络营销ftp服务 免费建建网站 国家信息安全体系 对网络营销的意义认识 网站的运营成本 自助构建网站 2. 网络时代中的企业特别是中小企业应该如何有效地实施网络营销? 湖南的商城网站建设 ps做网站 邢台建一个网站多少钱 深圳建网站公司 视频营销培训 网络安全失泄密黑板报 新媒体营销外包公司哪家好 嘉兴品牌网站建设 如何写网站文案 东莞市做网站 网络与信息安全 访问控制 网站建设天津 扁平化网站建设公司 新媒体营销外包公司哪家好 营销调研的过程 营销调研 微博营销案例 常州制作网站信息 网络安全统一管控 网站建设天津 深圳建网站公司 论坛营销的优点 ps做网站 营销调研 时效营销 微博营销案例 北京网站设计价格 禅城区建网站公司 单页网站 免费网络安全吗 网络推广营销文章 网络推广营销平台 中国网络安全防护 Ios网络安全 国家金融信息安全 正规的网站建设 上海做网站的 手机网站开发技巧 扁平化网站建设公司 个人备案能建立企业网站吗 台州卫浴网站建设 山西省信息安全大赛 百科营销 郑州微信网站 免费网站制作新闻 网站建设公司深圳 网站添加百度地图 网络营销是啥 h5 展示 营销方案 sem活动营销方案 Ios网络安全 天津做网站 网站推广渠道 信息安全竞赛软件,-1 网络营销渠道策略有 网站添加百度地图 大丰做网站 德阳网站建设 集团公司网站方案 2. 网络时代中的企业特别是中小企业应该如何有效地实施网络营销? 网络营销的优势与劣势 网络营销ftp服务 伪原创网站 政府网站怎么管理系统 网络安全大会2017主题 营销调研的过程 sem活动营销方案 郑州营销网站 北京网站设计价格 江苏网站建设效果 信息网络安全技术 西安企业网站 手机网站开发技巧 网络推广营销文章 网络安全要有什么基础知识 如何写网站文案 国家金融信息安全 上海营销外包公司 专业网站制作公司 网络营销机会分析 域名搭建网站 骗局 域名搭建网站 骗局 网络安全大会2017主题 国家金融信息安全 地方门户网站建设 伪原创网站 免费网络安全吗 智能网联 信息安全,-1 网络推广营销文章 国家信息安全专项介绍 温州购物网络商城网站设计制作 东莞市做网站 河南省信息安全 网络安全方法 无锡建设网站制作 青岛网站推 外卖网站设计 中国网络安全防护 开设信息安全大学名单 Ios网络安全 微博营销案例 信息安全等级保护测评报告模板,-1 b/s架构 网络安全 无锡建设网站制作 湖南的商城网站建设 昆明网站建设价格低 网络推广营销文章 网络营销的竞争分析 太原推广型网站制作 北京网站设计价格 网站建设天津 如何制定网络营销策略 网站策划制作公司 网站建设深 长沙微网站 h5 展示 营销方案 山西省信息安全大赛 但是网站相关内容和程序并没有建设完其次网站公司给我公司的 网络营销ftp服务 国家信息安全漏洞通报信息安全工程师 培训班 伪原创网站 青岛网站推 湖南的商城网站建设 营销调研 新媒体营销热点 百科营销 网络安全服务机构资质网络与信息安全测评中心 禅城区建网站公司 1什么叫计算机网络安全? 1什么叫计算机网络安全? h5 展示 营销方案 北京海淀区网站开发 营销调研 怎么创立网站 前端营销 正规的网站建设 专业网站制作公司 个人备案能建立企业网站吗 搜索关于网络安全或计算机/网络取证方面的论坛将网址记录下来. 营销调研的过程 飞鱼星 网络安全 集团公司网站方案 网站编程 北京互联网营销培训 镇江网站优化 深圳建网站公司 1什么叫计算机网络安全? 网络营销是啥 服饰网站建设 新媒体营销热点 网络营销大连 中软信息安全考试题库 信息安全竞赛软件,-1 国家信息安全漏洞通报信息安全工程师 培训班 政府网站建设联系电话 南宁做网站 外卖网站设计 网络安全要有什么基础知识 郑州营销网站 信息安全等级保护测评报告模板,-1 禅城区建网站公司 禅城区响应式网站 信息系统 信息安全风险评估报告格式 湖南的商城网站建设 上海网站营销 微信营销月总结报告 免费建建网站 邢台建一个网站多少钱 周口网站建设 网络安全服务机构资质网络与信息安全测评中心 信息安全竞赛软件,-1 西安企业网站 商业网站设计 珠海网站策划公司 西安网站开发 网络营销和广告的区别和联系 北京互联网营销培训 北京互联网营销培训 禅城区响应式网站 东营网站制作 西安企业网站 网络通信与信息安全 天津专业网站建设公司 上海互联网营销服务商 网络安全审计原理 智能网联 信息安全,-1 网络营销渠道策略有 网站管家 网络安全攻击手段 长沙微网站 集团公司网站方案 网站建设天津 免费网站制作新闻 青岛网站推 昆明网站建设价格低 操作系统信息安全 嘉兴品牌网站建设 百科营销 江苏网站建设效果 禅城区建网站公司 网络安全方法 情感营销号 政府网站怎么管理系统 网络推广营销平台 网络营销策略班 怎么创立网站 郑州微信网站 正规的网站建设 网络安全统一管控 网络安全认证考试 青岛网站推 个人备案能建立企业网站吗 营销调研的过程 台州卫浴网站建设 新媒体营销热点 郑州微信网站 北京网站设计价格 深圳建网站公司 免费网络安全吗 昆明网站制作 国家信息安全体系 搜索关于网络安全或计算机/网络取证方面的论坛将网址记录下来. 北京海淀区网站开发 sem活动营销方案 关于网站建设live2500 禅城区建网站公司 网络安全认证考试 网站添加百度地图 昆明网站制作 大丰做网站 政府网站建设联系电话 北京海淀区网站开发 西安网站开发 如何做好网站 对网络营销的意义认识 服装营销网 西宁做网站 政府网站建设联系电话 网络营销是啥 营销调研的过程 网络营销的竞争分析 网络营销的竞争分析 关于网站建设live2500 部门信息安全如何处理 自助构建网站 国家信息安全体系 长沙微网站 服饰网站建设 集团公司网站方案 中软信息安全考试题库 青岛青鸟网络营销 网站推广渠道 免费网站制作新闻 扁平化网站建设公司 湖南的商城网站建设 南宁做网站 国外网络安全品牌 网络安全管理方法论 网络营销的竞争分析 网站编程 智能网联 信息安全,-1 网站css中父级自适应高度没有子级自适应的高度高怎么解决 电子邮件营销含义深圳市能士信息安全公司 湖南的商城网站建设 天津做网站 北京海淀区网站开发 集团公司网站方案 情感营销号 论坛营销的优点 网络营销渠道策略有 负责信息安全等级保护工作的监督 中国网络安全防护 网络安全要有什么基础知识 网络营销大连 前端营销 网络安全统一管控 有关于网络安全的内容 上海做网站的 网络安全失泄密黑板报 酒泉做网站 网络推广营销平台 沈阳网站制作 中软信息安全考试题库 镇江网站优化 网站信息安全维护协议 西安企业网站 德阳网站建设 h5 展示 营销方案 武汉市网站制作 武汉市网站制作 网络营销的优势与劣势 国家信息安全漏洞通报信息安全工程师 培训班 深圳建网站公司 网站推广渠道 专业网站制作公司 网络安全大牛的博客 网络营销是啥 网站的运营成本 郑州营销网站 微博营销案例 自做网站 专业网站制作公司