旺财速啃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" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> <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" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件输入</label> <input type="file" id="inputfile"> </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" id="firstname" 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" id="lastname" 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，今天先到这里…
