首页 > 代码库 > 4.1HTML和Bootstrap css精华

4.1HTML和Bootstrap css精华

1、HTML

2、理解Bootstrap

HTML元素告诉浏览器,他要表现的是什么类型的内容,当他们不提供任何关于如何显示内容的信息。如何显示内容的信息,由CSS提供。

本书仅包含足够的信息,让你查看AngularJS特性,和Bootstrap的样式。要演示基本bootstrap的特性,在angularjs文件夹下新建bootstrap.html

<!DOCTYPE html>
					

<html xmlns="http://www.w3.org/1999/xhtml">
						

<head>
					

<title>Bootstrap Examples</title>
							

<link href="bootstrap.css" rel="stylesheet"
									/>
								

<link href="bootstrap-theme.css" rel="stylesheet"
									/>
								

</head>
					

<body>
					

<div class="panel">
						

<h3 class="panel-heading">Button Styles</h3>
								

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

<button class="btn btn-primary">Primary</button>
								

<button class="btn btn-success">Success</button>
								

<button class="btn btn-warning">Warning</button>
								

<button class="btn btn-info">Info</button>
								

<button class="btn btn-danger">Danger</button>
								

</div>
					

<div class="well">
						

<h3 class="panel-heading">Button Sizes</h3>
								

<button class="btn btn-large btn-success">Large Success</button>
								

<button class="btn btn-warning">Standard Warning</button>
								

<button class="btn btn-small btn-danger">Small Danger</button>
								

</div>
					

<div class="well">
						

<h3 class="panel-heading">Block Buttons</h3>
								

<button class="btn btn-block btn-large btn-success">Large Block Success</button>
								

<button class="btn btn-block btn-warning">Standard Block Warning</button>
								

<button class="btn btn-block btn-small btn-info">Small Block Info</button>
								

</div>
					

</body>
					

</html>
					

2.1、应用基本的Bootstrap classes

Bootstrap样式,通过class属性应用。

<div class="panel">
						

作者设置class的属性为panel,他是Bootstrap定义的多个CSS classes中的一个。这里有三种基本样式classes:

Bootstrap Class

Description

panel

一个圆角边框的panel。panel可以有一个header和一个footer.

panel-heading

为panel创建一个heading

btn

创建一个button

well

使用inset 效果组织元素

提示:并不是所有的Bootstrap样式都需要使用class属性。h1-h6字号,自动应用样式。

2.1.1、修改样式上下文

Bootstrap定义了一组style context classes。这些classes结合一个基本的Bootstrap 样式class,hyphen,primary,success,waring,info ,danger来使用。

<button class="btn btn-primary">Primary</button>
								

上下文classes必须应用于基本class,这就是为什么button元素既有btn,也有btn-primary classes。你不是必须使用上下文class,他们是可选的。

2.1.2、修改尺寸

可以通过使用size修改class,来修改元素。他们和一个基本class名,hyphen,lg,sm等一起用,

<button class="btn btn-lgbtn-success">Large Success</button>
								

你可以应用btn-block class,来创建一个button,它可有一个可用的垂直空间填充。

<button class="btn btn-blockbtn-lg btn-success">Large Block Success</button>
								

2.2、为Table的样式使用Bootstrap

Bootstrap Class

description

table

为table元素和它的内容生成样式

table-striped

应用alternate-row

table-bordered

为所有行和列应用边框

table-hover

当鼠标hovers over在表中的一个行上,显示不同的样式

table-condensed

减少table里的空间,来创建一个更紧凑的布局

所有这些classes都直接应用在table元素上。

<!DOCTYPE html>
					

<html xmlns="http://www.w3.org/1999/xhtml">
						

<head>
					

<title>Bootstrap Examples</title>
							

<link href="bootstrap.css" rel="stylesheet"
									/>
								

<link href="bootstrap-theme.css" rel="stylesheet"
									/>
								

</head>
					

<body>
					

<div class="panel">
						

<h3 class="panel-heading">Standard Table with Context</h3>
								

<table class="table">
						

<thead>
					

<tr><th>Country</th><th>Capital City</th></tr>
															

</thead>
					

