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


Posted in Javascript onMay 10, 2016

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

一、按钮组(Button Groups)

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

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div>

2、多个按钮组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div>

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

<div class="btn-group btn-group-vertical"> 
 ... 
</div>

二、下拉按钮(Button Dropdowns)

例子

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

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

2、分割的下拉按钮

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

3、向上出现的菜单

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

三、JavaScript

例子
加载状态。添加data-loading-text="Loading..."。

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

开关状态。添加data-toggle="button"。

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
 

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

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

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

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

用法
JavaScript代码触发开关状态。
$().button("toggle") 
也可添加data-toggle属性自动触发。
<button type="button" class="btn" data-toggle="button" >…</button> 

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

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
注意:Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete="off"。

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

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

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script>

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

Javascript 相关文章推荐
js的touch事件的实际引用
Oct 13 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
You might like
php读取csv实现csv文件下载功能
2013/12/18 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
JavaScript实现密码强度实时验证
2020/03/18 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python切割图片的示例
2020/11/12 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
python FTP编程基础入门
2021/02/27 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers