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

Bootstrap4 Grund教程

Bootstrap4 Button

Der Button ist ein Bestandteil von Websites und Anwendungen. Sie werden für verschiedene Zwecke verwendet, z.B. das Einreichen oder Zurücksetzen von HTML-Formularen, die Ausführung interaktiver Aktionen, wie z.B. das Klicken auf einen Button, um bestimmte Inhalte auf der Webseite anzuzeigen oder zu verbergen, den Benutzer auf eine andere Seite zu leiten, und vieles mehr. Bootstrap bietet eine schnelle und einfache Methode, um Buttons zu erstellen und anzupassen.

Bootstrap 4 bietet verschiedene Stile von Schaltflächen.

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>按钮样式</h2>
　　<button type="button" class="btn">基本按钮</button>
　　<button　type="button"　class="btn　btn-primary">Hauptknopf</button>
　　<button　type="button"　class="btn　btn-secondary">次要按钮</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-dark">黑色</button>
　　<button　type="button"　class="btn　btn-light">浅色</button>
　　<button　type="button"　class="btn　btn-link">链接</button>　　　　　　
</div>
</body>
</html>
Testen Sie es heraus ‹/›

按钮类可用于 <a>, <button>, 或 <input> 元素上:

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>按钮元素</h2>
　　<a　href="#"　class="btn　btn-info" role="button">链接按钮</a>
　　<button　type="button"　class="btn　btn-info">按钮</button>
　　<input type="button" class="btn btn-info" value="输入框按钮">
　　<input type="submit" class="btn btn-info" value="提交按钮">　
</div>
</body>
</html>
Testen Sie es heraus ‹/›

按钮设置边框

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>按钮设置边框</h2>
　　<button　type="button"　class="btn　btn-outline-primary">Hauptknopf</button>
　　<button　type="button"　class="btn　btn-outline-secondary">次要按钮</button>
　　<button　type="button"　class="btn　btn-outline-success">成功</button>
　　<button　type="button"　class="btn　btn-outline-info">信息</button>
　　<button　type="button"　class="btn　btn-outline-warning">警告</button>
　　<button　type="button"　class="btn　btn-outline-danger">危险</button>
　　<button　type="button"　class="btn　btn-outline-dark">黑色</button>
　　<button　type="button"　class="btn　btn-outline-light text-dark">浅色</button>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

不同大小的按钮

Bootstrap 4 可以设置按钮的大小：

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>不同大小的按钮</h2>
　　<button　type="button"　class="btn　btn-primary btn-lg">大号按钮</button>
　　<button　type="button"　class="btn　btn-primary">默认按钮</button>
　　<button　type="button"　class="btn　btn-primary btn-sm">小号按钮</button>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

块级按钮

通过添加 .btn-block 类可以设置块级按钮：

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>块级按钮</h2>
　　<button　type="button"　class="btn　btn-primary btn-block">按钮　1</button>
　　<button　type="button"　class="btn　btn-default btn-block">按钮　2</button>
　　<h2>大的块级按钮</h2>
　　<button　type="button"　class="btn　btn-primary btn-lg btn-block">按钮　1</button>
　　<button　type="button"　class="btn　btn-default btn-lg btn-block">按钮　2</button>
　　<h2>小的块级按钮</h2>
　　<button　type="button"　class="btn　btn-primary btn-sm btn-block">按钮　1</button>
　　<button　type="button"　class="btn　btn-default btn-sm btn-block">按钮　2</button>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Knopfaren</h2>
　　<button　type="button"　class="btn　btn-primary">Hauptknopf</button>
　　<button　type="button"　class="btn　btn-primary　active">Klickte Schaltfläche</button>
　　<button　type="button"　class="btn　btn-primary"　disabled>Klicken verboten</button>
　　<a　href="#"　class="btn　btn-primary　disabled">Klicken verboten</a>
</div>
</body>
</html>
Testen Sie es heraus ‹/›
Bootstrap4 SchaltflächengruppeBootstrap4 Infobalken