关闭

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

标签: bootstrap
428人阅读 评论(0) 收藏 举报
分类:

按钮

        <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构成的图标

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14435次
    • 积分:615
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:2篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论