Nếu bạn đã từng tìm hiểu về Bootstrap 3 thì bài viết dưới đây bạn sẽ thấy Bootstrap 4 cung cấp nhiều kiểu style nút hơn Bootstrap 3. Bài học dưới dây chúng ta sẽ học cách định kiểu các nút nhấn (Button) trong Bootstrap 4 các bạn nhé!
Button Styles (Kiểu nút)
Trong Bootstrap 4 để tạo nút nhấn chúng ta chỉ cần sử dụng phần tử button, kèm theo là lớp .btn đi kèm các lớp bối cảnh (các lớp màu sắc) như .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light và .btn-link.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Các kiểu nút trong Bootstrap 4</h2> <button type="button" class="btn">Cơ bản</button> <button type="button" class="btn btn-primary">Chính</button> <button type="button" class="btn btn-secondary">Phụ</button> <button type="button" class="btn btn-success">Thành công</button> <button type="button" class="btn btn-info">Thông tin</button> <button type="button" class="btn btn-warning">Cảnh báo</button> <button type="button" class="btn btn-danger">Nguy hiểm</button> <button type="button" class="btn btn-dark">Tối</button> <button type="button" class="btn btn-light">Sáng</button> <button type="button" class="btn btn-link">Liên kết</button> </div> </div> </body> </html>
Chúng ta cũng 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.
Ví dụ:
<div class="container"> <h2>Phần tử nút</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>
Nút chỉ có viền
Nếu màu sắc nút bạn không thích lắm thì cũng có thể tạo các nút chỉ có viền bao quanh. Chúng ta sử dụng các lớp btn-outline-xxx với xxx là tên các nút theo các màu sắc ở trên.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Nút không màu chỉ có viền trong Bootstrap 4</h2> <button type="button" class="btn">Cơ bản</button> <button type="button" class="btn btn-outline-primary">Chính</button> <button type="button" class="btn btn-outline-secondary">Phụ</button> <button type="button" class="btn btn-outline-success">Thành công</button> <button type="button" class="btn btn-outline-info">Thông tin</button> <button type="button" class="btn btn-outline-warning">Cảnh báo</button> <button type="button" class="btn btn-outline-danger">Nguy hiểm</button> <button type="button" class="btn btn-outline-dark">Tối</button> <button type="button" class="btn btn-outline-light">Sáng</button> <button type="button" class="btn btn-outline-link">Liên kết</button> </div> </div> </body> </html> </body> </html>
Kích thước nút
Tương tự như Bootstrap 3 thì trong Bootstrap 4 nút nhấn cũng có nhiều kích thước khác nhau, chúng ta 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ỏ.
<div class="container"> <h2>Kích thước nút nhấn Bootstrap 4</h2> <button type="button" class="btn btn-success btn-lg">Lớn</button> <button type="button" class="btn btn-success btn-md">Mặc định</button> <button type="button" class="btn btn-success btn-sm">Nhỏ</button> </div>
Các nút theo khối
Bootstrap 4 cũng hỗ trợ tạo các nút có chiều rộng nút trải dài theo kích thước của phần tử cha bằng cách thêm lớp .btn-block.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Các nút theo khối </h2> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-success btn-block">Button 2</button> <br> <h2>Các nút lớn theo khối</h2> <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button> <button type="button" class="btn btn-success btn-lg btn-block">Button 2</button> <br> <h2>Các nút nhỏ theo khối</h2> <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button> <button type="button" class="btn btn-success btn-sm btn-block">Button 2</button> </div> </body> </html> </body> </html>
Kích hoạt ,Vô hiệu hóa nút
Chúng ta 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 sử dụng .active hay .disabled.
<div class="container"> <h2>Kích hoạt và vô hiệu hóa nút nhấn </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> <a href="#" class="btn btn-primary disabled">Disabled Link</a> </div>
Spinner Buttons
Bạn cũng có thể thêm "spinners" vào một nút. Chúng ta sẽ tìm hiểu thêm về nút này trong Hướng dẫn về Spinners BS4 của chúng mình
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Loading.. </button>
Lời kết:
Trên đây là cách sử dụng các nút nhấn (button) trong Bootstrap 4. Tùy từng trường hợp mà chúng ta sử dụng các kiểu nút cũng như màu sắc nút nhấn cho hợp lý nhé các bạn. Chúc các bạn học tốt!
