详解Bootstrap按钮

2024-09-28 04:52:57

描述

Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。

什么是必需的

您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。

如何使用它

您可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮。

Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于<a>, <button>, 或 <input> 元素上：

类	描述
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

首先看下不同颜色的按钮：

<html lang="en">
<head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="Keywords" content="关键词一，关键词二">
  <meta name="Description" content="网站描述内容">
  <meta name="Author" content="Yvette Lau">
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
  <title>BootstrapDemo</title>
  <!--css js 文件的引入-->
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
  <body style="padding: 20px;">
    <!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success">成功按钮</button>
    <!-- 用于要弹出信息的按钮 -->
    <button type="button" class="btn btn-info">信息按钮</button>
    <!-- 表示应谨慎操作的动作 -->
    <button type="button" class="btn btn-warning">警告按钮</button>
    <!-- 表示一个危险动作的按钮 -->
    <button type="button" class="btn btn-danger">危险按钮</button>
    <!-- 让按钮看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link">链接按钮</button>
  </body>
</html>

效果：

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。

按钮大小

鉴于head部分都是相同的，只列出Body的内容。

<body style="padding: 20px;width:500px;">
  <!-- 标准的按钮 -->
  <button type="button" class="btn btn-default">默认按钮</button>
  <button type="button" class="btn btn-lg btn-default">大的默认按钮</button>
  <br/><br/>
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
  <button type="button" class="btn btn-primary">原始按钮</button>
  <button type="button" class="btn btn-sm btn-primary">小的原始按钮</button>
  <br/><br/>
  <!-- 表示一个成功的或积极的动作 -->
  <button type="button" class="btn btn-success">成功按钮</button>
  <button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button>
  <br/><br/>
  <!-- 用于要弹出信息的按钮 -->
  <button type="button" class="btn btn-info">信息按钮</button><br/><br/>
  <button type="button" class="btn btn-block btn-info">块级信息按钮</button>
</body>

效果如下所示：

按钮状态

按钮分为active和disabled两种状态、
激活状态：按钮呈现出被按压的外观，即背景颜色变深、深色边框和阴影。
禁用状态：按钮颜色会变淡 50%，并失去渐变

看具体的例子：

<body style="padding: 20px;width:500px;">
  <!-- 标准的按钮 -->
  <button type="button" class="btn btn-default">默认按钮</button>
  <button type="button" class="btn btn-default active">激活的默认按钮</button>
  <br/><br/>
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
  <button type="button" class="btn btn-primary">原始按钮</button>
  <button type="button" class="btn btn-primary active">激活的原始按钮</button>
  <br/><br/>
  <!-- 表示一个成功的或积极的动作 -->
  <button type="button" class="btn btn-success">成功按钮</button>
  <button type="button" class="btn btn-success active">激活的成功按钮</button>
  <br/><br/>
  <!-- 用于要弹出信息的按钮 -->
  <button type="button" class="btn btn-info">信息按钮</button>
  <button type="button" class="btn btn-info active">激活的信息按钮</button>
  <br/><br/> 

  <button type="button" class="btn btn-default">默认按钮</button>
  <button type="button" class="btn btn-default disabled">禁用的默认按钮</button>
  <br/><br/>
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
  <button type="button" class="btn btn-primary">原始按钮</button>
  <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button>
  <br/><br/>
  <!-- 表示一个成功的或积极的动作 -->
  <button type="button" class="btn btn-success">成功按钮</button>
  <button type="button" class="btn btn-success disabled">禁用的成功按钮</button>
  <br/><br/>
  <!-- 用于要弹出信息的按钮 -->
  <button type="button" class="btn btn-info">信息按钮</button>
  <button type="button" class="btn btn-info disabled">禁用的信息按钮</button>
</body>

按钮标签

a,input都可以表现的像一个按钮，但是避免跨浏览器不一致，最好使用Button标签。

<body style="padding: 20px;">
  <a class="btn btn-default" href="#" role="button">超链接按钮</a>
  <button class="btn btn-default btn-primary" type="submit">button按钮</button>
  <input class="btn btn-default btn-success" type="button" value="input按钮">
  <input class="btn btn-default btn-info" type="submit" value="submit按钮">
</body>

以上内容给大家介绍了Bootstrap按钮相关知识，希望大家喜欢。

bootstrap改变按钮加载状态

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

提示框提示框的基本使用方式为: 复制代码代码如下: <span data-toggle="tooltip" data-original-title="this is alert content">test message</span> data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供HTML触发方式只能通过JS来进行触发: $("[dat
angularJS与bootstrap结合实现动态加载弹出提示内容

angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascr
BootStrap的alert提示框的关闭后再显示怎么解决

bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() { $parent .trigger('closed') .remove() } 理论上把.remove()改为.hide(),然后在需要重新显示的地方,加上$('#alert').show();就可以了. 但实际应用中,可以把 close button 的 data-dismiss 去掉,加上
bootstrap confirmation按钮提示组件使用详解

bootstrap-confirmation按钮提示组件,它类似于js里面confirm的功能,界面更加美观. 介绍这个组件之前,可以先来看看bootstrap里面提示框的效果: 1.源码地址 http://ethaizone.github.io/Bootstrap-Confirmation/ 2.效果展示 3.代码示例所需引入的js和css <link href="css/bootstrap.css" rel="external nofollow" rel
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实现提示框和弹出框效果

首先讲一讲提示框(Tooltip) 的使用方法样式文件: LESS版本:对应源文件 tooltips.less <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button&q
JS组件Bootstrap实现弹出框和提示框效果代码

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框
Bootstrap每天必学之工具提示（Tooltip）插件

当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js.或者,正如Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min
全面解析Bootstrap表单使用方法（表单按钮）

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

详解Bootstrap按钮

相关推荐

随机推荐