.btn

---------------------------------

button的背景色:

.btn-primary

.btn-success

.btn-secondary

.btn-danger

.btn-info

.btn-light

.btn-dark

.btn-link

--------------------------

button的边框颜色:

.btn-outline-primary

.btn-outline-secondary

.btn-outline-success

--------------------------------

大小:

.btn-lg

.btn-sm

-------------------------------

状态:

.active

.disabled

disabled作为类只适用于<a>标签,不适用于<button>标签,<button>标签中disabled作为一种属性使用,例如:

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

-----------------------------------

可使用的元素:

<a> <input> <button>

-----------------------------------

混合使用:

.button可与checkbox、radio等混合使用,会产生特殊的效果,如:

实例代码:

<div class="btn-group btn-group-toggle" data-toggle="buttons">

  <label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
方法:
$().button('toggle') 点击button按钮,会进行状态切换
$().button('dispose') 摧毁button按钮

组件 -- Button的更多相关文章

  1. ListView中的组件Button的OnClick事件触发时机

    Android开发时,ListView中的组件Button的OnClick事件必须在ListView之外的组件事件触发后才能触发? 此处ListView无OnItemClick事件,而且ListVie ...

  2. 微信小程序组件button

    表单组件button:官方文档 Demo Code: var types=['default', 'primary', 'warn']; var pageObject = { data: { defa ...

  3. UI 组件 | Button

    最近在与其他自学 Cocos Creator 的小伙伴们交流过程中,发现许多小伙伴对基础组件的应用并不是特别了解,自己在编写游戏的过程中也经常对某个属性或者方法的用法所困扰,而网上也没有比较清晰的用法 ...

  4. 微信小程序_(表单组件)button组件的使用

    微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...

  5. Android经常使用UI组件 - Button

    button(Button)是Android其中一个经常使用的UI组件.非常小可是在开发中最经常使用到.一般通过与监听器结合使用.从而触发一些特定事件. Button继承了TextView.它的功能就 ...

  6. 组件--button详解

    一.wxss尺寸单位rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 严格按照XML语法. 二.icon 图标组件 <!--index ...

  7. android基本组件 Button

    android中提供了普通按钮Buttton和图片按钮ImageButton两种按钮组件,ImageButton按钮中主要有一个android:src属性,用于设置按钮的背景图片.可以在Button的 ...

  8. 安卓开发:UI组件-Button和EditText

    2.3Button Button继承自TextView,除了通过属性设置按钮样式,还可以通过绑定drawable文件的方式来实现不同样式. 2.3.1按钮样式 新建Activity:ButtonAct ...

  9. android基础组件---->Button的使用

    按钮由文本或图标(或文本和一个图标)组成,当用户触摸到它时,会发生一些动作.今天我们开始Button的学习.少年的爱情永远不够用,一杯酒足以了却一件心事. Button的简要说明 根据你是否想要一个带 ...

随机推荐

  1. windows下vi/vim编辑器的基本操作

    windows下vi/vim编辑器的基本操作 Contents 1. 工具准备(下载gvim) 2. vi/vim基本入门 2.1. 安装 2.2. 基本使用 3. vi/vim基本命令表 1 工具准 ...

  2. Node.js实战(一)之概述

    , 一.Node.js介绍 Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进 ...

  3. 前端:background 设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. scrapy shell

    一.scrapy shell 1.安装pip install Jupyter 2.在pycharm中的启动命令: scrapy shell 注:启动后关键字高亮显示 3.查看response 执行sc ...

  5. Linux 内核开发 - 内核定时器

    时间差的度量 系统的定时器硬件以固定的频率产生时钟中断,产生始终中断的间隔以HZ 常量来决定,通常在50~1200之间,x86默认是1000.HZ能够依据不同的内核来配置. Linux 採用jiffi ...

  6. Hadoop Version History and Feature

    Versions and Features Hadoop has seen significant interest over the past few years. This has led to ...

  7. Struts2_learning

    一.这是我学习struts2所做的一个记录,因为整个过程较为麻烦,所以,记录下来,以便以后使用 过程: 步骤: 1)dynamic web project 2)jars 3)struts.xml pa ...

  8. C# WPF xml序列化 反序列化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  9. JavaEE笔记(十)

    #Spring 为了配置bean对象和维护bean对象之间关系的一个容器框架 #三种注入方法 1 Setter注入2 构造参数注入3 注解注入(原理同1) #自动装配(autowire) 模式 说明 ...

  10. SSIS 你真的了解事务吗?

    事务用于处理数据的一致性,事务的定义是,处于同一个事务中的操作是一个工作单元,要么全部执行成功,要么全部执行失败.把事务的概念应用到在实际的SSIS Package场景中,如何在Package中实现事 ...