2 flat logo on transparent 256
2018-10-23

Bootstrapでコンテンツを強調する|コピペで動くサンプル付き

Panel20181023

今回は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のモーダルを利用する

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

前の記事
次の記事