当前位置：首页 > 资讯 > 技术文档

使用Bootstrap美化按钮实例代码(demo)

时间：2022-01-16 23:01 编辑：来源：阅读：
扫一扫，手机访问

摘要：使用Bootstrap美化按钮实例代码(demo)

在HTML5中,按钮的常用属性主要为背景颜色和大小 [url=https://github.com/tw-lab-roadmap-1/LiMeiYing-task3/blob/master/ButtonDemo.html]demo代码演示[/url] [b]一. input标签:[/b]

<input type="button" value="按钮" class="btn"/>

[b]二. button标签:(这里用button标签举例)[/b]

<button type="button" class="btn btn-defult">提交</button>

btn 表示基本样式 btn-defult 表示默认样式 [img]http://files.jb51.net/file_images/article/201702/2017020311281613.png[/img] 默认样式 btn-primary 表示背景色为蓝色

<button type="button" class="btn btn-defult">按钮</button>

[img]http://files.jb51.net/file_images/article/201702/2017020311281614.png[/img] primary btn-success表示背景色为绿色

<button type="button" class="btn btn-success">按钮</button>

[img]http://files.jb51.net/file_images/article/201702/2017020311281615.png[/img] success [b]其他颜色属性[/b] btn-waring 表示背景色为橙色 btn-danger 表示背景色为红色 btn-info 表示背景色为浅蓝色 btn-link 表示无背景色

<div class="row">
      <button type="button" class="btn btn-defult">按钮</button>
      <button type="button" class="btn btn-primary">按钮</button>
      <button type="button" class="btn btn-success">按钮</button>
      <button type="button" class="btn btn-waring">按钮</button>
      <button type="button" class="btn btn-info">按钮</button>
      <button type="button" class="btn btn-danger">按钮</button>
      <button type="button" class="btn btn-link">按钮</button>
</div>

[img]http://files.jb51.net/file_images/article/201702/2017020311281716.png[/img] 效果展示 [b]按钮尺寸:[/b] btn-lg 较大 btn-md 中等 btn-sm 较小 btn-xs 更小

<div class="row" style="text-align: center">
      <button type="button" class="btn btn-defult btn-lg">按钮</button>
      <button type="button" class="btn btn-primary btn-md">按钮</button>
      <button type="button" class="btn btn-success btn-sm">按钮</button>
      <button type="button" class="btn btn-warning btn-xs">按钮</button>
      <button type="button" class="btn btn-info btn-sm">按钮</button>
      <button type="button" class="btn btn-danger btn-md">按钮</button>
      <button type="button" class="btn btn-link btn-lg">按钮</button>
</div>

[img]http://files.jb51.net/file_images/article/201702/2017020311281717.png[/img] 效果展示 [b]其他属性[/b] btn-block 让按钮的宽度变为100%并且成了块级元素 active 表示按钮为激活状态 disabled 表示按钮为禁用状态不可点击

<button type="button" class="btn btn-danger btn-lg" disabled>按钮</button>

[img]http://files.jb51.net/file_images/article/201702/2017020311281718.png[/img] 禁用变为灰色 [b]三. 用a标签做一个按钮[/b]

<a herf="#" class="btn btn-danger active">按钮</a>

以上所述是小编给大家介绍的使用Bootstrap美化按钮实例代码(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：基于JS实现导航条之调用网页助手小精灵的方法
下一篇：关于使用 jBox 对话框的提交不能弹出问题解决方法

资讯排行榜
更多>>