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

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

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

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>

ログイン後にコピー

効果:

このウェブサイトの声明

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