bootstrap按钮button bootstrap按钮|Bootstrap教程

本文概述

Bootstrap按钮示例：指定七个样式
Boostrap按钮尺寸
Boostrap程序启用/禁用按钮
Boostrap程序块级别按钮
具有其他元素的按钮类
按钮轮廓/带边框的按钮

有7种样式可以在Bootstrap中添加按钮。使用以下类来实现不同的按钮样式：

.btn-默认
.btn基色
.btn佳绩
.btn-info
.btn预警
.btn，危害
.btn链接

Bootstrap按钮示例：指定七个样式

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body> < h1>Button Example!< /h1>< button class="btn btn-default">default< /button> < button class="btn btn-primary">primary< /button> < button class="btn btn-danger">danger< /button> < button class="btn btn-success">success< /button> < button class="btn btn-info">info< /button> < button class="btn btn-warning">warning< /button> < button class="btn btn-link">Link< /button>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R45563-1.jpg">< /script> < /body> < /html>

在Bootstrap 4中添加了3种新按钮，在Bootstrap 3中添加了7个按钮。这三个按钮是：

次要的
暗
光

以下类分别用于指定它们：

< button type="button" class="btn btn-secondary">Secondary< /button> < button type="button" class="btn btn-dark">Dark< /button> < button type="button" class="btn btn-light">Light< /button>

例：
让我们看看Bootstrap 4支持的所有按钮。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R46020-3.jpg">< /script> < script src="http://img.readke.com/220416/150R44911-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Button Styles< /h2> < button type="button" class="btn">Basic< /button> < button type="button" class="btn btn-primary">Primary< /button> < button type="button" class="btn btn-secondary">Secondary< /button> < button type="button" class="btn btn-success">Success< /button> < button type="button" class="btn btn-info">Info< /button> < button type="button" class="btn btn-warning">Warning< /button> < button type="button" class="btn btn-danger">Danger< /button> < button type="button" class="btn btn-dark">Dark< /button> < button type="button" class="btn btn-light">Light< /button> < button type="button" class="btn btn-link">Link< /button> < /div>< /body> < /html>

Boostrap按钮尺寸在Bootstrap中，你可以根据需要选择一个按钮。它提供四种按钮尺寸。
以下类定义了不同的大小：

.btn-lg
.btn-MD
.btn-SM
.btn-X

例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R43445-6.jpg">< /script> < /head> < body>< div class="container"> < h2>Button Sizes< /h2> < button type="button" class="btn btn-primary btn-lg">Large< /button> < button type="button" class="btn btn-primary btn-md">Medium< /button> < button type="button" class="btn btn-primary btn-sm">Small< /button> < button type="button" class="btn btn-primary btn-xs">XSmall< /button> < /div>< /body> < /html>

Boostrap程序启用/禁用按钮你可以将按钮设置为禁用或不可点击状态。
.active类用于使按钮显示为按下状态，而.disabled类用于使按钮不可单击：
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R43445-6.jpg">< /script> < /head> < body>< div class="container"> < h2>Button States< /h2> < button type="button" class="btn btn-primary">Primary Button< /button> < button type="button" class="btn btn-primary active">Active Primary< /button> < button type="button" class="btn btn-primary disabled">Disabled Primary< /button> < /div>< /body> < /html>

Boostrap程序块级别按钮块级按钮覆盖父元素的整个宽度。
.btn-block类用于创建块级别按钮：
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R43445-6.jpg">< /script> < /head> < body>< div class="container"> < h2>Block Level Buttons< /h2> < button type="button" class="btn btn-primary btn-block">Button 1< /button> < button type="button" class="btn btn-default btn-block">Button 2< /button>< h2>Large Block Level Buttons< /h2> < button type="button" class="btn btn-primary btn-lg btn-block">Button 1< /button> < button type="button" class="btn btn-default btn-lg btn-block">Button 2< /button>< h2>Small Block Level Buttons< /h2> < button type="button" class="btn btn-primary btn-sm btn-block">Button 1< /button> < button type="button" class="btn btn-default btn-sm btn-block">Button 2< /button> < /div>< /body> < /html>

具有其他元素的按钮类你可以将按钮类与其他标签（例如< a> ，< button> 或< input> 元素等）一起使用。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R46020-3.jpg">< /script> < script src="http://img.readke.com/220416/150R44911-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Button Classes with other Elements< /h2> < a href="http://www.srcmini.com/#" class="btn btn-info" role="button">Link Button< /a> < button type="button" class="btn btn-info">Button< /button> < input type="button" class="btn btn-info" value="http://www.srcmini.com/Input Button"> < input type="submit" class="btn btn-info" value="http://www.srcmini.com/Submit Button"> < /div>< /body> < /html>

按钮轮廓/带边框的按钮【bootstrap按钮button】Bootstrap 4提供了八个轮廓/边框按钮：
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/150R46020-3.jpg">< /script> < script src="http://img.readke.com/220416/150R44911-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Button Outline/ Bordered Buttons< /h2> < button type="button" class="btn btn-outline-primary">Primary< /button> < button type="button" class="btn btn-outline-secondary">Secondary< /button> < button type="button" class="btn btn-outline-success">Success< /button> < button type="button" class="btn btn-outline-info">Info< /button> < button type="button" class="btn btn-outline-warning">Warning< /button> < button type="button" class="btn btn-outline-danger">Danger< /button> < button type="button" class="btn btn-outline-dark">Dark< /button> < button type="button" class="btn btn-outline-light text-dark">Light< /button> < /div>< /body> < /html>