Bootstrap全局样式 - 按钮

知识点

任何带有 .btn 的元素都会继承圆角灰色按钮的默认外观;
<a><button><input>可以使用Bootstrap提供的按钮类样式;

类 | 描述

  • | :-: | -:
    .btn | 基本样式
    .btn-default | 默认/标准按钮
    .btn-primary | 首选项,未被操作的按钮
    .btn-success | 表示成功的动作
    .btn-info | 一般信息,该样式可用于要弹出信息的按钮
    .btn-warning | 警告,表示需要谨慎操作的按钮
    .btn-danger | 危险,表示一个危险动作的按钮操作
    .btn-link | 让按钮看起来像一个链接
    .btn-lg | 大尺寸按钮
    .btn-sm | 小尺寸
    .btn-xs | 超小尺寸
    .btn-block | 块级按钮
    .active | 按钮被点击
    .disabled | 禁用

如果为 <button> 元素添加 disabled 属性,Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有阴影,目前Bootstrap开发团队还没有解决方案。


实践

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>按钮</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<!--按钮-->
<div class="container">
    <input type="button" value=".btn" class="btn"/>
    <input type="button" value="(默认样式)Default" class="btn btn-default"/>
    <input type="button" value="(首选项)Primary" class="btn btn-primary"/>
    <input type="button" value="(成功)Success" class="btn btn-success"/>
    <input type="button" value="(警告)Warning" class="btn btn-warning"/>
    <input type="button" value="(危险)danger" class="btn btn-danger"/>
    <input type="button" value="link,链接" class="btn btn-link"/>
    <input type="button" value="大按钮,Primary,lg" class="btn btn-primary btn-lg"/>
    <input type="button" value="小按钮,Primary,sm" class="btn btn-primary btn-sm"/>
    <input type="button" value="超小按钮,Primary,xs" class="btn btn-primary btn-xs"/>
    <input type="button" value="块级按钮" class="btn btn-primary btn-block"/>
    <input type="button" value="active,激活状态" class="btn btn-primary active"/>
    <input type="button" value="disabled,禁用状态" class="btn btn-primary disabled"/>
</div>

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,744评论 3 184
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,547评论 0 66
  • 第3章 探索Bootstrap组件 在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按...
    海上名月阅读 4,535评论 1 6
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 11,970评论 0 42
  • 原来害怕洗碗,从小到大几乎没洗过碗,现在不得不洗碗,因为不想再到外面吃饭,害怕到外面吃饭,觉得还是家里的饭菜...
    许生说阅读 3,462评论 1 2

友情链接更多精彩内容