Một website tồn tại khá nhiều nút bấm hay còn gọi là nút nhấn (button) và đôi khi điểm nhấn của web chính là các button đó. Trong bài viết này chúng ta sẽ tìm hiểu về cách trang trí các nút trong Bootstrap 3 nhé các bạn.
Button Styles
Bootstrap cung cấp các kiểu nút khác nhau:
Để 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 - 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
Ví dụ sau cho thấy code cho các kiểu nút khác nhau:
<div class="container"> <h2>Kiểu Button</h2> <button type="button" class="btn">Basic</button> <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> </div>
Kết quả:
Các lớp nút có thể được sử dụng trên phần tử <a>, <button> hoặc <input>:
Ví dụ
<div class="container"> <h2>Button Tags</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>
Kết quả:
Tại sao chúng mình lại đặt dấu # trong thuộc tính href của liên kết?
Lý do đơn giả vì không có bất kỳ trang nào để liên kết nó và chúng mình không muốn nhận được thông báo "404", vì vậy chúng mình sử dụng # làm liên kết trong các ví dụ.
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 Danger khi rê chuột hiện nền đỏ.
Ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <title>Ví dụ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.7/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Nút dạng viền </h2> <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> </div> </body> </html>
Kết quả:
Kích thước nút (Button Sizes)
Bootstrap cung cấp bốn kích thước nút bằng các lớp xác định các kích thước khác nhau là:
- .btn-lg
- .btn-md
- .btn-sm
- .btn-xs
Ví dụ sau đây cho thấy mã cho các kích thước nút khác nhau:
<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">Normal</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ết quả:
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.
Ví dụ:
<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>
Kết quả:
Kích hoạt/ Vô hiệu hóa nút nhấn (Active/Disabled Buttons)
Một nút có thể được đặt thành trạng thái hoạt động (xuất hiện khi nhấn) hoặc trạng thái tắt (không thể nhấn):
Lớp .active làm cho một nút xuất hiện có thể nhấn và lớp .disabled làm cho một nút không thể nhấp vào
Ví dụ
<div class="container"> <h2>Button States</h2> <button type="button" class="btn btn-primary" style="background-color:magenta;">Primary Button</button> <button type="button" class="btn btn-primary active" style="background-color:magenta;">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button> </div>
Kết quả:
Lời kết:
Trên đây là toàn bộ kiến thức về Nút (Button) trong Bootstrap 3 và cách dùng các lớp trong Bootstrap 3 để trang trí và sử dụng nút. Chỉ với vài lớp đơn giản chúng ta đã tạo được nút tuy đơn giản mà đẹp phải không nào. Có gì chưa rõ các bạn hãy comment bên dưới nhé. Chúc các bạn học tốt!
