4月8日笔记

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

移动设备优先

在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因，这两种容器类不能相互嵌套。
固定宽度

<div class="container">

...

</div>

100%宽度

<div class="container-fluid">
...
</div>

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。

“行（row）”必须包含在 .container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。 Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为.container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding。
栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

列偏移

<div class="row">
	<div class="col-md-8 a">8</div>
	<div class="col-md-3 a col-md-offset-2">3</div>
</div>

列嵌套

<div class="row">
	<div class="col-md-9 a" style="padding: 0;">
	<div class="col-md-4 a">4</div>
	<div class="col-md-4 a">4</div>
	<div class="col-md-4 a">4</div>
</div>
				
	<div class="col-md-3 a">3</div>
</div>

交换位置

<div class="row">
		<div class="col-md-9 col-md-push-3 a">
					9
		</div>
				
		<div class="col-md-3 col-md-pull-9 a">3</div>
</div>

表格

Bootstrap 提供了一些丰富的表格样式供开发者使用。

基本格式

<table class="table ">

注：我们可以通过 Firebug 查看相应的 CSS。

条纹状表格

<table class="table table-striped">

注：表格效果需要基于基本格式.table

带边框的表格

<table class="table table-bordered">

悬停鼠标

<table class="table table-hover">

状态类

<tr class="success">

注：一共五种不同的样式可供选择。

隐藏某一行

<tr class="active sr-only">

响应式表格

在小于768px，为表格加上边框

<table class="table table-responsive">

按钮

Bootstrap 提供了很多丰富按钮供开发者使用。

可作为按钮使用的标签或元素

转化成普通按钮

<button class="btn btn-default">Button</button>
<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="Input"/>

注意事项有三点：

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持<button> 元素。
链接被作为按钮使用时的注意事项如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
我们总结的最佳实践是：强烈建议尽可能使用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。

预定义式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

类名	解释
btn-default	默认样式
btn-success	成功样式
btn-info	一般信息样式
btn-warning	警告样式
btn-danger	危险样式
btn-primary	首选项样式
btn-link	链接样式

<button class="btn btn-default">Button</button>
		<button class="btn btn-primary">Button</button>
		<button class="btn btn-success">Button</button>
		<button class="btn btn-info">Button</button>
		<button class="btn btn-warning">Button</button>
		<button class="btn btn-link">Button</button>
		<button class="btn btn-danger">Button</button>

尺寸大小

从大到小的尺寸

<p>
		<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
			<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
			<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
			<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
			<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
		</p>

块级按钮

块级换行

<button class="btn  btn-block">Button</button>

激活状态

<button class="btn active">Button</button>

禁用状态

<button class="btn disabled">Button</button>

4月8日 笔记