详解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各式各样的按钮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap改变按钮加载状态

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

  • 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重置输入框内容按钮插件

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

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

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

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

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

  • 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按钮下拉菜单组件详解

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

  • 详解Bootstrap按钮

    详解Bootstrap按钮

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

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

    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各式各样的按钮(推荐)

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

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我

  • 详解bootstrap用dropdown-menu实现上下文菜单

    详解bootstrap用dropdown-menu实现上下文菜单 写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现. 代码: <div id="settingInGraph"> <ul class="dropdown-menu" role="menu&

  • 详解BootStrap中Affix控件的使用及保持布局的美观的方法

    Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • 详解Bootstrap网格垂直和水平对齐方式

    详解Bootstrap网格垂直和水平对齐方式

    目录 1.Bootstrap网格布局 2.垂直对齐 2.1 row标签中设置垂直对齐 2.2 col标签中设置垂直对齐 3.水平对齐 3.1 row标签中设置垂直对齐 1.Bootstrap网格布局 上一节我们介绍了Bootstrap中的网格,网格在网页布局中是一个重点和难点,布局是网页设计的起点和基础,一定要花功夫弄懂,最起码把我写的教程介绍的内容弄懂,因为我写的都是最常用的和最基础的.当然对于一个有一定基础的网页设计师,这些内容相信一看就懂,今天我们进一步学习网格布局. 本节内容涉及到通用类

  • 详解Bootstrap 学习（一）入门

    详解Bootstrap 学习（一）入门

    一:什么是Bootstrap? Bootstrap是目前留下的前端框架之一,具备已下特点: 基于HTML.CSS.JavaScript开发的: 样式展现方面定义了大量全局样式.列表.按钮等样式组件: 特效方面实现了轮播.菜单等常用的js控件: 样式采用less编写,js调用了jquery库: 来自Twitter,现在委托保管再github上. Bootstrap适用于网站的开发,不适用于管理系统(例如ERP)开发,它提供的css组件比较多,js控件比较少,因此可以称bootstrap是一套css

  • 详解iOS中Button按钮的状态和点击事件

    详解iOS中Button按钮的状态和点击事件

    一.按钮的状态 1.UIControlStateNormal 1> 除开UIControlStateHighlighted.UIControlStateDisabled.UIControlStateSelected以外的其他情况,都是normal状态 2> 这种状态下的按钮[可以]接收点击事件 2.UIControlStateHighlighted 1> [当按住按钮不松开]或者[highlighted = YES]时就能达到这种状态 2> 这种状态下的按钮[可以]接收点击事件 3

  • 详解Bootstrap的iCheck插件checkbox和radio

    详解Bootstrap的iCheck插件checkbox和radio

    iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phone等系统 4.方便定制 - 用HTML 和 CSS 即可为其设置样式 (多套皮肤) 5.体积小巧 - gzip压缩后只有1 kb 6.25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 7.8 个回调事件 用来监听输入框的状态 8.7个方法 用来通过编程方式控制输入框

  • 详解Bootstrap插件

    在前面 布局组件 章节中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.j

随机推荐