Bài 12: Collapse trong Bootstrap

Bài 12: Collapse trong Bootstrap

Collapse trong Bootstrap được dùng để ẩn hoặc hiển thị nội dung, bằng cách bấm vào nút.

Bài 11 chúng ta đã được làm quen với cách sử dụng Carousel trong Bootstrap để làm Slide, Hôm nay hãy cùng sonnguyenaz.com tìm hiểu tiếp về thành phần Collapse này nhé.

Cách sử dụng Collapse trong Bootstrap

Để tiết kiệm không gian cho trang web thì việc sử dụng Collapse trong Bootstrap là hoàn toàn hợp lý.

Bạn thường thấy các nút bấm này ở phần câu hỏi thường gặp và nội dung câu trả lời được ẩn khi bấm vào thì mới hiển thị ra.

Ví dụ về Collapse đơn giản

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<p>
		<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
		Hiển thị thông tin
		</button>
	</p>
	<div class="collapse" id="collapseExample">
		<div class="card card-body">
		sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…
		</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả khi bạn bấm vào nút “Hiển thị thông tin” thì nội dung sẽ được show ra:

collapse-trong-bootstrap

Lưu ý:

  • Bạn phải gọi data-bs-target=”#collapseExample”aria-controls=”collapseExample” đúng với id của class collapse.
  • Bắt buộc phải có: data-bs-toggle=”collapse” ở nút.

Hiển thị collapse trong bootstrap theo chiều ngang

Bạn có thể điều chỉnh cho phần nội dung khi show ra theo chiều ngang với thuộc tính collapse-horizontal và đặt chiều rộng cho Card:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<p>
		<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
		Hiển thị thông tin
		</button>
	</p>
	<div class="collapse collapse-horizontal" id="collapseExample">
		<div class="card card-body" style="width: 300px;">
		sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…
		</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

collapse-hien-thi-theo-chieu-ngang

Sử dụng nhiều collapse

Bạn có thể tạo nhiều nội dung ẩn hiện cùng một lúc bằng thuộc tính multi-collapse:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<p>
		<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
		Hiển thị thông tin
		</button>
		<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
		Hiển thị thông tin
		</button>
	</p>
	<div class="row">
	<div class="col">
	<div class="collapse multi-collapse" id="collapseExample">
		<div class="card card-body" style="width: 300px;">
		sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…
		</div>
	</div>
	</div>
	<div class="col">
	<div class="collapse multi-collapse" id="collapseExample1">
		<div class="card card-body" style="width: 300px;">
		sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…
		</div>
	</div>
	</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

su-dung-nhieu-collapse

Lưu ý: Bạn cần phải gọi đúng id cho từng nội dung thì lúc bấm mới hiển thị đúng.

Lời kết

Như vậy qua các ví dụ trên chắc bạn cũng đã hiểu được về cách sử dụng Collapse trong Bootstrap để làm ẩn hiện nội dung rồi.

Bài viết liên quan:

Cảm ơn các bạn đã theo dõi bài viết.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *