English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基础教程

Bootstrap 插件

Bootstrap-Schaltfläche

本章将通过示例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

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

类描述Beispiel
.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禁用按钮尝试一下

下面的示例演示了上面所有的按钮class：

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　按钮选项</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--　标准的按钮　-->
<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>
Testen Sie es heraus ‹/›

Ergebnis wie folgt:

按钮大小

下表列出了获得各种大小按钮的class：

Klasse描述
.btn-lg这会让按钮看起来比较大。
.btn-sm这会让按钮看起来比较小。
.btn-xs这会让按钮看起来特别小。
.btn-block这会创建块级的按钮，会横跨父元素的全部宽度。

下面的示例演示了上面所有的按钮class：

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　按钮大小</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
　　　<button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary">默认大小的原始按钮</button>
　　　<button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
　　　<button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
　　　<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg　btn-block">块级的原始按钮</button>
　　　<button type="button" class="btn btn-default btn-lg　btn-block">块级的按钮</button>
</p>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt:

按钮状态

Bootstrap提供了激活、禁用等按钮状态的class，下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了使按钮元素和锚元素呈激活状态的class：

ElementKlasse
SchaltflächenelementHinzufügen .active 使用class来显示它是激活的。
Anker-ElementHinzufügen .active 使用class到<a>按钮来显示它是激活的。

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Aktivierter Schaltflächenstatus</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
	<button type="button" class="btn btn-default btn-lg">Standardtaste</button>
　　　	<button type="button" class="btn btn-default btn-lg active">Aktivierte Taste</button>
</p>
<p>
　　　	<button type="button" class="btn btn-primary btn-lg">Originaltaste</button>
　　　	<button type="button" class="btn btn-primary btn-lg active">Originaltaste aktiviert</button>
</p>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt:

Deaktivierter Zustand

Wenn Sie eine Schaltfläche deaktivieren, wird ihre Farbe abgedunkelt 50%, und verliert den Farbverlauf.

Die folgende Tabelle zeigt die Klassen, die das Schaltflächenelement und das Anker-Element in einen deaktivierten Zustand versetzen:

ElementKlasse
SchaltflächenelementHinzufügen disabled Eigenschaft bis zum <button>-Schaltfläche.
Anker-ElementHinzufügen disabled class bis zum <a>-Schaltfläche.

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Deaktivierter Schaltflächenstatus</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-default btn-lg">Standardtaste</button>
　　　<button type="button" class="btn btn-default btn-lg" disabled="disabled">Deaktivierte Taste</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">Originaltaste</button>
　　　<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Originaltaste deaktiviert</button>
</p>
<p>
　　　<a href="#" class="btn btn-default btn-lg" role="button">Verknüpfung</a>
　　　<a href="#" class="btn btn-default btn-lg disabled" role="button">Deaktivierte Verknüpfung</a>
</p>
<p>
　　　<a href="#" class="btn btn-primary btn-lg" role="button">Originalverknüpfung</a>
　　　<a href="#" class="btn btn-primary btn-lg disabled" role="button">Originalverknüpfung deaktiviert</a>
</p>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt:

Schaltflächenschild

Sie können die Button-Klasse auf den <a>-, <button>- oder <input>-Elementen verwenden. Es wird jedoch empfohlen, die Button-Klasse auf dem <button>-Element zu verwenden, um Probleme mit der Cross-Browser-Konsistenz zu vermeiden.

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Schaltflächenschild/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-default" href="#" role="button">Verknüpfung</a>
<button class="btn btn-default" type="submit">Schaltfläche</button>
<input class="btn btn-default" type="button" value="Eingabe">
<input class="btn btn-default" type="submit" value="Einsenden">
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt:

Schaltflächengruppe

Verwenden Sie .btn direkt im div-group kann Schaltflächengruppen erstellen:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Schaltfläche(Button) Einzelschaltfläche</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Schaltflächengruppe</h2>
　　<p>.btn-group-Klasse, um Schaltflächengruppen zu erstellen:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Verwenden Sie .btn-group-lg|sm|xs, um die Größe der Schaltflächengruppe zu steuern:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Schaltflächengruppe</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Button-Schaltflächengruppe　-　Schaltflächengröße einstellen</h2>
　　<p>Mit .btn-group-*　Klasse, um die Größe der Schaltflächen in der Schaltflächengruppe zu steuern.</p>
　　<h2>Großer Button:</h2>
　　<div class="btn-group btn-group-lg">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Standardgröße Button:</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Kleiner Button:</h2>
　　<div class="btn-group btn-group-sm">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2sm">/h2>
　　<div class="btn-group btn-group->Superkleine Knöpfe:<
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

xs">-group-Wenn Sie vertikale Knöpfe einrichten möchten, können Sie .btn

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Knopf</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2vertikal"-Klasse zur Einbindung:/h2>
　　>Vertikale Knopfgruppe<-group-<p>Wenn Sie vertikale Knöpfe einrichten möchten, können Sie .btn/p>
　　<div class="btn-group-vertikal"-Klasse, um zu konfigurieren:<
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

vertikal">

anpassbare Größe-group-können durch .btn

justified"-Klasse, um anpassbare Knopfgruppen zu erstellen.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Knopf</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Anpassbare Knopfgruppe</h2>
　　<p>Knopfgruppen können durch .btn-group-justified"-Klasse, um anpassbare Knopfgruppen zu erstellen.</p>
　　<div class="btn-group btn-group-justified">
　　　　<a href="#" class="btn btn-primary">Apple</a>
　　　　<a href="#" class="btn btn-primary">Samsung</a>
　　　　<a href="#" class="btn btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Beachten Sie: Wenn es sich um ein <button>-Element handelt, müssen Sie eine .btn-group-Klasse zur Einbindung:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Knopf</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Anpassbare Knopfgruppe</h2>
　　<div class="btn-group btn-group-justified">
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Integrierte Dropdown-Knopfgruppe

Knopfgruppen können Dropdown-Menüs enthalten, wie im folgenden Beispiel gezeigt:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Knopf</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Integrierte Knopfgruppe</h2>
　　<p>Integrierte Knopfgruppe zum Erstellen eines Dropdown-Menüs:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Sony <span class="caret"></span></button>
　　　　　　<ul　class="dropdown-menu"　role="menu">
　　　　　　　　<li><a　href="#">Tablet</a></li>
　　　　　　　　<li><a　href="#">Smartphone</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Trennknopf

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Knopf</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Trennknopf</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<ul　class="dropdown-menu"　role="menu">
　　　　　　<li><a　href="#">Tablet</a></li>
　　　　　　<li><a　href="#">Smartphone</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›
Bootstrap-BildBootstrap-Formular