<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 按钮选项</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <!-- 标准的按钮 -->

        <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>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：激活状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮被点击

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个超小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个大按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：表示一个危险动作的按钮操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. JS-this的使用

    做前端开发已经半年之多了,前几天看见apply时心生疑惑,于是查阅了好多资料但还是不太理解,只知道是源于this的问题,今天偶然看到了阮一峰大佬的讲解js中的this问题(http://www.rua ...

  2. powerbuilder连接oracle数据库

    一.打开已经安装好的pb9.0,主界面菜单栏有个两个圆柱形就行数据库连接,点击database. 二.选择oracle版本,由于数据库版本是9i,可以使用084 oracle8/8i.右键--选择ne ...

  3. 16 Z变换

    Z变换 由于\(DTFT\)变换是有收敛条件的,并且其收敛条件比较严格,很多信号不能够满足条件,为了有效的分析信号,需要放宽收敛的条件,引入\(Z\)变换. 定义 已知序列的\(DTFT\)为 \[ ...

  4. ProtoBuf试用与JSON的比较

    介绍 ProtoBuf 是google团队开发的用于高效存储和读取结构化数据的工具.什么是结构化数据呢,正如字面上表达的,就是带有一定结构的数据.比如电话簿上有很多记录数据,每条记录包含姓名.ID.邮 ...

  5. 实现简单HttpServer案例

    <html> <head> <title>第一个表单</title> </head> <body> <pre> me ...

  6. tkinter学习（3）scale尺度条和menu菜单

    1.scale学习(尺度条)1.1 代码: #第1步:导出模块 import tkinter as tk #第2步:定义窗口,及其标题.大小和位置 win = tk.Tk() win.title('s ...

  7. EAP认证

    EAP信息交换: 上图中展示的是OTP(一次性密码)实现EAP交换过程,具体的EAP交换过程如下: 步骤1:请求方向认证方发送EAPOL-Start消息,通知对方已经做到了认证准备(注意:若会话由认证 ...

  8. 关于calendar修改前的代码和修改后的代码

    Java编写的日历,输入年月,输出这个月的日期与星期 修改前的代码: import java.io.BufferedReader; import java.io.IOException; import ...

  9. 【SSM】Log4j 日志配置

    1.log4j.properties ### 配置根 ### # log4j.rootLogger = debug,console ,fileAppender,dailyRollingFile,ROL ...

  10. OS（操作系统）结构

    1.整体式: 模块设计(独立的) 调用自由 用全局变量来通信 缺点:信息不安全,维护更新比较难 2.层次结构(典型的如TCP/IP协议): 所有的模块排成若干层,相邻的互相依赖调用 按调用次序来安排 ...