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

<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>

<head>

<title>Bootstrap Examples</title>

<style>

#gridContainer {padding: 20px;}

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

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

</style>

</head>

<body>

Grid Layout

</h3>

</div>

</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样式，设置背景颜色，行之间的间隔，添加一个边框。

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>

<head>

<title>Bootstrap Examples</title>

<style>

#gridContainer { padding: 20px; }

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

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

</style>

</head>

<body>

Grid Layout

</h3>

</div>

</div>

</div>

</body>

</html>

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

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

4.1HTML和Bootstrap css精华的更多相关文章

Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
Bootstrap CSS 栅格、代码和表格
一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...
Bootstrap CSS概览代码文字标注篇
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Bootflat – 基于 Bootstrap CSS 框架的扁平化界面
Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...
Bootstrap CSS 描述
<!DOCTYPE html><html lang="zh-CN"><head>  < ...
（二）Bootstrap CSS 概览
在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...
bootstrap.css.map这个文件有何用处？该怎能使用它？
. ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap-theme.css ├── bootstra ...
bootstrap css选择不同的宽度
刚开始使用bootstrap css开源项目.遇到一个问题,默认的input 宽度太大,需要找小一点的. 其实只需要在input tag中选用预定义的较小的宽度即可.比如: <input typ ...
angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...

随机推荐

Python线程指南
本文介绍了Python对于线程的支持,包括“学会”多线程编程需要掌握的基础以及Python两个线程标准库的完整介绍及使用示例. 注意:本文基于Python2.4完成,:如果看到不明白的词汇请记得百度谷 ...
JBOSS /invoker/JMXInvokerServlet 利用工具 .
链接: http://pan.baidu.com/s/1F8bMI 密码: 1h2r 工具使用说明 1. 查看系统名称 java -jar jboss_exploit_fat.jar -i http: ...
WPF 程序检测 windows 关机
1.使用SessionEnding事件参考MSDN. 2.在需要处理关机事件中可以注册SessionEnding事件 App.Current.SessionEnding += Current_Se ...
status 状态栏
http://www.pchou.info/ios/2015/08/22/oc-statusbar.html IOS的项目多数会遇到控制状态栏和导航栏的问题,比如隐藏状态栏.控制状态栏的文字颜色等,导 ...
lua metatable 和 _index 实验
lua metatable 和 _index 中文博客解释: http://www.cnblogs.com/simonw/archive/2007/01/17/622032.html metatabl ...
python自动化运维之路~DAY1
python自动化运维之路~DAY1 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.文件大小单位单位换算我们一起看一下下面的图: 没错,都是数字,而且这些数字都是二进制的数字 ...
C#: 启动画面设计
Windows Form经常会在启动主界面的时候预先有启动画面,这也是因为用户体验的需要,用户知道已经启动application,而不是在load resource的时候等待.因此这里不能用单线程的思 ...
android ANR问题
一.什么是ANR ANR:Application Not Responding: 具体请参考:http://blog.csdn.net/dadoneo/article/details/8270107
javaIO整理
写在前面:本文章基本覆盖了java IO的全部内容,java新IO没有涉及,因为我想和这个分开,以突出那个的重要性,新IO哪一篇文章还没有开始写,估计很快就能和大家见面.照旧,文章依旧以例子为主,因为 ...
yii框架中保存第三方登录信息
(第三方登录) 创建应用,域名,详情请看:http://www.cnblogs.com/xujn/p/5287157.html 效果图:

4.1HTML和Bootstrap css精华

4.1HTML和Bootstrap css精华的更多相关文章

随机推荐

热门专题