[Bootstrap] Phần 9: Nút nhấn

442 lượt xem

Trong bài này, các bạn sẽ học cách tạo và trang trí các nút nhấn trong Bootstrap.

Phong cách nút nhấn
Để trang trí cho các nút nhấn, bạn có thể sử dụng 1 trong các lớp sau:

  • Lớp .btn-default
  • Lớp .btn-primary
  • Lớp .btn-success
  • Lớp .btn-info
  • Lớp .btn-warning
  • Lớp .btn-danger
  • Lớp .btn-link

button_styles

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

Các lớp nút nhấn có thể dùng ở các phần tử a, button, hay input:

button_tags

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Nút nhấn chỉ có viền
Bạn có thể dùng các lớp ,btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger để tạo các nút nhấn chỉ có viền, không có màu nền. Khi rê chuột lên các nút này mới hiện ra màu nền, ví dụ trong hình là nút Success khi rê chuột hiện nền xanh.

outline_button

<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>

Kích thước nút nhấn
Có 4 lớp để định nghĩa nút nhấn tùy theo kích thước màn hình đó là: .btn-lg, .btn-md, .btn-sm, .btn-xs.

button_sizes

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Nút nhấn dạng khối (block)
Một nút nhấn dạng khối là dạng nút nhấn mà có chiều rộng trải dài theo chiều rộng màn hình. Để tạo 1 nút nhấn dạng khối, chúng ta sử dụng lớp .btn-block.

block_button

<div class="container">
  <h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>
</div>

Kích hoạt/vô hiệu hóa nút nhấn

Chúng ta có thể dùng 2 lớp .active.disabled để kích hoạt hoặc vô hiệu hóa nút nhấn. Khi nút nhấn ở trạng thái disable thì màu nút nhấn sẽ nhạt hơn.

active_disabled_button

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Tổng kết: bài viết giúp các bạn nắm vững các lớp để trang trí cho các nút nhấn trong Bootstrap. Các bạn có thể thêm những phong cách khác vào để làm cho nút nhấn có phong cách đa dạng hơn và tùy theo yêu cầu thiết kế.

Bình luận Facebook

Để lại bình luận

1 Comment on "[Bootstrap] Phần 9: Nút nhấn"

Notify of
avatar
1000
Sort by:   newest | oldest | most voted
wpDiscuz