正文

bootstrap使用笔记

IP云
IP云V管理员/0 阅读
08/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

本文翻译自【http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem】

1、需要在H5的文档声明中使用；

2、如下一个简单的两列布局，先添加一个class=row,用class=span*来表示占几列。每一行的span加起来刚好是12；

<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

3、用.offset*表示右移多少。.offset4 moves .span4 over four columns.

4、嵌套列。新开辟一个row,在这个下面再添加span，但所有span之和为row的大小。e.g.

<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>

5、流式网格布局，采用的是百分比而不是像素大小。

基本流体，只需将.row 改为 .row-fluid.

<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

流体偏移，仍旧使用.offset*

<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>

流体嵌套

<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>

2、布局

1、固定布局，只需<div class="container">

<body>
<div class="container">
...
</div>
</body>

2、流体布局  <div class="container-fluid">

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

3、响应式设计

要想使用响应式布局，需要添加相应的meta标签；同时还要添加bootstrap的响应式css。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

支持设备

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:

LabelLayout widthColumn widthGutter width
Large display1200px and up70px30px
Default980px and up60px20px
Portrait tablets768px and above42px20px
Phones to tablets767px and belowFluid columns, no fixed widths
Phones480px and belowFluid columns, no fixed widths

/* Large desktop */
@media (min-width: 1200px) { ... }/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }/* Landscape phones and down */
@media (max-width: 480px) { ... }

响应实用类

Responsive utility classes

可以用这些实用类在设备中显示或隐藏内容，下表是一个可用的类和他们在给定的设备中的效果，这些都可以在responsive.less中找到。

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

ClassPhones767px and belowTablets979px to 768pxDesktopsDefault
.visible-phoneVisibleHiddenHidden
.visible-tabletHiddenVisibleHidden
.visible-desktopHiddenHiddenVisible
.hidden-phoneHiddenVisibleVisible
.hidden-tabletVisibleHiddenVisible
.hidden-desktopVisibleVisibleHidden

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. Responsive utilities should not be used with tables, and as such are not supported.

你可以用他们在不同的设备中呈现不同的显示。响应实用类不可以与表格一起用，因为它不支持表格。

e.g.