<tr class="success"><td>United Kingdom</td><td>London</td></tr>
																

<tr class="danger"><td>France</td><td>Paris</td></tr>
																

<tr><td>Spain</td><td class="warning">Madrid</td></tr>
																

</table>
					

</div>
					

<div class="panel">
						

<h3 class="panel-heading">Striped, Bordered and Highlighted Table</h3>
								

<table class="table table-striped table-bordered table-hover">
						

<thead>
					

<tr><th>Country</th><th>Capital City</th></tr>
															

</thead>
					

<tr><td>United Kingdom</td><td>London</td></tr>
															

<tr><td>France</td><td>Paris</td></tr>
															

<tr><td>Spain</td><td>Madrid</td></tr>
															

</table>
					

</div>
					

</body>
					

</html>
					

2.2.1、确保合适的Table结构

注意,作者用了thead元素。浏览器会给table元素下的第一个tr元素,用于thead。

<!DOCTYPE html>
					

<html xmlns="http://www.w3.org/1999/xhtml">
						

<head>
					

<title>Bootstrap Examples</title>
							

<link href="bootstrap.css" rel="stylesheet"
									/>
								

<link href="bootstrap-theme.css" rel="stylesheet"
									/>
								

</head>
					

<body>
					

<div class="panel">
						

<h3 class="panel-heading">Striped, Bordered and Highlighted Table</h3>
								

<table class="table table-striped table-bordered table-hover">
						

<tr><th>Country</th><th>Capital City</th></tr>
															

<tr><td>United Kingdom</td><td>London</td></tr>
															

<tr><td>France</td><td>Paris</td></tr>
															

<tr><td>Spain</td><td>Madrid</td></tr>
															

</table>
					

</div>
					

</body>
					

</html>
					

这个例子没有thead元素,这意味着,header row会被添加浏览器自动创建到tbody元素上。

2.3、使用Bootstrap来创建一个表单

<!DOCTYPE html>
					

<html xmlns="http://www.w3.org/1999/xhtml">
						

<head>
					

<title>Bootstrap Examples</title>
							

<link href="bootstrap.css" rel="stylesheet"
									/>
								

<link href="bootstrap-theme.css" rel="stylesheet"
									/>
								

</head>
					

<body>
					

<div class="panel">
						

<h3 class="panel-header">
								

Form Elements

</h3>
							

Figure 4-5.  The effect of combining header and body rows in a table

CHAPTer 4 ■HTML And BooTSTrAPCSS PrIMer

68

<div class="form-group">
						

<label>Name:</label>
							

<input name="name" class="form-control"
									/>
								

</div>
					

<div class="form-group">
						

<label>Email:</label>
							

<input name="email" class="form-control"
									/>
								

</div>
					

<div class="radio">
						

<label>
					

<input type="radio" name="junkmail" value="yes" checked />
														

Yes, send me endless junk mail

</label>
					

</div>
					

<div class="radio">
						

<label>
					

<input type="radio" name="junkmail" value="no"
											/>
												

No, I never want to hear from you again

</label>
					

</div>
					

<div class="checkbox">
						

<label>
					

<input type="checkbox"
							/>
								

I agree to the terms and conditions.

</label>
					

</div>
					

<input type="button" class="btn btn-primary" value="Subscribe"
											/>
										

</div>
					

</body>
					

</html>
					

通过给一个包含label和input的div元素使用form-group class,来应用基本的表单样式。

<div class="form-group">
						

<label>Email:</label>
							

<input name="email" class="form-control"
									/>
								

</div>
					

Bootstrap样式,label在input元素的上方显示,input元素拥有100%的水平可用空间。

提示:label元素用于包含描述文本,input元素与用于其他类型的input元素有不同的结构。

2.4、使用Bootstrap来创建Grids

Bootstrap提供的样式classes,可以用于创建不同种类的grid布局,用于响应式布局。

<!DOCTYPE html>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Bootstrap Examples</title>

<linkhref="bootstrap.css"rel="stylesheet"/>

<linkhref="bootstrap-theme.css"rel="stylesheet"/>

<style>

#gridContainer {padding: 20px;}

.grid-row > div { border: 1px solid lightgrey; padding: 10px;

background-color: aliceblue; margin: 5px 0; }

