Bootstrap 4 - Bootstrap Button
Bootstrap Button
Có 7 kiểu khác nhau để tạo button kh trong Bootstrap. Sử dụng các lớp sau để đạt được các kiểu button khác nhau:
- btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
- btn-dark
- btn-light
Ví dụ sau sẽ chỉ cho bạn cách tạo các kiểu nút khác nhau trong Bootstrap:
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</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>
Nút chỉ có viền
Nếu bạn không thích phong cách nút có nền màu sắc, bạn có thể tạo nút chỉ có viền màu bao bên bên ngoài. Bạn có thể dùng các lớp btn-outline-xxx với xxx là tên các nút theo màu sắc ở trên.
<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</button>
Kích thước nút
Tương tự như Bootstrap 4, nút nhấn cũng có nhiều kích thước khác nhau, bạn chỉ cần thêm một số lớp .btn-lg và .btn-sm để mô tả kích thước lần lượt nút nhấn là lớn và nhỏ.
Các lớp sau xác định các kích thước khác nhau:
- .btn-lg
- .btn-md
- .btn-sm
- .btn-xs
<div class="container">
<h2>Button Sizes</h2>
<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>
</div>
Kích hoạt/Vô hiệu hóa nút
Bạn có thể vô hiệu hóa nút nhấn hoặc kích hoạt nút nhấn bằng cách dùng lớp .active hay .disabled.
<div class="container">
<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>
Các nút theo khối
Nếu bạn muốn tạo nút có chiều rộng trải dài theo kích thước của phần tử cha, bạn chỉ cần thêm lớp .btn-block.
<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>
<h2>Large Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>
<h2>Small Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>
Các lớp nút với các phần tử khác
Bạn có thể kết hợp thêm phần tử a, button và input để tạo nút nhấn trong Bootstrap 4 như ví dụ sau.
<div class="container">
<h2>Button Classes with other Elements</h2>
<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">
</div>
Như vậy, bạn đã học được cách tạo nút (button) trong Bootstrap 4 qua các lớp phong cách và ví dụ cụ thể. Bạn có thể tự sáng tạo để tạo ra nhiều nút nhấn đẹp mắt khác nữa. Mời bạn theo dõi bài tiếp theo.