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
网络安全态势感知技术与系统黑客风云vip教程 信息安全渗透测试课程长沙的网站建设公司网络营销能力秀软文西安做北郊做网站网络目标市场营销策略网络营销案例评析桂林网站建设哪家好上海银基信息安全信息安全的要素其实吧,这本书真正的作者是玄辰,因为在学校不方便发布小说,特找我代劳。把书丢给我就去上学了,我连分类啥的都没来得及问······简介都不会写······照片有些字都看不清只能猜······消气消气,亲师父,这是我亲师父······不气···啊呸,我狠开心······对,在下开心得很!(掀桌子.jpg)(无奈.jpg)(摊手.jpg)(摆烂.jpg)《摩觉》原名为《千古纪法》,一个励志除魔卫道的故事。故事基于现实与虚构的结合,有天马行空,也有实事求是,更有意想不到。故事也向许多的武侠小说经典之作致敬,力求精彩而又完整,一部武者之道的新作送给大家。楚江空晚。怅离群万里,恍然惊散。自顾影、欲下寒塘,正沙净草枯,水平天远。写不成书,只寄得、相思一点。料因循误了,残毡拥雪,故人心眼。——《解连环·孤雁》 身负家族血仇的燕孤鸿持三尺长剑,快意恩仇游戏江湖。强者如何?皇室亦如何?剑无形刀无心,何惧!林泽穿越到一个全民御兽的时代。 临近高考,他手上却只有一头被称为观赏型宠兽的小雪球。 “小雪球?也就看着养眼,没什么用处啊。” “不能进化的宠兽有什么用?” “潜力太低了,这辈子都不可能突破一阶。” “想考上御兽学院?不可能。” 质疑、讥讽与奚落纷沓而至。 林泽面色平静的看了眼宠兽面板 “隐藏进化路线!” “女皇路线:潜力无限的进化方式,最高可进化至王级。” 小雪球、冰晶魂、雪女、霜蓝少女、极冰王女......冰雪女皇! ...... 众人:“什么?小雪球还有进化形态?” “卧槽,你的宠兽怎么都是从未见过的品种!?还这么厉害!?”清末民初是个动荡不安的年代,同样也是英雄辈出的年代。李氏家族由无到有,由兴盛再到衰落,时间鉴证了这一切。他们不屈不挠,拼搏奋斗的精神,将永远激励我们不断前行。威武华夏!在这元宇宙高度发展的时代,某一天,数十亿人降临万族大陆,成为城主,参与万族争霸。 降临之初,每个城主都会随机获得初始兵种。 招募兵种,掠夺资源,争霸万族。 岛国:”哈哈哈,我的兵种乃是奥特曼,专打怪兽,华夏国的蝼蚁们,颤抖吧!“ 米国:”永恒族.......看我打造无限手套,一个响指灭你华夏。“ 阿三:”整个万族大陆都是我神族创造的.......“ 看着如此嚣张的几国,林天看了看脚下的九爪金龙,不禁陷入沉思,这几国脑子瓦特了? 洛林:“我老婆就是个没毕业的小学生!每次去给她上课总有一万个理由给我找茬,明明菜的一批,却老是爱做白日梦去为了救那些毫不相干的人受伤,次次让我这君主救她,好在这傻姑娘的性格也就我受的了。” 铭可:“我老公洛林就是个大傻,英雄主义的色胚,还喜欢大晚上勾引别人,还自吹什么无敌流剑术!” 魔力受阻症诺修贝尔.洛林是魔族新继任的君主,但却让他的老师西仆真赶了出来,被迫前往皇家魔法学院教书,本应想着摆烂生活的他,却不曾想还要担任起那群学生的保姆,次次危险都要提刀去救,过够之前废柴生活的他,彻底麻了,但随着一个邪恶组织的产生,一系列的计划将围绕自己而展开。 疑似是绝世高手?一刀斩掉暗夜圣龙,无限次拔刀,竟然只是一位魔导师? 在初级魔导师,大魔导师,领主魔导师,域主魔导师,圣阶魔导师,归藏魔导师,神级魔导师遍布的世界里,带领着自己的三位可爱女弟子开启了冒险与学院的一段生活。 趁着夜色我想呐喊,却又寂静无声。 我到底该是一缕风,还是一株草? 我只是想我是一缕风,不被世俗所束缚。可我终究是活的太过于理想化了,我只能是一株草,一株不被定义的草,一株早已腐烂的草,没有根茎,无法扎根,且哪儿也飞不去的草。 我想我早该抛弃我那不切实际的理想主义,好好睡一觉,天总会亮的。 因为没有人会在天亮时伤感。一段绝世恋情,阴阳两隔, 红尘凡世又怎样续缘生死爱恋? 一段困苦岁月,人生低谷, 草根学子怎样改变命运成为商界精英?4000元到1000万,他是怎样赤手空拳实现的? 本书由真实故事改编,送给那些在陌生城市自我奋斗的人们,   人生,就如追逐晨雾中若隐若现的太阳,有温暖,也有风雨。异世界重生 一穷二白, 苏醒后只有个关心自己的漂亮妹妹。
河北高端网站设计公司 市委网络安全和信息化领导小组办公室 商城网络营销 网站取消备案 莱芜网站制作 潍坊网站建设推广公司 微博营销运营方案 淮南网站建设 营销型网站是什么样的 舆情营销 莫名其妙感伤【www.richdady.cn】 儿童发育倒退的原因咨询【www.richdady.cn】 祖灵的超度仪式【www.richdady.cn】 提高孩子阅读兴趣的方法【www.richdady.cn】 如何发现前世缘份咨询【www.richdady.cn】 脑部不清晰可能是哪些疾病的表现【企鹅383550880】√转ihbwel 事业不顺的职场突破【微:qq383550880 】√转ihbwel 婚姻生活不顺的自我提升咨询【企鹅383550880】√转ihbwel 感情纠纷的沟通技巧【σσЗ8З55О88О√转ihbwel 感情纠纷的原因有哪些?【www.richdady.cn】√转ihbwel 家宅磁场的调整方法【微:qq383550880 】√转ihbwel 失业的自我提升【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的案例分享咨询【微:qq383550880 】√转ihbwel 前世缘份的故事有哪些经典案例?咨询【www.richdady.cn】√转ihbwel 事业发展瓶颈突破威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 事业发展的灵性视角【www.richdady.cn】√转ihbwel 亲子关系的教育理念咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 强迫症的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 耳鸣的前世记忆咨询【企鹅383550880】√转ihbwel 事业不顺的真实案例有哪些?咨询【σσЗ8З55О88О√转ihbwel ios开发 信息安全,-1 网络安全基础知识培训 饿了么营销案例 网络营销目标包括哪些内容 杭州品牌网站 网络营销能力秀软文 网络安全法第24条 南京移动网站设计 为什么网站在我们公司的电脑都打不开在别人的电脑就能打开 公安网络安全监察 网络与信息安全 网络信息安全面临的威胁 高校网络安全采访问题 铜陵网站优化 设计 网站 深圳网站建设哪家好 网站需求方案 南京网站推广营销公司哪家好 网站空间 桂林网站建设哪家好 信息安全认证(cispcissp),-1 公安网络安全监察 网络目标市场营销策略 淘宝网营销 宁波网站建设公司 设计 网站 互联网出口 网络安全 超市网站建设 网络安全建议书 嘉兴微信网站 国贸网站建设 国贸网站建设 网络营销案例评析 企业网络营销后期总结 网站取消备案 信息安全网站有哪些内容 深圳专业网站制作公司排名 个人备案 可以做企业网站吗 linux网络安全 网络新闻营销推广代理 昆明高端网站建设 中国信息安全公司 系统网络安全 动态小网站 网站空间 深圳h5网站制作 中国信息安全公司排名 上海银基信息安全 网站主色调 信息安全的要素 网络营销策划 费用 福田网站建设 ios开发 信息安全,-1 西安做北郊做网站 营销策划品牌事件口碑 移动商城网站建设 深圳 网络安全建议书 湖州网站设计 信息安全审计计划 广东南方信息安全产业基地有限公司 数据安全保护系统 破解 网络安全密匙破解 系统网络安全 营销型网站建设 价格 徐汇微信手机网站制作 广州 网络安全新闻 x网站免费 超市网站建设 展会 网络安全相关 重庆微信营销的公司 苏州信息安全等级保护 湖州网站设计 房产类网站制作商 qq营销网 长安网站建设 网络营销的定义及分类 国网公司网络信息安全策划营销 凡克营销 信工所信息安全,-1 福田网站建设 微博营销广告语 网络营销实战课程下载微信朋友圈营销的好处 网站建设策划书ol 胶南建网站 淘宝网营销 杭州品牌网站 桂林网站建设哪家好 网络安全及防护 ios开发 信息安全,-1 网络安全法第24条 网络营销策划方案 信息安全识别 牛蛙网络营销怎么样 凡克营销 信息安全审计计划 福田网站建设 建网站需要什么 网络营销目标包括哪些内容 天津 网站设计公司 胶南建网站 网络营销实战课程下载微信朋友圈营销的好处 成都网站建设 铜陵网站优化 莱芜网站制作 郑州建站公司网站 深圳h5网站制作 信息安全是哪三者紧密结合的系统工程 南京移动网站设计 营销方案中的价格策略 西安商城网站建设制作 网络营销的定义及分类 展会 网络安全相关 哪家网站建设好 珠海建网站 网络安全页面 中国网络安全年会 青岛 为什么网站在我们公司的电脑都打不开在别人的电脑就能打开 多域名网站 网络营销目标包括哪些内容 信息安全logo 网络安全威胁类型 招远做网站 大数据网络安全测试题 注册信息安全员 考试 昆明高端网站建设 网络安全对企业 河北高端网站设计公司 网络安全法第24条 信息安全相关设计 信息网络安全 考试 教育信息安全等级保护测评中心 云平台的运维与管理 ppt 网络与信息安全 网络信息安全面临的威胁 政府网络安全通报 大数据网络安全测试题 单位建网站自助网站建设 网络营销的策略是什么 江苏营销型网站公司