2018-10-23
Bootstrapでコンテンツを強調する|コピペで動くサンプル付き
今回はBootstrapのパネルクラスを利用して、一部コンテンツを強調して表示する方法を記載します。
サンプル画像は以下です。 以下の様に色によっての強調表示も可能です。
Bootstrapパネルクラスのサンプルコード
以下コードをメモ帳などに貼り付けコピペすれば確認できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ドロップダウンボタンのテストページ</title> <!--CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <!--JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <div class="panel panel-default"> <div class="panel-body">ベーシックパネル</div> </div> <!--以下通常のからパネル--> <div class="panel panel-default"> <div class="panel-heading">標準のパネルヘッダー</div> <div class="panel-body">標準のパネルコンテンツ</div> </div> <div class="panel panel-info"> <div class="panel-heading">水色のパネルヘッダー</div> <div class="panel-body">水色のパネルコンテンツ</div> </div> <div class="panel panel-primary"> <div class="panel-heading">青色のパネルヘッダー</div> <div class="panel-body">青色のパネルコンテンツ</div> </div> <div class="panel panel-success"> <div class="panel-heading">緑色のパネルヘッダー</div> <div class="panel-body">緑色のパネルコンテンツ</div> </div> <div class="panel panel-warning"> <div class="panel-heading">黄色のパネルヘッダー</div> <div class="panel-body">黄色のパネルコンテンツ</div> </div> <div class="panel panel-danger"> <div class="panel-heading">赤色のパネルヘッダー</div> <div class="panel-body">赤色のパネルコンテンツ</div> </div> </html>
簡単なコード解説
基本はpanel panel-〇〇でdivクラスを囲み 配下のpanel-headingでヘッダーの指定、panel-bodyでbody要素の指定が可能です。
<div class="panel panel-primary"> <div class="panel-heading">青色のパネルヘッダー</div> <div class="panel-body">青色のパネルコンテンツ</div> </div>
なおヘッダーとフッターが必要なく、コンテンツ部分だけを強調したい場合は以下で対応可能です。
<div class="panel panel-default"> <div class="panel-body">コンテンツのみ枠線で強調</div> </div>
その他関連記事
Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き
Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き
Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き
LocalStorageとBootstrapのモーダルを利用する
前の記事
次の記事
