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> <html <head> <title>Bootstrap Examples</title> <link <link <style> #gridContainer {padding: 20px;} .grid-row > div { border: 1px solid lightgrey; padding: 10px; background-color: aliceblue; margin: 5px 0; } </style> </head> <body> <div <h3 Grid Layout </h3> <div <div <div <div <div <div <div </div> <div <div <div <div </div> <div <div <div </div> <div <div <div </div> <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样式,设置背景颜色,行之间的间隔,添加一个边框。
<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> <html <head> <title>Bootstrap Examples</title> <meta <link <link <style> #gridContainer { padding: 20px; } .grid-row > div { border: 1px solid lightgrey; padding: 10px; background-color: aliceblue; margin: 5px 0; } </style> </head> <body> <div <h3 Grid Layout </h3> <div <div <div <div <div </div> <div <div <div </div> <div <div <div </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= ...
随机推荐
- 解决【必须使用“角色管理工具”安装或配置Microsoft .NET Framework 3.5 SP1】的方法
[摘要:正在Windows Server 2008下间接装置SQL Server 2008时,会涌现以下毛病: 必需应用“脚色治理对象”装置或设置装备摆设Microsoft .NET Framewor ...
- Python模块 (xlsxwriter)
xlsxwriter是python中用来处理execl表格的库 参考
- 第七篇 Replication:合并复制-订阅
本篇文章是SQL Server Replication系列的第七篇,详细内容请参考原文. 订阅服务器就是复制发布项目的所有变更将传送到的服务器.每一个发布需要至少一个订阅,但是一个发布可以有多个订阅. ...
- Vue.2.0.5-深入响应式原理
大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...
- .NET中常见对象类型
.NET中六大内置对象:1.Response 2.Request 3.Session 4.Appliction 5.Server 6.Cookie System.Web.HttpCo ...
- iOS 本地加载html登陆页面
Html的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- example of Python http server
from BaseHTTPServer import HTTPServer, BaseHTTPRequestHandler print "hello " class TestHTT ...
- iphone尺寸设计
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions http://daily.zhihu.com/story/4 ...
- Xshell下VI打开文件中文乱码解决
修改 /etc/sysconfig/i18n 成如下值:LANG="zh_CN.utf8"LANGUAGE="zh_CN.utf8"SUPPORTED=&quo ...
- fail2ban使用
转子: http://www.2cto.com/Article/201406/310910.html 1.fail2ban简介: fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹 ...