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

Bootstrap4 基本チュートリアル

Bootstrap4 ボタン

ボタンはウェブサイトやアプリケーションの構成部分です。様々な目的に使用されます、例えばHTMLフォームの提出やリセット、インタラクションの実行、例えばボタンをクリックするとウェブページ上で特定のコンテンツを表示したり非表示にしたり、ユーザーを別のページにリダイレクトしたりなど、Bootstrapはボタンの作成とカスタマイズを簡単にする方法を提供しています。

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">基本的なボタン</button>
　　<button　type="button"　class="btn　btn-primary">メインボタン</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>
テストを見て‹/›

ボタンクラスは <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>
テストを見て‹/›

ボタンの枠線設定

!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">メインボタン</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>
テストを見て‹/›

異なるサイズのボタン

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>
テストを見て‹/›

ブロックボタン

さらに .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>
テストを見て‹/›

活性化および非活性のボタン

ボタンは活性化またはクリック不可の状態に設定できます。

.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>ボタンの状態</h2>
　　<button　type="button"　class="btn　btn-primary">メインボタン</button>
　　<button　type="button"　class="btn　btn-primary　active">クリックしたボタン</button>
　　<button　type="button"　class="btn　btn-primary"　disabled>クリックできないボタン</button>
　　<a　href="#"　class="btn　btn-primary　disabled">クリックできないリンク</a>
</div>
</body>
</html>
テストを見て‹/›
Bootstrap4 ボタングループBootstrap4 メッセージボックス