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

Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrap 助手クラス

この章では、Bootstrapで役立つ可能性のある補助クラスについて議論します。

テキスト

以下の異なるクラスは異なるテキスト色を示しています。テキストがリンクの場合、マウスをテキストに合わせると暗くなります：

类描述サンプル
.text-muted"text-muted" クラスのテキストスタイル尝试一下
.text-primary"text-primary" クラスのテキストスタイル尝试一下
.text-success"text-success" クラスのテキストスタイル尝试一下
.text-info"text-info" クラスのテキストスタイル尝试一下
.text-warning"text-warning" クラスのテキストスタイル尝试一下
.text-danger"text-danger" クラスのテキストスタイル尝试一下

背景

以下の異なるクラスは異なる背景色を示しています。テキストがリンクの場合、マウスをテキストに合わせると暗くなります：

类描述サンプル
.bg-primary表格单元格使用了 "bg-primary" クラス尝试一下
.bg-success表格单元格使用了 "bg-success" クラス尝试一下
.bg-info表格单元格使用了 "bg-info" クラス尝试一下
.bg-warning表格单元格使用了 "bg-warning" クラス尝试一下
.bg-danger表格单元格使用了 "bg-danger" 类尝试一下

其他

类描述サンプル
.pull-left元素浮动到左边尝试一下
.pull-right元素浮动到右边尝试一下
.center-块设置元素为 display:block 并居中显示尝试一下
.clearfix清除浮动尝试一下
.show强制元素显示尝试一下
.hidden强制元素隐藏尝试一下
.sr-only除了屏幕阅读器外，其他设备上隐藏元素尝试一下
.sr-only-focusable与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)尝试一下
.text-hide将页面元素所包含的文本内容替换为背景图尝试一下
.close显示关闭按钮尝试一下
.caret显示下拉式功能尝试一下

更多示例

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　关闭图标</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="close" aria-hidden="true">×</button>
</p>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

aria-hidden="true" 主要是为了帮助残障人士（如失明）使用识读设备（自动读取内容并自动播放出来），播放到带此属性的内容时会自动跳过，以免残障人士混淆！

插入符

使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　插入符</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>插入符示例
	<span class="caret"></span>
</p>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

快速浮动

您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。下面的示例演示了这点。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　快速浮动</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="pull-left">
	左に速く浮動
</div>
<div　class="pull-right">
	右に速く浮動
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

要对齐导航栏中的组件，请使用 .navbar-left 或 .navbar-right 代替。请查看 Bootstrap ナビゲーションバー。

内容居中。

使用 class center-块 来居中元素。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　居中内容块</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="row">
	<div class="center-块" style="宽度:200px;background-color:#ccc;">
		这是 center-块示例
　　　	</div>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

清除浮动

要清除元素的浮动，请使用 .clearfix class。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　清除浮动</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="clearfix" style="背景: #D8D8D8; 边框:　1px 固定 #000; 填充:　10px;">
	<div　class="pull-left"　style="background:#58D3F7">
　　　　　　	左に速く浮動
　　　	</div>
　　　	<div　class="pull-right"　style="background:　#DA81F5">
　　　　　　	右に速く浮動
　　　	</div>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

コンテンツの表示と非表示

クラスを使用して .show および .hidden スクリーンリーダーを含めた要素の強制的な表示や非表示を設定します。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　コンテンツの表示と非表示</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="row"　style="padding:　91px　100px　19px　50px;">
	<div　class="show"　style="margin-left:10px;width:300px;background-color:#ccc;">
　　　　　　	これは　show　クラスの例です
　　　	</div>
　　　	<div　class="hidden"　style="width:200px;background-color:#ccc;">
　　　　　　	これは　hide　クラスの例です
　　　	</div>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

スクリーンリーダー

クラスを使用して .sr-only スクリーンリーダー以外のすべてのデバイスに要素を隠します。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　スクリーンリーダー</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="row"　style="padding:　91px　100px　19px　50px;">
	<form　class="form-inline"　role="form">
		<div　class="form-group">
			<label　class="sr-only"　for="email">メール　アドレス</label>
			<input　type="email"　class="form-control"　placeholder="Enter　email">
		</div>
		<div　class="form-group">
			<label　class="sr-only"　for="pass">パスワード</label>
			<input　type="password"　class="form-control"　placeholder="Password">
		</div>
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

ここでは、両方の input タイプの label タグに class が設定されていることを見ています sr-only、そのためタグはスクリーンリーダーにのみ表示されます。

Bootstrap レスポンシブユーティリティBootstrap 画像