关于bootstrap--表单（按钮<button>效果、大小、禁用）

最新推荐文章于 2024-08-05 22:56:55 发布

weixin_30677617

最新推荐文章于 2024-08-05 22:56:55 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shark1100913/p/5635097.html

本文介绍了如何使用不同HTML标签实现按钮效果，并提供了按钮禁用的两种方法：一是直接在标签内添加disabled属性；二是为元素添加类名“disabled”。此外，文章还展示了关闭图标的实例。

1、各种标签实现按钮效果：

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>

<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a class="btn btn-default">啊哈哈</a>

注：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。

2、各种按钮效果：

3、各种按钮的大小：

3、按钮禁用：

方法1：在标签中添加disabled属性：

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>

方法2：在元素标签中添加类名“disabled”：

<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
    <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
    <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
</body>

4、关闭符：

<p>关闭图标实例
   <button type="button" class="close" aria-hidden="true">
      &times;
   </button>
</p>

转载于:https://www.cnblogs.com/shark1100913/p/5635097.html