Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Scrollspy Và Media Object Trong Bootstrap (Phần 13)

Component Scrollspy Và Media Object Trong Bootstrap (Phần 13)


Ngày 4 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component scrollspy và media object trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Scrollspy:

Scrollspy giúp chúng ta tự động cập nhật đường dẫn trên thanh navbar dựa vào vị trí của thanh cuộn(scroll) trong trang web. Cái này rất thích hợp cho trang có nội dung lớn giúp người dùng có thể xác định vị trí của mình bằng đường dẫn được sử dụng class active trên thanh điều hướng. Trước khi đi vào cụ thể mình muốn các bạn xem ví dụ dưới đây để có thể hiểu rõ hơn chức năng của nó:

Component Scrollspy:

See the Pen component Scrollspy by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn phải chuyển sang chế độ screen 0.5x, 0.25x thì mới thấy kết quả được nhé. Bây giờ mình sẽ giải thích đoạn code trên một tí nha:

  • Đầu tiên ta sẽ thêm thuộc tính data-spy="scroll" vào trong đối tượng HTML mà mình muốn để xác định khu vực scroll. Thông thường là sẽ sử dụng cho thẻ body nhé.
  • Tiếp theo là thêm thuộc tính data-target với giá trị id hoặc class của component navbar để chắc chắn rằng là nó đã liên kết khu vực scroll. Nghĩa là các đường dẫn con trong navbar có thể tương tác theo vị trí của thanh cuộn trong thẻ body. Như ví dụ trên mình đặt thuộc tính này theo class là data-target=".navbar".
  • Thẻ div chứa nội dung muốn tạo hiệu ứng của bạn phải có id trùng khớp với id của thẻ a trên thanh navbar ví dụ ở trên là <div id="section1"> phải khớp với <a href="#section1">.
  • Thuộc tính data-offset dùng để xác định số pixels cộng thêm khi tính toán vị trí của thanh cuộn(scroll).
  • Đối với bất cứ đối tượng nào mà bạn sử dụng data-spy="scroll" thì phải thiết lập lập thuộc tính CSS: position:relative nhé.

Bây giờ mình sẽ đi vào kết hợp component Scrollspy với component List Group. Để Hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Component Scrollspy Và List-Group:

See the Pen List Group And Scrollspy by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn nhớ chuyển sang chế độ screen 0.5x, 0.25x trên Codepen để thấy kết quả nhé.

Component Media Object:

Component Media Object là component giúp chúng ta có thể canh chỉnh vị trí của những media object (như hình ảnh, video) với nội dung trong trang web như là comment trong FaceBook, miêu tả thông tin thêm về hình ảnh, video... Để tạo được media object thì ta cần tạo một thẻ div với class media và trong nó sẽ là hình ảnh hoặc video với nội dung được chứa bởi thẻ div với class media-body.

Component Media Object:

See the Pen Media Object Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo mình sẽ đi vào cách lồng hai component Media Object lại với nhau bằng cách thêm một Media Object con vào trong thẻ div với class media-body của Component Media Obect cha. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Lồng Hai Component Media Object:

See the Pen Nesting 2 Media Object by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ mình sẽ hướng dẫn bạn cách đưa hình ảnh hay video nằm bên phải so với nội dung trong component Media Object. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Hình Ảnh Nằm Bên Phải Media Object:

See the Pen Right Media Object by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra bạn cũng có thể chỉnh vị trí của hình ảnh hay video so với nội dung trong Media Object bằng class align-self-start nằm ở phía trên, align-self-center nằm ở chính giữa và align-self-end nằm ở phía dưới component này. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

Vị Trí Hình Ảnh Trong Media Object:

See the Pen Position Of Media Object by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ hơn bạn chuyển sang chế độ screen 0.5x, 0.25x trong Codepen nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!