.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. IIS7.5全站301跳转,内页+带参数url,这才是真正的全站跳转

    说好的转型安全领域,可是我还是忍不住要给大家分享这个教程.因为这个问题很常见,大部分人都遇到了(可能你没注意),困扰了我很久,相信这是一篇真正适合你的IIS301跳转教程. 背景 说到301跳转,作为 ...

  2. C++的技术探究

    C++深究 函数指针 double pam(int, double); // prototype double (*pf)(int, double); // declare function poin ...

  3. Python2.7-marshal

    marshal模块,和 pickle 模块功能基本相同,也是序列化数据,只不过 marshal 都序列化成二进制数据,由于没有官方统一,不同版本 marshal 的结果也会不一样,所以不推荐使用.ma ...

  4. Android ListView自定义分割线 header 和footer设置没有页眉和页脚

    ListView.setFooterDividersEnabled(false);//设置listview无页脚 ListView.setHeaderDividersEnabled(false);// ...

  5. MVC 拦截指定的action

    有时,我们需要在特定的一些aciton中做校验.比如:验证是否登录.实现方式有两种: 一.编写一个公共的方法专门用于实现是否登录的验证,然后在每个需要进行验证的aciton的头部去调用该方法,根据方法 ...

  6. STM32 CAN总线标识符过滤器难点解析

    STM32 CAN总线标识符过滤器难点解析 原创 2016年05月31日 15:12:24 标签: stm32 / CAN 4910 CAN总线是目前应用非常多的一种总线,在汽车电子,航空航天中应用广 ...

  7. 【LeetCode92】Reverse Linked List II★★

    题目描述: 解题思路: 题目大意:给定一个链表,反转第m到第n个结点部分,m.n满足1 ≤ m ≤ n ≤ length of list. 解题思路参照LeetCode206题,用迭代法,不过要注意以 ...

  8. SAP函数 LAST_DAY_OF_MONTHS 获取月末最后一天日期

    DATA LAST_DATE TYPE SY-DATUM. CALL FUNCTION 'LAST_DAY_OF_MONTHS' EXPORTING day_in = sy-datum IMPORTI ...

  9. 从0开始学golang--2.1--如何去爬园子的数据

    20天过去了,才开始写...主要还是因为自己懒吧.之前一边上班一边也有挤时间练习golang,可是写博客却老是不能行动,跑步也没跑了.突然的就懈怠了快一个月.可能也和开始玩the elder scro ...

  10. android studio更新gradle失败的解决办法-转

    android studio中每次自动更新gradle时速度实在太慢因为gradle服务器比较慢,所以更新gradle会比较慢,建议先下载下来,然后手动添加到gradle的下载目录,提升速度. 使用下 ...