旺财速啃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>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
<pre>
&lt;article&gt;
&lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</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，今天先到这里…