Bootstrap 按钮的使用，这原因我服了

<button type="button" class="btn btn-link"> 链接按钮 </button>

• .btn-lg：制作一个大按钮

• .btn-sm：制作一个小按钮

• .btn-xs：制作一个超小按钮

• .btn-block：块级按钮(拉伸至父元素100%的宽度)

• .active：按钮被点击

• .disabled：禁用按钮

[](

)按钮大小

• .btn-lg：制作一个大按钮

<button type="button" class="btn btn-primary btn-lg"> 大的原始按钮 </button>

<button type="button" class="btn btn-default btn-lg"> 大的按钮 </button>

• .btn-sm：制作一个小按钮

<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>

<button type="button" class="btn btn-default btn-sm">小的按钮</button>

• .btn-xs：制作一个超小按钮

<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>

<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>

• .btn-block：块级按钮(拉伸至父元素100%的宽度)

<button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>

<button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>

[](

)按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class

（1）激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

• 按钮元素：添加 .active class 来显示它是激活的

<button type="button" class="btn btn-default btn-lg "> 默认按钮 </button>

<button type="button" class="btn btn-default btn-lg active"> 激活按钮 </button>

• 锚元素：添加 .active class 到 按钮来显示它是激活的

<button type="button" class="btn btn-primary btn-lg "> 原始按钮 </button>

<button type="button" class="btn btn-primary btn-lg active"> 激活的原始按钮 </button>

（2）禁用状态

当你禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

• 按钮元素：添加 disabled 属性 到 <button> 按钮

<p>

  <button type="button" class="btn btn-default btn-lg">默认按钮</button>

  <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>

  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>

</p>

• 锚元素：添加 disabled class 到 <a> 按钮

<p>

  <a rel="nofollow" href="#" class="btn btn-default btn-lg" role="button">链接</a>

  <a rel="nofollow" href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>

</p>

<p>

  <a rel="nofollow" href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>

  <a rel="nofollow" href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>

</p>

[](

)按钮标签

您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

实例

<a rel="nofollow" class="btn btn-default" href="#" role="button">链接</a>

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

<input class="btn btn-default" type="button" value="输入">

<input class="btn btn-default" type="submit" value="提交">

最后

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。