旺财速啃H5框架之Bootstrap，五
在上一篇<<旺财速啃H5框架之Bootstrap（四）>>做了基本的框架，<<旺财速啃H5框架之Bootstrap（二）>>篇里也大体认识了bootstrap.css样式，下面我们来学习常见的CSS操控内容篇幅。。。。
一、响应式图片
基本样式：
<img src="..." class="img-responsive" alt="响应式图片">
Bootstrap.css 937行
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}定义类img-responsive为块元素、最大宽度100%，height为自动，看出来它没有指定具体宽度，而是限定它的最大宽度不能大于容器的宽度，高度自动是为了保证图片不变形。
当然这是正常放进页面的图片，如果是从数据库取出来的图片，那样的图片可是没有加class=”img-responsive”类的哦，大小可能就会变化了，怎么办呢？ OK，自己附加样式，例如你的内容容器类为content，那么给里面的img写如下样式：
.content img{
max-width:100%;
Height:auto;
}这样图片再大也不会超出你的容器了，并且会随容器变化而变化（切记不要给图片加内嵌样式）
图片类：
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)
二、网页显示HTML代码
要想在网站上显示html源码，可以使用code或pre标记
<p><code><header></code> 作为内联元素被包围。</p> <p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p> <pre> <article> <h1>Article Heading</h1> </article> </pre>
查询效果：《猛点这里》
三、表单元素
Bootstrap针对表单有三种布局方式：垂直表单（默认）、内联表单、水平表单
添加表单的步骤：
1、向父 <form> 元素添加 role="form"
2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
3、向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control
默认表单：
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" >
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>查询效果：《猛点这里》
内联表单
原理：向 <form> 标签添加 class .form-inline
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" >
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>查看效果：《猛点这里》
水平表单
原理：向父 <form> 元素添加 class .form-horizontal
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>查看效果：《猛点这里》
四、按钮
按钮最基本的样式，bootstrap.css 2782行
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}我们在用bootstrap按钮的时候都加上class=”btn”，看不同的按钮效果：
<!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <!-- 信息警告消息的上下文按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎采取的动作 --> <button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 --> <button type="button" class="btn btn-danger">危险按钮</button> <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --> <button type="button" class="btn btn-link">链接按钮</button>
查看效果：《猛点这里》
还有按钮大小、按钮状态的类定义
详细请看：http://noob.d8jd.com/noob/5/113.html
五、字体图标
好，这个我在前面讲过，说直一点，就是用字体做成看上去是图标的样式，好处当然是：矢量，可像操作普通文字那样操作图标，大小、颜色什么的…。
字体图标不是bootstrap所有，很多网站都有自己的一套图标。
阿里巴巴字体图标：http://www.iconfont.cn/
Font Awesome: http://fontawesome.dashgame.com/(很不错的)
Fontello：http://fontello.com/
Icomoon:http://icomoon.io/app/#/select
Glyphicon Halflings：http://glyphicons.com/
这里说一下bootstrap 3.x版本的字体图标运用方式，所先要把字体图标所须要的文件放到bootstrap.css目录同级目录，文件夹名为fonts，里面的文字有4个。
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
bootstrap.css与字体相关CSS说明，267行：
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}@font-face定义网页引入的字体文件
.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性
使用方法：
<span class="glyphicon glyphicon-search"></span>
更多字体图标：http://noob.d8jd.com/noob/5/117.html
OK，今天先到这里…
