BootStrap 学習 (5)_マルチメディアオブジェクトとリストグループ_html/css

BootStrap 学習 (5)_マルチメディアオブジェクトとリストグループ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:34:00

オリジナル

1332 人が閲覧しました

1. マルチメディアオブジェクト

これらの抽象オブジェクトスタイルは、さまざまな種類のコンポーネント (ブログコメントなど) を作成するために使用され、コンポーネント内でグラフィックとテキストを混合して使用でき、画像は左揃えまたは右揃えにすることができます。メディアオブジェクトを使用すると、少ないコードでメディアオブジェクトとテキストを混合できます。

.media: このクラスを使用すると、メディアオブジェクト内のマルチメディア (画像、ビデオ、オーディオ) をコンテンツブロックの左側または右側にフロートさせることができます。

.media-list: 各項目が順序なしリストの一部であるリストが必要な場合は、このクラスを使用できます。コメントリストや記事リストなどに利用できます。

1. 基本的なマルチメディアオブジェクト

効果:

2. ネストされたメディアオブジェクト

効果:

2. リストグループ

リストコンポーネントは、複雑でカスタマイズされたコンテンツをリストの形式で表示するために使用されます

クラス

.list-group

を要素

を
に追加します。バッジコンポーネントをリスト項目に追加すると、自動的に右側に配置されます。
要素に

を追加するだけです1. 基本リストグループ

効果:

2.リストグループへのリンクの追加

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>    <style type="text/css">        .media-object {        width:60px;        height:60px;        }    </style></head><body>    <div class="media">   <a class="pull-left" href="#">      <img class="media-object" src="../Imgs/img1/1.jpg"       alt="媒体对象"/>   </a>   <div class="media-body">      <h4 class="media-heading">企鹅-标题</h4>      这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     </div></div><div class="media">   <a class="pull-left" href="#">     <img class="media-object" src="../Imgs/img1/1.jpg"       alt="媒体对象"/>   </a>   <div class="media-body">      <h4 class="media-heading">企鹅</h4>      这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     </div></div></body></html>

ログイン後にコピー

効果:

3. コンテンツのカスタマイズ

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>    <style type="text/css">        .media-object {            width: 30px;            height: 30px;        }    </style></head><body>    <div class="media">        <a class="pull-left" href="#">            <img class="media-object" src="../Imgs/img1/1.jpg"                alt="媒体对象" />        </a>        <div class="media-body">            <h4 class="media-heading"><a href="#">用户1</a></h4>            今天的天气真好，空气清新，阳光明媚。       <div class="media">           <a class="pull-left" href="#">               <img class="media-object" src="../Imgs/img1/1.jpg"                   alt="媒体对象" />           </a>           <div class="media-body">               <span class="media-heading"><a href="#">用户1:</a></span>               是啊，天气真好。           </div>       </div>            <div class="media">                <a class="pull-left" href="#">                    <img class="media-object" src="../Imgs/img1/1.jpg"                        alt="媒体对象" />                </a>                <div class="media-body">                    <span class="media-heading"><a href="#">企鹅3:</a></span>                    嗯嗯，是的呢。                 </div>            </div>        </div>    </div></body></html>

ログイン後にコピー

効果: