bootstrap 图片类 和 按钮类 部分

bootstrap框架，来自 Twitter,基于 html ,css ,js.简介灵活。

首先引入  bootstrap.js   bootstrap.css  及 jquery.js  这里不考虑兼容

对图片的操作的类class：

.img-rounded   图片圆角 大概是  border-radius: 6px    IE8不支持

.img-circle   让整个图片变成圆形 ===border-radius=50%  IE8不支持

.img-thumbnail   带padding和border的缩略图，和照片效果很像

.img-responsive 把图片设置成 响应式

用法： <img src="data:images/path.jpg"    alert="类名"  class="img"/>

按钮类（扁平化）class:

.btn  为按钮添加基本样式     .btn-default  标准/默认的按钮

功能性按钮：  .btn-info     .btn-success    .btn-warning     .btn-danger    不同的情况使用不同的按钮

　　　　　　 点击弹出表示   信息 /成功/警告/危险   不同的按钮具有不同的颜色

单击按钮的过程：  .btn-primary   .active        原始按钮样式（未点击）/激活后的按钮（点击后）

按钮的大小： .btn-xs     .btn-sm      .btn-lg      小号/中号/大号按钮

　　　　　　移动页面上常看到一个按钮独占一行 width: 100%父元素：    .btn-block     块级按钮    超大号按钮

　　　　　　　.btn-lg,
　　　　　　.btn-group-lg > .btn {
  　　　　　　　　　padding: 10px 16px;
  　　　　　　　　　font-size: 18px;
  　　　　　　　　　line-height: 1.3333333;
  　　　　　　　　　border-radius: 6px;
　　　　　　}

　　　　　　可见，按钮的大小，是改变 padding ,font-size, line-height等值

禁用按钮：  .disabled     .

特殊的按钮： .btn-link   连接按钮      外观像超链接，但保持按钮的功能，    改变额按钮的外观

用法： <button type="button" class="btn btn-info btn-lg"></button>       .btn类必须引入 +按钮的样式+ 按钮的大小+按钮状态   呵呵