Kết nối

[Bootstrap 4] Phần 10: Nút nhấn (button)

95 lượt xem 
 
Thể loại: Bootstrap 

Bootstrap 4 cung cấp các phong cách nút nhiều hơn so với Bootstrap 3.

Phong cách nút nhấn

Để tạo nút nhấn bạn chỉ cần sử dụng phần tử button, kèm theo là lớp .btn và các lớp bối cảnh (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>Ví dụ Bootstrap --- dammio.com</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.1/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/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Các phong cách nút nhấn --- dammio.com</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>

</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</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.1/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/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Phần tử Button ---dammio.com</h2>
  <a href="#" class="btn btn-info" role="button">Nút liên kết</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Nút Input">
  <input type="submit" class="btn btn-info" value="Nút Submit">
</div>

</body>
</html>

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.

<!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.1/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/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nút dạng viền --- dammio.com</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í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ỏ.

<!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.1/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/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Kích thước nút nhấn --- dammio.com</h2>
  <button type="button" class="btn btn-primary btn-lg">Lớn</button>
  <button type="button" class="btn btn-primary btn-md">Mặc định</button>    
  <button type="button" class="btn btn-primary btn-sm">Nhỏ</button>
</div>

</body>
</html>

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.

<!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.1/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/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Các nút theo khối --- dammio.com</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>

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.

<!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.1/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/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Trạng thái nút nhấn --- dammio.com</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>

</body>
</html>

Kết luận

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.

Bình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] [Bootstrap 4] Phần 10: Nút nhấn (button) – 26 tháng 10, 2018 lúc 10:47:08 Sáng […]