bootstrap-圖文混排 media

標籤：java   bootstrap   ima   ddl   color   效果   body   圖文混排   href   

<!--     media                              圖文混排    media-left(right)                圖片的地區 在左邊顯示(右邊)    media-body                        內容地區    media-heading                    內容地區裡的標題    media-middle                    圖片置中    media-bottom                    圖片居下--><div class="container">    <div class="row" style="width:500px">        <div class="media">            <a href="#" class="media-left media-middle media-bottom">                <img src="user_photo.png" width="100"/>            </a>            <div class="media-body">                <h4 class="media-heading">java學院</h4>                <p>javajavajavajavajavajavajavajavajava                    javajavajavajavajavajavajavajavajava                </p>            </div>        </div>    </div>    <!-- 圖片在右邊顯示-->    <div class="row" style="width:500px">        <div class="media">            <div class="media-body">                <h4 class="media-heading">java學院</h4>                <p>javajavajavajavajavajavajavajavajava                    javajavajavajavajavajavajavajavajava                </p>            </div>            <a href="#" class="media-right">                <img src="user_photo.png" width="100"/>            </a>        </div>    </div>    <!-- 左右都有圖片-->    <div class="row" style="width:500px">        <div class="media">            <a href="#" class="media-left">                <img src="user_photo.png" width="100"/>            </a>            <div class="media-body">                <h4 class="media-heading">java學院</h4>                <p>javajavajavajavajavajavajavajavajava                    javajavajavajavajavajavajavajavajava                </p>            </div>            <a href="#" class="media-right">                <img src="user_photo.png" width="100"/>            </a>        </div>    </div>    <!-- 類似留言引用 右側內容又嵌套了一個media-->    <div class="row" style="width:500px">        <div class="media">            <a href="#" class="media-left">                <img src="user_photo.png" width="100"/>            </a>            <div class="media-body">                <h4 class="media-heading">java學院</h4>                <p>javajavajavajavajavajavajavajavajava                    javajavajavajavajavajavajavajavajava                </p>                <div class="media">                    <a href="#" class="media-left">                        <img src="user_photo.png" width="100"/>                    </a>                    <div class="media-body">                        <h4 class="media-heading">java學院</h4>                        <p>javajavajavajavajavajavajavajavajava                            javajavajavajavajavajavajavajavajava                        </p>                    </div>                </div>            </div>        </div>    </div></div>

效果：

bootstrap-圖文混排 media