心累

逆水行舟不进则退

[学习笔记] 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构成的图标

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

阅读更多
版权声明:文章出自 blog.csdn.net/guddqs , 转载请注明 ! https://blog.csdn.net/guddqs/article/details/53992466
文章标签: bootstrap
个人分类: 学习笔记 bootstrap
上一篇[实用代码片段] web分页之 智能10页
下一篇[学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