Latest web development tutorials
×

Bootstrap コース

Bootstrap コース Bootstrap 簡単な紹介 Bootstrap 設置環境

Bootstrap CSS

Bootstrap CSS 概要 Bootstrap グリッド方式 Bootstrap 組版 Bootstrap コード Bootstrap テーブル Bootstrap フォーム Bootstrap プッシュボタン Bootstrap 絵 Bootstrap 補助クラス Bootstrap レスポンシブユーティリティ

Bootstrap レイアウトコンポーネント

Bootstrap フォントのアイコン Bootstrap ドロップダウンメニュー Bootstrap ボタングループ Bootstrap ボタンのドロップダウンメニュー Bootstrap 入力ボックスグループ Bootstrap ナビゲーション要素 Bootstrap ナビゲーションバー Bootstrap パン粉 Bootstrap ページング Bootstrap ラベル Bootstrap バッジ Bootstrap 大画面 Bootstrap ページタイトル Bootstrap サムネイル Bootstrap 警告 Bootstrap プログレスバー Bootstrap マルチメディアオブジェクト Bootstrap 一覧グループ Bootstrap パネル Bootstrap Wells

Bootstrap ウィジェット

Bootstrap プラグインの概要 Bootstrap 転移効果 Bootstrap モーダルボックス Bootstrap ドロップダウンメニュー Bootstrap スクロールモニター Bootstrap タブ Bootstrap ツールヒント Bootstrap ポップアップボックス Bootstrap 警告ボックス Bootstrap プッシュボタン Bootstrap 折り畳みます Bootstrap 回転木馬 Bootstrap 追加のナビゲーション

Bootstrap 他の

Bootstrap UI エディタ Bootstrap V2 コース Bootstrap HTML コーディング規約 Bootstrap CSS コーディング規約

マルチメディアオブジェクトのブートストラップ

この章では、ブートストラップマルチメディアオブジェクト(メディアオブジェクト)を説明します。 (例:ブログのコメント)コンポーネントの様々なタイプを作成するために使用されるこれらの抽象オブジェクトスタイル、我々は、コンポーネント内の写真・テキストを使用することができ、画像は詰め詰めまたは左右することができます。 メディアオブジェクトは、メディアがスクランブルオブジェクト少ないコードとテキストを用いて達成することができます。

軽量メディアオブジェクトにマーク特性が達成するために、簡単なタグのアプリケーションクラスを介して拡張が容易です。 あなたは、メディアオブジェクトを設定するには、HTMLタグ、次の2つのフォームを追加することができます。

  • .media:このクラスは、マルチメディアにおけるメディアオブジェクト(画像、ビデオ、オーディオ)が左または右のコンテンツブロックに浮かべできます。
  • .mediaリスト:あなたは様々な要素のリストは順不同リストの一部である必要がある場合は、クラスを使用することができます。コメントが一覧表示や記事のリストに使用することができます。

それでは、.mediaインスタンスのデフォルトのメディアオブジェクトに関する次の情報を見てみましょう:

<DIV クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "メディア オブジェクト"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV> </ DIV> <DIV クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "メディア オブジェクト"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 <DIV クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "メディア オブジェクト"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV> </ DIV> </ DIV> </ DIV>

»をお試しください

結果は以下の通りであります:

デフォルトのメディアオブジェクト

オブジェクト.mediaリストのメディアのリストの次の例を見てみましょう:

<UL クラス = "メディア・リスト」> <李 クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "一般的なプレースホルダ画像"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラス = "メディアの見出し"> メディアタイトル </ H4> <P> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ P> <! - ネストされたメディアオブジェクト - > <DIV クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "一般的なプレースホルダ画像"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラスは、= "メディアの見出し"> 見出しのネストされたメディア </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 <! - ネストされたメディアオブジェクト - > <DIV クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "一般的なプレースホルダ画像"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラスは、= "メディアの見出し"> 見出しのネストされたメディア </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV> </ DIV> </ DIV> </ DIV> <! - ネストされたメディアオブジェクト - > <DIV クラス = "メディア"> <A クラス = "プル左」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "一般的なプレースホルダ画像"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラスは、= "メディアの見出し"> 見出しのネストされたメディア </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV> </ DIV> </ DIV> </李> <李 クラス = "メディア"> <A クラス = "プルライト」 href = "#"> <IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg" ALT = "一般的なプレースホルダ画像"> </ A> <DIV クラス = "メディア・ボディ"> <H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV> </李> </ UL>

»をお試しください

結果は以下の通りであります:

メディアオブジェクトのリスト