Bootstrap - Buttons Demo

Xin chào, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của các nút bấm Bootstrap. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ hướng dẫn bạn qua hành trình này, từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu thú vị này!

What are Bootstrap Buttons?

Trước khi chúng ta nhảy vào chi tiết, hãy nói về Bootstrap buttons là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Tường và mái nhà là cấu trúc HTML của bạn, sơn là CSS của bạn, và Bootstrap? Đó giống như một bộ công cụ ma thuật giúp mọi thứ trở nên dễ dàng và đẹp hơn. Các nút Bootstrap là các nút đã được thiết kế sẵn, dễ dàng thêm vào các trang web của bạn.

Getting Started with Bootstrap

Thứ nhất, chúng ta cần thiết lập sân chơi Bootstrap. Đừng lo lắng, nó dễ dàng hơn việc thiết lập một trò chơi Monopoly!

Step 1: Setting Up the HTML Structure

Hãy bắt đầu với một cấu trúc HTML cơ bản:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buttons Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Our buttons will go here -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Điều này giống như thiết lập canvas trước khi vẽ. Chúng ta đã bao gồm các tệp CSS và JS của Bootstrap, cho phép chúng ta truy cập vào tất cả các tính năng của Bootstrap.

Basic Bootstrap Buttons

Bây giờ, hãy thêm một số nút vào trang của chúng ta!

<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Dưới đây là tác dụng của mỗi lớp:

btn: Đây là lớp cơ bản cho tất cả các nút Bootstrap.
btn-primary, btn-secondary, v.v.: Các lớp này xác định màu sắc và phong cách của nút.

Button Sizes

Giống như bạn có thể lấy các kích thước khác nhau của khoai tây chiên tại một nhà hàng nhanh, các nút Bootstrap cũng có kích thước khác nhau!

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

btn-lg: Làm cho nút lớn hơn
btn-sm: Làm cho nút nhỏ hơn

Outline Buttons

Đôi khi, bạn muốn một nút hơi kín đáo hơn. Đó là lúc các nút viền hữu ích!

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

Các lớp btn-outline-* cho bạn các nút có viền màu và nền trong suốt.

Block Buttons

Cần một nút chiếm toàn bộ chiều rộng của phần cha? Các nút block là bạn của bạn!

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Block button</button>
<button class="btn btn-primary" type="button">Block button</button>
</div>

Lớp d-grid trên phần div cha và lớp gap-2 thêm một khoảng cách giữa các nút.

Button States

Các nút có thể có trạng thái khác nhau, giống như chúng ta có các cung cách khác nhau!

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

Lớp active làm cho nút xuất hiện như đang được nhấn.
Thuộc tính disabled làm cho nút không thể nhấp được.

Toggle Buttons

Các nút bật/tắt giống như công tắc đèn - chúng có thể ở trạng thái bật hoặc tắt!

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>

Thuộc tính data-bs-toggle="button"启用切换功能。

Button Groups

Đôi khi, các nút muốn ở cùng nhau. Đó là lúc các nhóm nút hữu ích!

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>

Lớp btn-group nhóm các nút lại với nhau.

Dropdown Buttons

Các nút thả xuống giống như hộp bất ngờ - nhấp vào chúng, và nhiều tùy chọn hơn sẽ xuất hiện!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Lớp dropdown-toggle và thuộc tính data-bs-toggle="dropdown"启用下拉功能。

Conclusion

Chúc mừng! Bạn vừa hoàn thành một chuyến du lịch nhanh chóng qua các nút Bootstrap. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các kết hợp khác nhau. Ai biết được? Bạn có thể tạo ra điều lớn lao tiếp theo trong thiết kế web!

Dưới đây là bảng tham khảo nhanh của tất cả các lớp nút chúng ta đã覆盖:

Lớp	Mô tả
btn	Lớp cơ bản cho nút
btn-primary	Nút màu chính
btn-secondary	Nút màu thứ cấp
btn-success	Nút màu thành công
btn-danger	Nút màu nguy hiểm
btn-warning	Nút màu cảnh báo
btn-info	Nút màu thông tin
btn-light	Nút màu sáng
btn-dark	Nút màu tối
btn-lg	Nút lớn
btn-sm	Nút nhỏ
btn-outline-*	Nút viền
active	Nút trạng thái hoạt động
disabled	Nút bị vô hiệu hóa
data-bs-toggle="button"	Nút bật/tắt
btn-group	Nhóm nút
dropdown-toggle	Nút thả xuống

Chúc bạn vui vẻ lập trình, và mong rằng Bootstrap sẽ luôn ở bên bạn!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Demo Lưới

Hướng Dẫn Tiếp Theo:

Bootstrap - Demo 导航