一.按钮

基本款

给 <a> <button> <input> 首先添加 .btn ,然后追加 .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link 的其中之一,就可以这些标签赋予不同的样式.

<a href="#" class="btn btn-default">a</a>
<button class="btn btn-default">button</button>
<input type="button" class="btn btn-default" value="input">
<input type="submit" class="btn btn-default" value="submit">
<hr>
<input type="button" class="btn btn-primary" value="primary">
<input type="button" class="btn btn-success" value="success">
<input type="button" class="btn btn-info" value="info">
<input type="button" class="btn btn-warning" value="warning">
<input type="button" class="btn btn-danger" value="danger">
<input type="button" class="btn btn-link" value="link">

另外给上面的这些按钮追加 .btn-lg .btn-sm .btn-xs 类样式,可以得到不同尺寸的按钮,比较简单,就不做记录了.
有一个类值得注意, 如果再追加.btn-block 类样式,会使得按钮变成块级元素,宽度占满父容器的 100%.
下面是Bootstrap对这个类的定义

.btn-block {
  display: block;
  width: 100%;
}

激活和禁用样式的按钮

.active 类样式使得按钮呈现出激活状态, .disabled 可以禁用按钮

<input type="button" class="btn btn-primary active" value="primary">
<input type="button" class="btn btn-primary disabled" value="primary">

二.图片

给 <img> 标签加上 .img-responsive 类样式,可以使图片的宽度随着浏览器宽度的改变而改变,并且高度按比例缩放.
另外, .img-rounded 给图片加了圆角, .img-circle 使图片变圆, .img-thumbnail 使图片变成缩略图的样子

<div class="container">
    <div class="row">
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive"></div>
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive img-rounded"></div>
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive img-circle"></div>
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive img-thumbnail"></div>
    </div>
</div>

本作品采用《CC 协议》，转载必须注明作者和本文链接