Jumbotron trong Bootstrap, hiển thị nội dung trên web

Trong bài học trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về Spinner trong Bootstrap, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Jumbotron trong Bootstrap.

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu về Jumbotron trong Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác đã có trên Taimienphi.vn để tìm hiểu thêm về Badge trong Bootstrap.

jumbotron trong bootstrap

Tìm hiểu về Jumbotron trong Bootstrap

1. Hiển thị nội dung trang web với Jumbotron

Jumbotron trong Bootstrap là một cách tuyệt vời để hiển thị các nội dung hoặc thông tin chính trên trang web. Chúng ta chỉ cần gói các nội dung nổi bật, chẳng hạn như tiêu đề, mô tả, ... trong phần tử div và áp dụng lớp .jumbotron trên đó.

Ví dụ: Ví dụ dưới đây minh họa cách hiển thị nội dung trang web với Jumbotron trong Bootstrap:

jumbotron trong bootstrap 2

Kết quả đầu ra có dạng như dưới đây:

jumbotron trong bootstrap 3

2. Tạo trang web phủ toàn bộ viewport

Để tạo Jumbotron không có các góc bo tròn, phủ toàn bộ chiều rộng Viewport, chúng ta chỉ cần đặt Jumbotron bên ngoài tất cả các phần tử chứa, thêm lớp sửa đổi .jumbotron-fluid trên đó, và thêm lớp .container hoặc lớp .container-fluid trong đó, tham khảo ví dụ dưới đây:

jumbotron trong bootstrap 4

Kết quả đầu ra có dạng như dưới đây:

jumbotron trong bootstrap 5

Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về Jumbotron trong Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách tạo thanh điều hướng trong Bootstrap nhé.

https://thuthuat.taimienphi.vn/jumbotron-trong-bootstrap-51212n.aspx
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về các lớp Helper trong Bootstrap.

Tác giả: Duy Vinh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

List Group trong Bootstrap, tác dụng và cách tạo
Typography trong Bootstrap, khái niệm và cách sử dụng
Tạo danh sách bằng Bootstrap như thế nào?
Hằng và cách sử dụng hằng trong C#
Card trong Bootstrap, khái niệm và cách sử dụng
Từ khoá liên quan:

Jumbotron trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới