Home >Web Front-end >JS Tutorial >Detailed explanation of Bootstrap button_javascript skills

Detailed explanation of Bootstrap button_javascript skills

WBOYOriginal: 2016-05-16 15:22:141079browse

Description

The Bootstrap Button JavaScript plugin allows you to enhance the functionality of your buttons. You can control the state of buttons and create button groups for components, such as toolbars.

What is required

You must reference jquery.js and bootstrap-button.js - these two JavaScript files. They are all located inside the docs/assets/js folder.

How to use it

You can use the plugin just through markup without writing any JavaScript, or you can enable buttons through JavaScript.

Bootstrap provides some options to define the style of buttons, as shown in the following table:

The following styles can be used on 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8, or d5fd7aea971a85678ba271703566ebfd elements:

類別	描述
.btn	為按鈕新增基本樣式
.btn-default	預設/標準按鈕
.btn-primary	原始按鈕樣式（未操作）
.btn-success	表示成功的動作
.btn-info	此樣式可用於要彈出資訊的按鈕
.btn-warning	表示需要謹慎操作的按鈕
.btn-danger	表示一個危險動作的按鈕操作
.btn-link	讓按鈕看起來像連結 (仍然保留按鈕行為)
.btn-lg	製作一個大按鈕
.btn-sm	Make a small button
.btn-xs	Make a super small button
.btn-block	Block-level button (stretched to 100% of the width of the parent element)
.active	Button clicked
.disabled	Disable button

先看下不同顏色的按鈕：

<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按鈕相關知識，希望大家喜歡。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed example code explanation of javascript implementation of window jitter and qq window jitter_javascript skillsNext article：Detailed example code explanation of javascript implementation of window jitter and qq window jitter_javascript skills

See more

Detailed explanation of Bootstrap button_javascript skills

Related articles