[学习笔记] bootstrap (三): 按钮,图片,图标

按钮

        <button class="btn btn-primary">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-success">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-info">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-warning">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-danger">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-link">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-lg">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-sm">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-xs">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-block">加入购物车</button>
        <br/>
        <br/>
        <button class="btn active">加入购物车</button>
        <br/>
        <br/>
        <button class="btn disabled">加入购物车</button>

以上分别有,颜色(psiwd),按钮 模仿 链接 ,不同大小(lg,sm,xs),按钮状态(active,disabled)

图片

<img src="download.png" class="img-rounded">
<img src="download.png" class="img-circle">
<img src="download.png" class="img-thumbnail">

三个分别为:圆角风格,变成圆形,缩略图(准确说是个边框吧)

图标(glyphicon )

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

以上代码使用button标签构建一个按钮,按钮中文字为User,文字前有一个图标:用span加class构成的图标

同时可以配合其他样式构造更好看的图标(如改变大小,颜色,)