Bootstrap] Phần 15: Panel

258 lượt xem

Trong bài viết này, chúng ta sẽ học cách tạo các panel thông qua các lớp được định nghĩa trong Bootstrap.

Panel
Panel là 1 vùng khối hộp có viền bao quanh với nội dung bên trong. Panel được tạo ra bằng cách dùng lớp .panel, và nội dung bên trong thì dùng lớp .panel-body.
panel_basic

<div class="container">
	<div class="panel panel-default">	
		<div class="panel-body">Một panel cơ bản - dammio.com</div>
	</div>
</div>

Phần đầu Panel
Chúng ta có thể dùng lớp .panel-heading để tạo phần đầu cho 1 panel.
panel_heading

<div class="container">
	<div class="panel panel-default">
		<div class="panel-heading">Phần đầu Panel - dammio.com</div>
		<div class="panel-body">Phần nội dung Panel</div>
	</div>
</div>

Phần cuối Panel
Tương tự phần đầu Panel, chúng ta cũng có thể dùng lớp .panel-footer để tạo phần cuối Panel.
panel_footing

<div class="container">
	<div class="panel panel-default">
		<div class="panel-body">Phần nội dung Panel</div>
		<div class="panel-footer">Panel cuối Panel - dammio.com</div>
	</div>
</div>

Nhóm Panel
Để gom nhóm nhiều panel với nhau, chúng ta dùng phần tử div với lớp .panel-group để bao các panel con lại với nhau.
panel_group

<div class="container">
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel 1</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel 2</div>
  </div>
</div>
</div>

Panel với các lớp bối cảnh
Để thêm vào cho Panel, chúng ta cũng dùng các lớp bối cảnh như: .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, hay .panel-danger.
panel_context

<div class="container">
  <h2>Panel với các lớp bối cảnh - dammio.com</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel với lớp .panel-default</div>
      <div class="panel-body">Nội dung panel</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel với lớp .panel-primary</div>
      <div class="panel-body">Nội dung panel</div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel với lớp .panel-success</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel với lớp .panel-info</div>
      <div class="panel-body">Nội dung panel</div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel with panel-warning class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel với lớp .panel-danger</div>
      <div class="panel-body">Nội dung panel</div>
    </div>
  </div>
</div>

Kết luận: bài viết giúp các bạn nắm các lớp để xây dựng Panel trong Bootstrap.

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