Bootstrap基本插件学习笔记之按钮(21)

前面已经介绍过Button的使用。通过button按钮，我们还能实现一些诸如按钮状态控制等形式的交互。

0x01 加载状态

添加data-loading-text=”Loading…”属性：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>按钮交互</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>按钮交互</h1>
 </div>
 <button id="btnLoad" type="button" class="btn btn-primary" data-loading-text="Loading...">
  加载状态
 </button>
 <script>
  $(function () {
   $("#btnLoad").click(function () {
    $(this).button('loading').delay(1000).queue(
      function () {
       $(this).button('reset');
       $(this).dequeue();
      }
    )
   })
  })
 </script>
</div>
</body>
</html>

效果如下：

$("#btnLoad").click(function () {
  $(this).button('loading').delay(1000).queue(
    function () {
     $(this).button('reset');
     $(this).dequeue();
    }
   )
})

loading状态持续1s后，将会执行reset，恢复原始状态。

0x02 复选框

设置data-toggle为”buttons”可以实现复选框按钮组的效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>复选框按钮组</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>复选框按钮组</h1>
 </div>
 <div class="btn-group" data-toggle="buttons">
  <button class="btn btn-default">
   <input type="checkbox">选项1
  </button>
  <button class="btn btn-default">
   <input type="checkbox">选项2
  </button>
  <button class="btn btn-default">
   <input type="checkbox">选项3
  </button>
 </div>
</div>
</body>
</html>

效果如下：

0x03 单选按钮

类似地：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>单选按钮</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>单选按钮</h1>
 </div>
 <div class="btn-group" data-toggle="buttons">
  <button class="btn btn-default">
   <input type="radio" name="radio">选项1
  </button>
  <button class="btn btn-default">
   <input type="radio" name="radio">选项2
  </button>
  <button class="btn btn-default">
   <input type="radio" name="radio">选项3
  </button>
 </div>
</div>
</body>
</html>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Bootstrap按钮

    详解Bootstrap按钮

    描述 Bootstrap Button(按钮)JavaScript 插件允许您加强按钮的功能.您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条. 什么是必需的 您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件.它们都位于 docs/assets/js 文件夹内. 如何使用它 您可以不编写任何 JavaScript 只通过标记使用该插件,也可以通过 JavaScript 启用按钮. Bootstrap 提供了一些选项来定义按

  • Bootstrap按钮组件详解

    Bootstrap按钮组件详解

    按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中. 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class=&qu

  • Bootstrap复选框和单选按钮美化插件(推荐)

    Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • Bootstrap按钮下拉菜单组件详解

    Bootstrap按钮下拉菜单组件详解

    按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件. <div class="btn-toolbar" role="toolbar"> <div class="btn-group">

  • Bootstrap每天必学之按钮

    Bootstrap每天必学之按钮

    1.按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等.那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件. 源码查询: 按钮组也是一个独立的组件,所以可以找到对应的源码文件: ☑ LESS版本:对应的源文件为buttons.less ☑ Sass版本:对应的源文件为_buttons.scss ☑ CSS版本:对应bootstrap.css文件第3131行-第3291行

  • Bootstrap每天必学之按钮（Button）插件

    Bootstrap每天必学之按钮（Button）插件

    按钮(Button)在 Bootstrap 按钮 一章中介绍过.通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组. 如果您想要单独引用该插件的功能,那么您需要引用 button.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.加载状态 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loading-text="

  • 全面解析Bootstrap表单使用方法（表单按钮）

    全面解析Bootstrap表单使用方法（表单按钮）

    一.多标签支持 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等. 同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名".btn". <button class="btn btn-default" type="button&

  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

  • Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单 导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默

  • bootstrap改变按钮加载状态

    bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个 data-loading-text="Loading..." 属性,然后js总体代码是这样: 复制代码 代码如下: <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary"

随机推荐