Hướng dẫn thân thiện về Nhóm của Bootstrap cho người mới bắt đầu
Xin chào các bạnfuture web developers! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị này qua Nhóm của Bootstrap. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi đã chứng kiến biết bao nhiêu sinh viên trở nên hứng thú khi nắm bắt được các khái niệm này. Vậy nên, hãy cùng nhau lặn vào và làm cho biểu mẫu web của bạn trở nên tuyệt vời!
Nhóm là gì?
Trước khi bắt đầu, hãy tưởng tượng bạn đang thiết kế một biểu mẫu cho dịch vụ giao pizza. Bạn cần các trường cho tên khách hàng, địa chỉ, và tất nhiên, phần toppings pizza quan trọng. Nhóm giống như gia vị bí mật giúp các yếu tố biểu mẫu trông đồng nhất và chuyên nghiệp.
Trong Bootstrap, nhóm cho phép bạn thêm các tiền tố, hậu tố hoặc các yếu tố khác vào các控件 biểu mẫu. Chúng làm tăng vẻ đẹp thị giác và chức năng của biểu mẫu của bạn, làm cho chúng trở nên thân thiện và trực quan hơn.
Ví dụ: Nhóm Cơ bản
Hãy bắt đầu với một ví dụ đơn giản:
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>Trong đoạn mã này:
- Chúng ta tạo một容器 với lớp
input-group. - Lớp
mb-3thêm một chút margin ở dưới. - Chúng ta sử dụng
input-group-textcho tiền tố '@'. - Trường nhập sử dụng lớp
form-controlđể định dạng.
Điều này tạo ra một trường nhập tinh tế với符号 '@', hoàn hảo cho việc nhập tên người dùng hoặc địa chỉ email!
Cuộn
Đôi khi, nhóm của bạn có thể quá dài để hiển thị trên một dòng duy nhất. Đừng lo lắng; Bootstrap đã có giải pháp cho bạn với khả năng cuộn tự động.
Ví dụ: Nhóm Cuộn
<div class="input-group flex-nowrap">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-text">.com</span>
</div>Ở đây, chúng ta thêm flex-nowrap vào nhóm. Điều này đảm bảo rằng tất cả các yếu tố đều ở trên cùng một dòng nếu có thể, nhưng sẽ cuộn đẹp nếu màn hình quá hẹp.
Kích thước
Giống như Goldilocks, đôi khi bạn cần nhóm có kích thước chính xác. Bootstrap cung cấp các tùy chọn kích thước khác nhau để phù hợp với nhu cầu của bạn.
Ví dụ: Nhóm Kích thước Khác nhau
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Default</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-lg">
<span class="input-group-text">Large</span>
<input type="text" class="form-control">
</div>Bằng cách thêm input-group-sm hoặc input-group-lg, bạn có thể tạo ra nhóm nhỏ hoặc lớn. Kích thước mặc định không cần bất kỳ lớp bổ sung nào.
CheckBoxes và Radio Buttons
Đôi khi, một trường nhập văn bản đơn giản không đủ. Bạn có thể muốn thêm các hộp kiểm hoặc nút radio vào nhóm. Hãy xem chúng ta có thể làm thế nào!
Ví dụ: CheckBox trong Nhóm
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" placeholder="CheckBox ở đây">
</div>Trong ví dụ này, chúng ta đặt một hộp kiểm bên trong một div input-group-text. Lớp form-check-input định dạng hộp kiểm, trong khi mt-0 loại bỏ margin trên cùng.
Nhiều Trường Nhập
Tại sao lại chỉ có một trường nhập khi bạn có thể có nhiều hơn? Hãy tạo một nhóm với nhiều trường.
Ví dụ: Nhiều Trường Nhập
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="Last name">
</div>Điều này tạo ra hai trường nhập bên cạnh nhau, hoàn hảo cho việc thu thập tên đầy đủ của người dùng!
Phụ kiện Nút
Các nút có thể thêm tính tương tác vào nhóm. Hãy xem cách chúng ta có thể tích hợp chúng.
Ví dụ: Phụ kiện Nút
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>Ở đây, chúng ta thêm một nút ngay bên cạnh trường nhập. Điều này có thể được sử dụng cho các hành động như gửi biểu mẫu hoặc kích hoạt một tìm kiếm.
Nút với Thả xuống
Muốn cung cấp thêm tùy chọn cho người dùng? Hãy thêm một menu thả xuống vào phụ kiện nút.
Ví dụ: Nút với Thả xuống
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search...">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Options
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>Điều này tạo ra một nút thả xuống bên cạnh trường nhập, cung cấp các tùy chọn bổ sung cho người dùng.
Biểu mẫu Tùy chỉnh
Bootstrap cũng cho phép bạn tạo các yếu tố biểu mẫu tùy chỉnh trong nhóm. Hãy xem một ví dụ về biểu mẫu tùy chỉnh.
Ví dụ: Biểu mẫu Tùy chỉnh
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>Điều này tạo ra một menu thả xuống tùy chỉnh trong nhóm, được định dạng nhất quán với các yếu tố khác của Bootstrap.
Trường Nhập Tệp Tùy chỉnh
Cuối cùng, hãy xem cách tạo một trường nhập tệp tùy chỉnh trong nhóm.
Ví dụ: Trường Nhập Tệp Tùy chỉnh
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Upload</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>Điều này tạo ra một trường nhập tệp tinh tế, hoàn hảo cho việc cho phép người dùng tải lên tệp qua biểu mẫu của bạn.
Kết luận
Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của Nhóm của Bootstrap, từ các ví dụ cơ bản đến các cấu hình phức tạp hơn. Nhớ rằng, chìa khóa để thành thạo các khái niệm này là thực hành. Hãy thử kết hợp các yếu tố khác nhau, chơi với kích thước và phong cách, và quan trọng nhất, hãy vui vẻ với nó!
Khi kết thúc, tôi nhớ lại một sinh viên đã từng nói với tôi, "Bootstrap giống như LEGO cho thiết kế web!" Và bạn biết đấy, họ hoàn toàn đúng. Bây giờ bạn đã có tất cả những mảnh ghép tuyệt vời - đã đến lúc xây dựng điều gì đó tuyệt vời!
Chúc các bạn mã hóa vui vẻ, và hy vọng rằng các biểu mẫu của bạn luôn thân thiện và hấp dẫn về mặt thị giác!
Credits: Image by storyset