详解Bootstrap各式各样的按钮(推荐)

Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便。

为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html。在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重。这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我做出自己的总结,归纳知识点,方便自己记忆。假如您在做项目或者学习中,正好需要这方面的知识,然后这篇文章刚好可以帮到您,那我将会非常开心。

活学活用,自己利用bootstrap的样式来做一个表格,里边放一些知识点:

类样式 描述
.btn 圆角灰色按钮,为了让按钮不那么尖锐,我们的按钮都应该使用这个样式来获得圆角,然后再覆盖上其他的特性。
.btn-default 默认/标准按钮,白色的按下灰色。
.btn-primary 原始按钮样式(未被操作),这个跟active相对应,他是一个按钮没被操作的样式,而active是按钮被点击时显示的相应的样式。
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击,按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
.disabled 禁用按钮,颜色会变淡 50%,并失去渐变。

按钮的各个效果如下:

很明显,圆角按钮~成功按钮都是比较容易理解的,我们主要讲一下原始按钮,激活按钮和禁用按钮。

原始按钮(btn-primary):指的是一个按钮(原始按钮,激活按钮和禁用按钮都使用了成功按钮的样式),还没有被操作的样式,这里的表现跟其左边的成功按钮样式是一致的,都是没有被按下的样子;

激活按钮(.active):按钮被点击,被按压时的样式,这个可以说跟原始按钮是 相对应的。

禁用按钮(.disabled):看到效果很明显,相比于成功按钮,颜色变淡,失去渐变,有一层 蒙蒙的效果,当我们的鼠标悬停在上边的时候,会出现红色的禁用圆圈,这个样式非常利于用户体验。

附上代码:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>bootsrap按钮</title>
 <link rel="stylesheet" href="../libs/bootstrap.css">
</head>
<body>
 <div class="container">
  <button class="btn">圆角按钮</button>
  <button class="btn btn-default">默认按钮</button>
  <button class="btn btn-info">信息按钮</button>
  <button class="btn btn-warning">警示按钮</button>
  <button class="btn btn-danger">危险按钮</button>
  <button class="btn btn-link">链接按钮</button>
  <button class="btn btn-lg">大的按钮</button>
  <button class="btn btn-sm">小的按钮</button>
  <button class="btn btn-xs">超小按钮</button>
  <button class="btn btn-block">块级按钮</button>
  <button class="btn btn-success">成功按钮</button>
  <button class="btn btn-success btn-primary">原始按钮</button>
  <button class="btn btn-success active">激活按钮</button>
  <button class="btn btn-success disabled" role="button">禁用按钮</button>
 </div>
</body>
</html> 

以上所述是小编给大家介绍的详解Bootstrap各式各样的按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-12-11

bootstrap改变按钮加载状态

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

Bootstrap菜单按钮及导航实例解析

下拉菜单 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog

bootstrap与Jquery UI 按钮样式冲突的解决办法

参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方 添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了

详解Bootstrap按钮

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

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

本文先为大家分享按钮组的使用方法,具体内容如下 一.按钮组(Button Groups) 1.单个按钮组 用.btn-group封装多个带.btn的<button> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class=&qu

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

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

Bootstrap按钮下拉菜单组件详解

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

基于bootstrap按钮式下拉菜单组件的搜索建议插件

本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>Bootstrap 搜索建议插件</title> <meta name="viewport" content

jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

本文实例讲述了jQuery实现的纵向下拉菜单.分享给大家供大家参考,具体如下: 当我们浏览网页和使用word编辑一下文字的时候,我们都能看见横向下拉的身影,有了横向菜单,我们能对整个界面进行更好的布局,达到我们想要的效果,那么这些横向菜单式如何用代码实现的,当我们浏览或使用的时候她又是如何呈现在我们面前的,学习了JQuery之后,小编渐渐看到她美丽的容颜,接下来,小编主要讲解如何通过jquery实现纵向下拉菜单. 第一步,我们来编写html的代码,如下所示: <!DOCTYPE html PUB

bootstrap suggest下拉框使用详解

bootStrap suggest js下拉框的使用,供大家参考,具体内容如下 HTML <div class="modalTop" id="suit_name_div"> <p>选择商品:</p> <%@ include file="dataJs/item/itemSuggest.jsp" %> </div> itemSuggest.jsp <%@ page language=&

Bootstrap CSS组件之按钮下拉菜单

按钮下拉菜单 结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,

Vue.js下拉菜单组件使用方法详解

本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框 看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的某一项,菜单

Bootstrap实现下拉菜单效果

下拉菜单用于显示链接列表的可切换.有上下文的菜单. 1.案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码. <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> D

Vue使用枚举类型实现HTML下拉框步骤详解

下拉框包含option中的Value和用来显示的选项, 一般后台都是使用的Value值,而不是显示在前台的选项 第一步: 编写下拉框需要的枚举类型 StatusEnum.java public enum StatusEnum { RED, YELLOW, GREEN } 第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项 StatusDTO.java public class StatusDTO { private String code; private String

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)

效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="