ブートストラップ ヘルパー クラス
この章では、Bootstrap で役立ついくつかのヘルパー クラスについて説明します。
テキスト
次のさまざまなクラスでは、さまざまなテキストの色が表示されます。テキストがリンクの場合、マウスをその上に移動するとテキストが暗くなります:
| Class | Description | Instance |
|---|
| .text-muted | "text-muted" Text style of class | 試してみる |
| .text-primary | "text-primary"のテキストスタイル class | 試してみる |
| .text-success | "text-primary"のテキストスタイルsuccess" クラス | 試してみる |
| .text-info | "text-info" クラスのテキスト スタイル | 試してみる |
| .text-warning | "text" のテキスト スタイル-warning" クラス | 試してみる |
| .text-danger | 「text-danger」クラスのテキスト スタイル | 試してみる |
背景
以下のさまざまなクラスは、異なるものを示します背景色。 テキストがリンクの場合、テキスト上にマウスを移動するとテキストが暗くなります:
| Class | Description | Example |
|---|
| .bg-primary | テーブルのセルは「bg-primary」を使用しています" class | 試してみてください |
| .bg-success | 表のセルは「bg-success」クラスを使用しています | 試してみてください |
| .bg-info | 表のセルは「bg-success」を使用しています-info" クラス | 試してみる |
| .bg-warning | 表のセルは "bg-warning" クラスを使用します | 試してみる |
| .bg-danger | 表のセルは「bg-danger」クラス | ぜひ試してみてください |
その他
| クラス | 説明 | インスタンス |
|---|
| .pull-left | 要素は左に移動します | 試してみましょう |
| .pull-right | 要素は右側にフロートします | 試してみる |
| .center-block | 要素をdisplay:blockに設定して中央に配置する | 試してみる |
| .clearfix | floatをクリアする |
|
.show | 力表示する要素 | 試してみましょう |
.hidden | 要素を強制的に非表示にする | 試してみる |
.sr-only | スクリーンリーダー以外のデバイスで要素を非表示にする | 試してみる |
.sr-only-focusable | は、要素がフォーカスを取得したときに表示するために .sr-only クラスと組み合わせて使用されます (ユーザーがキーボードを操作している場合など) | 試してみましょう |
.text-hide| | ページ要素に含まれるテキストコンテンツを背景画像に置き換えます | お試しください |
.close | 閉じるボタンを表示 | お試しください |
.caret | ドロップダウン機能を表示 | お試しください |
その他の例
アイコンを閉じる
ユニバーサル閉じるアイコンを使用して、モーダル ボックスとアラート ボックスを閉じます。閉じるアイコンを取得するには、クラス close を使用します。
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - 閉じるアイコン</title>
<link rel="stylesheet" href="http:// apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery . min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></ script> ;
</head>
<body>
<p>アイコンインスタンスを閉じる
</button>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 关闭图标</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>关闭图标实例
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
</body>
</html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
Caret
<html>
<head> ;
< ;title>ブートストラップの例 - キャレット</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> ;
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http:// apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
</head>
<body>
<p>キャレットの例
< ;span class="caret"></span>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 插入符</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>插入符实例
<span class="caret"></span>
</p>
</body>
</html>
インスタンスを実行する»
クリック「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示しますクイックフロート
クラス pull-left または pull-right を使用して、要素をそれぞれ左または右にフロートさせることができます。次の例はこれを示しています。
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - 高速フローティング</title>
<link rel="stylesheet" href="http:// apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery . min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></ script> ;
</head>
<body>
<div class="pull-left">
素早く左に浮かせます
</div>
<div class="pull-right"> ;
すぐに右に移動します
</div>
</body>
</html>
インスタンス
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 快速浮动</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="pull-left">
向左快速浮动
</div>
<div class="pull-right">
向右快速浮动
</div>
</body>
</html>
「インスタンスを実行」をクリックします「アンス」ボタンオンラインで表示するには 例
ナビゲーション バーでコンポーネントを整列するには、代わりに .navbar-left または .navbar-right を使用します。 Bootstrap ナビゲーション バーを確認してください。
コンテンツの中央揃え
クラス center-block を使用して要素を中央に配置します。
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - 中央に配置されたコンテンツ ブロック</title>
<link rel="stylesheet" href="http:/// apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/ jquery .min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></ script>
</head>
<body>
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc ; ">
これはセンターブロックのインスタンスです
</div>
</div>
</body>
</html>
インスタンス
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 居中内容块</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">
这是 center-block 实例
</div>
</div>
</body>
</html>
「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します。
Float のクリア
要素の float をクリアする必要がある場合は、.clearfix クラスを使用してください。
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - フロートのクリア</title>
<link rel="stylesheet" href="http:// apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery . min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></ script> ;
</head>
<body>
<div class="clearfix" style="background: #D8D8D8;border: 1px Solid #000;padding: 10px;">
<div class = "pull-left" style="background:#58D3F7;">
素早く左にフロートします
</div>
<div class="pull-right" style="background: #DA81F5;">浮 すぐに右に移動
& lt;/div & gt;
& lt;/html & gt;
コンテンツの表示と非表示
クラス .show と .hidden を使用して、要素を強制的に表示または非表示にすることができます (スクリーン リーダー用を含む)。
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - コンテンツの表示と非表示</title>
<link rel="stylesheet" href="http: / /apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1 / jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">< /script>
</head>
<body>
<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style=" left -margin:10px;width:300px;background-color:#ccc;">
これは show クラスの例です
</div>
<div class="hidden" style="width:200px;background -color:#ccc;">
これは非表示クラスのインスタンスです
インスタンスを実行»
オンラインインスタンスを表示するには、「インスタンスを実行」ボタンをクリックしてください
スクリーン リーダー
クラス .sr-only を使用すると、スクリーン リーダーを除くすべてのデバイスから要素を非表示にすることができます。
<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - スクリーン リーダー</title>
<link rel="stylesheet" href="http://apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/ jquery. min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">< /script> ;
</head>
<body>
<div class="row" style="padding: 91px 100px 19px 50px;">
<form class="form-inline" role= "フォーム" & gt;
& lt; div class = "form-found" & gt;
& lt; label class = "sr-only" for = "email" & gt; メールアドレス & label & lt; UT TYPE = " email" class="form-control" placeholder="メールアドレスを入力">
</div>
<div class="form-group">
<label class="sr-only" for=" pass">パスワード</label>
" <input type="password" class="form-control" placeholder="パスワード">
</div>
</form>
</div> ;
</body>
</html>
インスタンス
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 清除浮动</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
向左快速浮动
</div>
<div class="pull-right" style="background: #DA81F5;">
向右快速浮动
</div>
</div>
</body>
</html>
インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
