bootstrap之button组件

创建一个有样式的button:
<button type="button" class="btn btn-default">默认按钮</button>

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

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

<button type="button" class="btn btn-info">信息按钮</button>

<button type="button" class="btn btn-warning">警告按钮</button>

<button type="button" class="btn btn-danger">危险按钮</button>

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

则显示效果如下:

按钮大小

除了样式按钮,还有大小不一的按钮:

<p>
    <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>

显示效果如下:

按钮状态

激活状态:

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

显示效果如下:


禁用状态:

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

显示效果如下:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,729评论 3 184
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,512评论 0 66
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,328评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,386评论 19 139
  • 我对贪婪的认识应该很早很早。很小的时候,内心的贪婪就已经膨胀了吧。会希望有更多的钱买玩具买吃的,希望穿名牌,希望吃...
    觉醒的流川阅读 6,099评论 0 4