</style>

</head>

<body>

<divclass="panel">

<h3class="panel-header">

Grid Layout

</h3>

<divid="gridContainer">

<divclass="row grid-row">

<divclass="col-xs-1">1</div>

<divclass="col-xs-1">1</div>

<divclass="col-xs-2">2</div>

<divclass="col-xs-2">2</div>

<divclass="col-xs-6">6</div>

</div>

<divclass="row grid-row">

<divclass="col-xs-3">3</div>

<divclass="col-xs-4">4</div>

<divclass="col-xs-5">5</div>

</div>

<divclass="row grid-row">

<divclass="col-xs-6">6</div>

<divclass="col-xs-6">6</div>

</div>

<divclass="row grid-row">

<divclass="col-xs-11">11</div>

<divclass="col-xs-1">1</div>

</div>

<divclass="row grid-row">

<divclass="col-xs-12">12</div>

</div>

</div>

</div>

</body>

</html>

2.4.1、Table VS Grids

Table用于扁平的数据,经常用于在grid中布局内容。一般,你应该给grid中的内容使用CSS布局,因为table与目前分离内容的原则相违背。CSS3包含grid布局,但它还没有在主流浏览器中实现。最好的选项,是使用CSS框架,像Bootstrap。

在作者自己的项目中,有时由于客户端和web app不接受CSS框架,不支持最新的CSS3布局。在这种状况下,作者使用一个table元素,来创建一个grid布局。

2.4.2

Bootstrap grid布局系统,用起来很简单。你可以给div元素应用一个row class,来指定一个列。他会为div元素包含的内容,配置grid布局。

你可以通过col-xs,指定列的子元素占据多少列。

Bootstrap不会给row中的元素应用任何样式,所以作者使用style元素,创建一个自定义CSS样式,设置背景颜色,行之间的间隔,添加一个边框。

<div class="row grid-row">

2.4.3创建响应式Grids

响应式Grids,基于浏览器窗口的尺寸,调整布局。响应式grids,主要用来允许移动设备和桌面设备显示相同的内容,有更好的屏幕可用空间。要创建一个响应式grid,用下面表中的一个classes,替换每个cells的col-* class。

Bootstrap Class

Description

Col-sm-*

当屏幕宽度大于768像素时,Grid cell水平显示

Col-md-*

当屏幕宽度大于940像素时,Grid cell水平显示

Col-lg-*

当屏幕宽度大于1170像素时,Grid cell水平显示

当屏幕宽度低于class支持的宽度,grid row的 cell 会垂直排列,而不是水平。

<!DOCTYPE html>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Bootstrap Examples</title>

<metaname="viewport"content="width=device-width, initial-scale=1">

<linkhref="bootstrap.css"rel="stylesheet"/>

<linkhref="bootstrap-theme.css"rel="stylesheet"/>

<style>

#gridContainer { padding: 20px; }

.grid-row > div { border: 1px solid lightgrey;

padding: 10px; background-color: aliceblue; margin: 5px 0; }

</style>

</head>

<body>

<divclass="panel">

<h3class="panel-header">

Grid Layout

</h3>

<divid="gridContainer">

<divclass="row grid-row">

<divclass="col-sm-3">3</div>

<divclass="col-sm-4">4</div>

<divclass="col-sm-5">5</div>

</div>

<divclass="row grid-row">

<divclass="col-sm-6">6</div>

<divclass="col-sm-6">6</div>

</div>

<divclass="row grid-row">

<divclass="col-sm-11">11</div>

<divclass="col-sm-1">1</div>

</div>

</div>

</div>

</body>

</html>

我使用col-sm-*,替换之前的col-xs*。当浏览器窗体宽度大于768像素时,水平排列,小于时,垂直排列。

提示:注意作者加了meta元素。该元素告诉移动设备浏览器,以实际尺寸显示内容。没有meta元素的话,许多移动设备浏览器会一缩放的形式,显示桌面版网页,用户需要放大才能看明细。简而言之,当有移动设备访问时,你需要添加一个meta元素。查看作者的The Definitive Guide to HTML5 这本书,有详细说明。