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.一,应用为主的Bootstrap
classes

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

<div class="panel">

小编设置class的性质为panel,他是Bootstrap定义的五个CSS
classes中的1个。那里有三种基本样式classes:

Bootstrap Class

Description

panel

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

panel-heading

为panel创建一个heading

btn

创建一个button

well

使用inset 效果组织元素

唤醒:并不是怀有的Bootstrap样式都亟需利用class属性。h1-h6字号,自动应用样式。

2.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.二,修改尺寸

可以透过利用size修改class,来修改成分。他们和多少个基本class名,hyphen,lg,sm等联合用,

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

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

<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.壹,确保合适的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.三,使用Bootstrap来创建2个表单

<!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成分拥有百分百的品位可用空间。

唤醒:label成分用于包涵描述文本,input成分与用于其余类其余input成分有不一致的协会。

2.4、使用Bootstrap来创建Grids

Bootstrap提供的体裁classes,可以用于创制不一样档次的grid布局,用于响应式布局。

<!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" />

<style>

#gridContainer {padding: 20px;}

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

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

</style>

</head>

<body>

<div class="panel">

<h3 class="panel-header">

Grid Layout

</h3>

<div id="gridContainer">

<div class="row grid-row">

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

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

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

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

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

</div>

<div class="row grid-row">

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

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

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

</div>

<div class="row grid-row">

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

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

</div>

<div class="row grid-row">

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

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

</div>

<div class="row grid-row">

<div class="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>

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

<head>

<title>Bootstrap Examples</title>

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

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

<link href="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>

<div class="panel">

<h3 class="panel-header">

Grid Layout

</h3>

<div id="gridContainer">

<div class="row grid-row">

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

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

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

</div>

<div class="row grid-row">

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

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

</div>

<div class="row grid-row">

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

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

</div>

</div>

</div>

</body>

</html>

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

指示:注意小编加了meta元素。该因素告诉移动设备浏览器,以实际尺寸突显内容。没有meta成分的话,许多平移装备浏览器会一缩放的格局,突显桌面版网页,用户必要拓宽才能看仔细。简单来说,当有移动设备访问时,你须求加上三个meta成分。查看作者的The
Definitive Guide to HTML5 那本书,有详实表明。

 

 

相关文章