初学 Bootstrap 按钮与图片

一。按钮#

基本款#

给 <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">

file
另外给上面的这些按钮追加 .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">

file

二。图片#

给 <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>