April 8 Notes

grid system

Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases.

mobile first

In the HTML5 project, we did a mobile project. It has a very important meta, used to set the screen and device width and whether to run user scaling, and scaling issues.

layout container

Bootstrap needs to wrap a .container container for the page content and grid system. Due to properties such as padding, these two container classes cannot be nested within each other.
fixed width

<div class="container">

...

</div>

100% width

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

In a grid system, the browser automatically allocates up to 12 columns as the screen size increases or decreases. Create a page layout by combining a series of rows and columns.

"row" must be contained in .container(fixed width) or .container-fluid(100% width) to give it proper alignment and padding.
Creates a set of "columns" in the horizontal direction through "rows".
Your content should be placed in "column", and only "column" can be a direct child of "row".
Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.
Create a column-to-column gutter by setting the padding property for "column". By .row setting a negative margin for the element to offset .container the padding set for the element, it also indirectly offsets the padding for the "column" contained in the "row".
Columns in a grid system are specified by a value from 1 to 12 to represent the range they span. For example, three equal-width columns can col-xs-4 be created using three .
如果一“行（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>