栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JS组件Bootstrap按钮组与下拉按钮详解

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JS组件Bootstrap按钮组与下拉按钮详解

本文先为大家分享按钮组的使用方法,具体内容如下

一、按钮组(Button Groups)

1、单个按钮组
用.btn-group封装多个带.btn的

2、多个按钮组
将多个放进中。

 
  
  ... 
  
  
  ... 
  
 

3、垂直按钮组
向.btn-group添加.btn-group-vertical。

 
 ... 
 

二、下拉按钮(Button Dropdowns)

例子

 
  
  Action 
   
  
  
 

1、控制大小
同样使用.btn-large、.btn-small、.btn-mini控制大小。

2、分割的下拉按钮

 
  
  
  
 

3、向上出现的菜单

 
  
  
  
 

三、Javascript

例子
加载状态。添加data-loading-text="Loading..."。
复制代码 代码如下: 

开关状态。添加data-toggle="button"。
复制代码 代码如下: 

复选框。在btn-group后添加data-toggle="buttons-checkbox"。

 
  
  
  
 

单选。在btn-group后添加data-toggle="buttons-radio"。

 
  
  
  
 

用法
Javascript代码触发开关状态。
$().button("toggle") 
也可添加data-toggle属性自动触发。
 

使用Javascript代码触发加载状态,同时按钮显示data-loading-text属性指定的值。

$().button("loading") 

 
注意:Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete="off"。

使用Javascript代码重置按钮状态。
$().button("reset") 

重置按钮状态,并将按钮文字变成指定的文字。下例的complete仅为例子,可以替换。

 
 

以上就是本文的全部内容,希望对大家的学习有所帮助。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/97210.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号