検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップ コンポーネントの使用方法

ブートストラップ コンポーネントの使用方法

(*-*)浩
(*-*)浩オリジナル
2019-07-19 11:54:143737ブラウズ

ブートストラップ コンポーネントの使用は非常に簡単で、対応するクラスを参照し、それを使用するように対応する HTML 要素を設定するだけです。

ブートストラップ コンポーネントの使用方法

例: フォント アイコン (推奨学習: Bootstrap ビデオ チュートリアル )

Bootstrap には、200 を超えるフォント形式のグリフがバンドルされています。

フォント アイコンを使用するには、次のコードを使用するだけです。フォントアイコンとテキストの間には適切なスペースを空けてください。 

<span class="glyphicon glyphicon-search"></span>

例: ドロップダウン メニューを使用するには、クラス .dropdown にドロップダウン メニューを追加するだけです。

次の例は、基本的なドロップダウン メニューを示しています。js サポートが必要です。 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</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="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップ コンポーネントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ブートストラップでパネルサイズを設定する方法次の記事：ブートストラップでパネルサイズを設定する方法

関連記事

続きを見る