[Bootstrap] Phần 22: Các đối tượng Media

155 lượt xem

Trong bài này, chúng ta sẽ tìm hiểu cách tạo các đối tượng media trong Bootstrap để thực hiện việc canh chỉnh nội dung trong ở blog hay các mạng xã hội.

Đối tượng media
Bootstrap cung cấp 1 cách rất dễ tạo canh chỉnh các đối tượng media (như hình ảnh hoặc video) ở phía trái hoặc phải của phần nội dung nào đó. Việc này có thể dùng để hiển thị nội dung ở blog, bình luận, .. vân vân.
media_object_bootstrap

<div class="container">
  <!-- Left-aligned -->
<div class="media">
  <div class="media-left">
    <img src="flower_media.jpg" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Dammio.com</h4>
    <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
  </div>
</div>

<!-- Right-aligned -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Dammio.com</h4>
    <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
  </div>
  <div class="media-right">
    <img src="flower_media.jpg" class="media-object" style="width:60px">
  </div>
</div>
</div>

Đầu tiên, chúng ta dùng 1 phần tử div với lớp .media để tạo 1 vùng chứa cho các đối tượng media. Sau đó, dùng lớp .media-left để canh chỉnh đối tượng media nào đó ở phía bên trái, và lớp .media-right để canh chỉnh ở phía bên phải. Văn bản xuất hiện bên cạnh 1 hình ảnh được đặt trong 1 vùng chứa với class=”media-body”. Ngoài ra, bạn có thể dùng lớp .media-heading để định nghĩa tiêu đề.

Canh chỉnh theo vị trí trên cùng (top), giữa (middle), và cuối cùng (bottom)
Đối tượng media cũng có thể canh chỉnh ở vị trí top, middle hay bottom bằng cách sử dụng các lớp .media-top, .media-middle hay .media-bottom.
top_bottom_middle_media_bootstrap

<div class="container">
 <!-- Media top -->
<div class="media">
  <div class="media-left media-top">
    <img src="flower_media.jpg" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Dammio.com</h4>
    <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
	<p>Website học tiếng Anh và lập trình, thiết kế Web</p>
	<p>Website học tiếng Anh và lập trình, thiết kế Web</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <div class="media-left media-middle">
    <img src="flower_media.jpg" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Dammio.com</h4>
    <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
	<p>Website học tiếng Anh và lập trình, thiết kế Web</p>
	<p>Website học tiếng Anh và lập trình, thiết kế Web</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="flower_media.jpg" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Dammio.com</h4>
    <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
	<p>Website học tiếng Anh và lập trình, thiết kế Web</p>
	<p>Website học tiếng Anh và lập trình, thiết kế Web</p>
  </div>
</div>
</div>

Đối tượng media phân cấp
Các đối tượng media cũng có thể phân cấp (1 đối tượng bên trong 1 đối tượng khác).
nesting_media_object

<div class="container">
  <h3>Đối tượng media phân cấp (lồng nhau) - dammio.com</h3>
  
  <div class="media">
    <div class="media-left">
      <img src="flower_media.jpg" class="media-object" style="width:45px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Dammio.com <small><i>Đăng ngày 31/10/2016</i></small></h4>
      <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
      
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <img src="flower_media.jpg" class="media-object" style="width:45px">
        </div>
        <div class="media-body">
          <h4 class="media-heading">Dammio.com <small><i>Đăng ngày 31/10/2016</i></small></h4>
          <p>Website học tiếng Anh và lập trình, thiết kế Web</p>

          <!-- Nested media object -->
          <div class="media">
            <div class="media-left">
              <img src="flower_media.jpg" class="media-object" style="width:45px">
            </div>
            <div class="media-body">
              <h4 class="media-heading">Dammio.com <small><i>Đăng ngày 31/10/2016</i></small></h4>
              <p>Website học tiếng Anh và lập trình, thiết kế Web</p>
            </div>
          </div>
        
        </div>
      </div>
      
    </div>
  </div>
</div>

Kết luận: bài viết giúp các bạn tạo được các đối tượng media trong Bootstrap thông qua việc sử dụng các lớp có sẵn. Bạn có thể tạo đối tượng media bằng nhiều phương pháp, tuy nhiên việc dùng Bootstrap giúp tạo các đối tượng dễ dàng hơn và hơn nữa giúp các search engine có thể tìm kiếm và nhận biết được thông tin nội dung trang web của bạn. Từ đó, giúp ích cho việc SEO website.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz