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
信息安全嘉年华网站建设技术网站建设网站建设案例做好网络安全简约大气网站设计欣赏企业网站类型杭州网站建设公司联系方式javascript 鼠标经过 链接 显示 链接网站 缩略图信息安全的产业联盟营销型网站有哪些四方界域,广袤浩瀚,亿万星球,无尽大陆。传闻,在第四界域的尽头,隐藏着惊天之密,能使成为四方界域的掌控者,长生万右。少年李南风得到神秘玉剑,修无上功法,习太初阵术,炼灵丹妙药。从微末中崛起,斩古帝、劈祖龙,闯到第四界域,于界域尽头证得的四域神尊,名垂千史。天地开,万物生,万族林立;强者生,弱者死,强者踏轮回,断生死,弱者饱受欺凌,每一个人都想妄图挑战这弱肉强食的法则,都想变强,去掌控这世间法则。 本书的主人翁逍遥华,醉酒救人后穿越到异界。在绝色师尊们的抚养下,长成风流倜傥、玉树临风的翩翩少年。为振兴师门,下山入仕。逍遥华堪称修仙奇才和人生赢家,短短数十载登顶修炼之巅,爱恨情仇在那片华夏大地、纵横捭阖、开创自己不一样的开挂人生结婚纪念日那天,我手捧鲜花,单膝下跪,等待我的,却是床底下爬出来的陌生男人! 婚姻的背叛,人性的贪婪,让我的心愈加冰冷... 最直观的去刻画婚姻家庭、人生百态,火烧风出品,必须精品!上古大陆,一位拥有先天全体的少年,因为一次意外,引得黑珠入体,从而导致元力全失,至此他失去了所有光彩,族人的陷害让他认识了师尊,在一个分身的教导下,少年披荆斩棘,过五关斩六将,一步步成为真正的强者...... 为了家族命运,少年踏上了独自修炼的征程;为了亲人,他被迫选择了自己不爱的人;为了爱人,他忍受了无数年的自责。 从一个小小的战士,逐步成长为天元大陆至高无上的古神,而最终,为了整个天元大陆,他却付出了所有......我将用我自己的写作方式,用心之一分一毫,情之一缕一丝,为大家去描述一个多元化虚拟的世界,玄幻亦或物质,浪漫亦或现实,激烈亦或平静,以遐想还原本真的人文风貌。 我们潮汕文化来源于福建,行政隶属于广东,可是,潮汕不是哪一家的附属品,潮汕有她自己独立的城市风格,有追求自由于平等的强烈姿态,这片土地上的人有顽强拼搏与享受宁静安逸的一致认知,她是一个出色的整体,也是一个个优秀的个体。尊崇传统文化,又极力接受新事物 ; 平和的茶文化里,有雷厉风行的基因 ; 隐忍的内心深处,是那么地奔放狂野 ; 圆润的处事风格,又包涵着执着的信念。朴素与低调是她的面貌,男人的勤奋,女人的贤惠,饮食的多元化是她的名片,历史底蕴和潮商的风云是她的骄傲。潮汕,我的桑梓故乡,永远都是美!游戏里被称为百科全书的凌云,因为过渡代练意外猝死,重生来到了十五年前。这一世他要称为职业选手,为梦出发。生如蝼蚁,当有鸿鹄之志;命比纸薄,更有不屈之心。且看乡野小子叶安在受到仙道宗门欺负后,如何利用九天神玦一步步绝地反击,走上强者之路,最终成为擎天巨擘的故事。绚丽多姿的修仙世界、生动逼真的打斗场景、数之不尽的奇珍异宝、曲折离奇的故事情节足以让你心驰神往、欲罢不能。每个人心底都有一个修仙梦,每位读者都能在书中找到自己的影子。还等什么呢,让我们共同开启这修仙之旅吧。古陵穿越仙武世界,成为道宗被废弟子。被打入禁地渊薮,觉醒签到系统。 “叮!签到成功,恭喜宿主获得先天圣体道胎!” “叮!签到成功,恭喜宿主获得元辰精神术!” 一百年后,修行界大乱,在古陵走出禁地的时候,豁然发现,自己举世无敌。父母被辱,债主上门,女友背弃!俗话说的好,福不双至祸不单行,乡村小子王小飞本殷实的家庭,突发巨变,座座大山压在背上,难以喘息。 可不曾想,王小飞凭借家传之宝偶得透视之眼,从此他过上逍遥自在,人人向往的滋润生活。 可让他苦恼的是,遇到美女告白该何去何从?
网络营销工程师书籍 辽宁网站建设 网络营销的拓展方法 东莞网站优化 东莞 建网站 顺德公益网站制作 网络安全专用虚拟机 网络安全专用虚拟机 济南网络营销推广公司哪家好 经典网站设计 性压抑的咨询技巧咨询【www.richdady.cn】 性压抑的原因分析咨询【www.richdady.cn】 去世的父亲的去向解析咨询【www.richdady.cn】 意外事故的预防措施【www.richdady.cn】 大龄剩女【www.richdady.cn】 前世缘份的识别方法咨询【www.richdady.cn】√转ihbwel 前世缘份的前世解析咨询【σσЗ8З55О88О√转ihbwel 工作升迁的障碍与突破【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 化解【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 自闭症的心理调适咨询【σσЗ8З55О88О√转ihbwel 孩子厌学的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 脑部不清晰的解决方法【企鹅383550880】√转ihbwel 发育倒退的前世记忆咨询【微:qq383550880 】√转ihbwel 外灵干扰的环境影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的教育理念有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老婆的前世修行【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 邪灵的定义与特征咨询【www.richdady.cn】√转ihbwel 人际关系不好的自我提升咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与公婆前世的前世解析【www.richdady.cn】√转ihbwel 发育倒退对孩子心理的影响咨询【微:qq383550880 】√转ihbwel 霸州建网站 网络营销成功案例事件国家信息安全举报投诉,-1 合肥市做网站的公司有哪些 关系营销缺点 知名的网站建设 外贸网站推广软件 网络营销工程师书籍 狼客网络营销 手机微信网站建设 顺德网站建设原创 南宁市网站建设哪家好 网络安全专用虚拟机 营销策划网络课程 泸州网站建设 易尚网络营销公司 营销型网站有哪些 济南网站建设第六网建 鹰潭网站建设 饥饿营销的作用 大连网站优化公司 企业电子商务网站 广州信息安全测评中心 公安局公共网络安全 简约大气网站设计欣赏 国家网络安全要求 聊城网站优化 安全的南昌网站制作 福田的网站建设公司 太原网站建设培训学校 植入式营销有哪些形式 景德镇网站建设 外贸网站推广软件 河南信息安全研究院有限公司 最专业的手机网站建设 信息安全趋势考试 网络安全技术比较 信息安全产品采购名录 网络安全控制软件安全防护安全管理及法律法规等四个层次上考虑. 信息安全漏洞产生的必要条件是: 景德镇网站建设 交通标识用品适合网络营销吗? 中央信息安全 营销学术语 手机微信网站建设 网站设计和备案 茂名网站建设 企业网站类型 营销网站建设企划案例 杭州网站建设公司联系方式 植入式营销有哪些形式 openssl与网络信息安全 下载 品牌创意网站建设 长春长春网站建设网 网络安全受到哪些威胁 营销网站建设企划案例 辽宁网站建设 网站建设改版 微营销真的假的 饥饿营销的作用 网站后台更新 前台不显示 好未来信息安全规范正式实施 台州网站设计 解放路 城市网络安全服务器 青岛的网站设计 营销人物 鹰潭网站建设 重庆信息安全产业股份有限公司我国信息安全部门 信息安全技术要点 评价一个网站 兼职网站制作 青岛的网站设计 邢台网站推广 深圳整合营销行业 免费设立网站 免费建网站 2014信息安全会议 顺德公益网站制作 企业网站类型 营销人物 关于公司的网站设计 北京网站建设有限公司 德宏网站建设 营销员之家 网络安全公开课2017 兼职网站制作 品牌创意网站建设 深圳整合营销行业 企业电子商务网站 河南信息安全研究院有限公司 高端网站建站公司 高端网站建站公司 信息安全趋势考试 网络安全控制软件安全防护安全管理及法律法规等四个层次上考虑. 福州网站建设网络公司 互联网营销项目 信息安全漏洞产生的必要条件是: 信息安全风险三要素 景德镇网站建设 微信手机网站 免费设立网站 2016信息安全产业规模 网络营销成功案例事件国家信息安全举报投诉,-1 陕西信息安全产业基地 gb/t 20984-2007 信息安全技术信息安全风险评估规范 网络安全设备连接方法 网络安全技术比较 网络安全技术比较 珠海移动网站建设报价 网站后台更新 前台不显示 信息安全 教研室 信息安全风险三要素 网络安全事件 2017 泸州网站建设 重构网站 网站翻页 网站改版 广州信息安全测评中心 信息安全工程系 网络安全设备连接方法 知名网站规划 营销型网站有哪些 大连 做 企业网站 关系营销缺点 网站建设技术网站建设 国家网络安全监管系统 网络安全控制软件安全防护安全管理及法律法规等四个层次上考虑. 邢台网站推广 景德镇网站建设 静态网站有哪些优点 中央信息安全 网络安全 防御多样化原则网站备案 信息安全漏洞产生的必要条件是: 知名的网站建设 微信手机网站 潍坊网站推广