Sử dụng button trong Bootstrap

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người về button là gì? Các sử dụng nó trong lập trình website.

1. Button trong Bootstrap 4

button1


1
2
3
4
5
6
7
8
9
10
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button> 

2. Button border trong Bootstrap 4

button2


1
2
3
4
5
6
7
8
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

3. Kích thướt Button trong Bootstrap 4

Chúng ta sử dụng class .bnt-lg để tạo cho kích thướt button to nhất, btn-sm cho button có kích thướt nhỏ nhất. Nếu như không dùng 2 class này thì button sẽ lấy kích thướt mặc định

button3


1
2
3
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

4. Kích thướt Button dài bằng màn hình

Nếu như ta muốn button có kích thướt chiều dài bằng màn hình thì dùng class .btn-block


1
 <button type="button" class="btn btn-primary btn-block">Full-Width Button</button> 

5. Active và Disable Button

Chúng ta sử dụng class .active hoặc thuộc tính disable để cho người dùng có thể click hoặc không click được button.


1
2
3
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a> 

6. Nhóm các Button lại với nhau

Chúng ta có thể nhóm các button lại với nhau trên cùng 1 hàng

button4


1
2
3
4
5
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div> 

7. Nhóm các Button cùng kích thướt lại với nhau

Chúng ta có thể nhóm các button lại với nhau trên cùng kích thướt

button5


1
2
3
4
5
  <div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div> 

8. Sắp xếp các Button theo hàng dọc

Chúng ta sử dụng class .btn-group-vertical để sắp xếp các button theo chiều dọc


1
2
3
4
5
 <div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div> 

9. Button lồng trong một button khác

Chúng ta có thể nhóm các button lại với nhau trên cùng kích thướt

button6


1
2
3
4
5
6
7
8
9
10
11
12
13
 <div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>  

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments