Tạo Các Nút Bấm, Nhóm Nút Bấm Button Trong Boostrap

Trang chủ

• Bài viết Bootstrap 4.1 §1) Tổng quan về Bootstrap §2) Layout / Grid lưới cột và hàng §3) Các tiện ích trình bày cơ bản §4) Đối tượng Media §5) Breadcrumb §6) Pagination §7) Badge - Label -Tag §8) Button - Nút bấm §9) Jumbotron §10) Tabs §11) NavBar §12) Card §13) Collapse §14) DropDown Menu §15) Alert §16) Slide §17) List Group §18) Popover §19) Progress §20) Tooltip §21) Hộp thoại - Modal §22) Form
• §8) Button - Nút bấm

• CSS
• Bootstrap - CSS Framework

Tạo các nút bấm, nhóm nút bấm button trong Boostrap

Sử dụng lớp .btn để tạo nút bấm và các lớp định dạng nút bấm như .btn-sm, .btn-danger, tạo nhóm nút bấm cho ứng dụng web

Nút bấm .btn

Các nút bấm là thành phần sử dụng rất nhiều trong các thiết kế giao diện, đặc biệt ở các form, các hộp thoại. Trong Bootstrap tạo ra các nút bấm bằng cách sử dụng lớp .btn theo sau là các lớp định dạng .btn-*. Thông thường thì sử dụng phần tử HTML <button> để tạo nút bấm, tuy nhiên bạn có thể sử dụng bất kỳ phần tử nào như span, a, ...

Ví dụ code HTML tạo ra một nút bấm từ phần tử <button>, nếu muốn có thể sử dụng các loại phần tử HTML khác như <span> <a> <input> ...

Muốn chuyển sang loại nút bấm mà không tô màu nền thì sử dụng .btn-outline-*

<button type="button" class="btn btn-primary"> Primary </button> <button type="button" class="btn btn-outline-danger"> Primary </button> Bấm vào nút bấm để xem mã HTML

Tạo ra nút bấm sử dụng bắt với class bắt đầu là .btn theo sau định dạng cơ bản bởi các class .btn-primary .btn-secondary .btn-success .btn-danger .btn-warning .btn-info .btn-light .btn-dark .btn-link

Muốn có nút bấm lớn thêm vào .btn-lg hoặc thì là .btn-sm

Muốn nút bấm hiện thị dạng block thì thêm vào .btn-block

Hãy bấm vào các nút bấm dưới đây để xem code HTML của nó

Primary Success - Block Danger - Link Warning - Lớn Info - Nhỏ Light Dark Link Primary Secondary Success Danger Warning Info Light Dark

Trạng thái của nút bấm

Có thể thiết lập thêm cho nút bấm trạng thái là hiệu lực bằng cách thêm .active hoặc vô hiệu bằng cách thêm .disabled (tắt hiệu ứng hover và hiện thị ở màu vô hiệu). Lớp .active và .disanabled hay dùng với phần tử <a>

Trạng thái bình thường:

<a href="#" class="btn btn-danger btn-lg">Primary link</a> <a href="#" class="btn btn-secondary btn-lg">Link</a> Primary link Link

Khi thêm .active

<a href="#" class="btn btn-danger btn-lg active">Primary link</a> <a href="#" class="btn btn-secondary btn-lg active">Link</a> Primary link Link

Khi thêm .disabled

<a href="#" class="btn btn-danger btn-lg disabled">Primary link</a> <a href="#" class="btn btn-secondary btn-lg disabled">Link</a> Primary link Link

Nhóm nút bấm .btn-group .btn-group-vertical

Để tạo ra một nhóm nút bấm, hiện thị trên một dòng đơn chỉ cần tạo ra phần tử .btn-group hoặc .btn-group-verticalnó bao bọc lấy các phần tử nút bấm .btn

Link1 Link2 Link3 Link4 Link5 Link1 Link2 Link3 Link4 Link5 <div class="btn-group"> <a href="#" class="btn btn-danger">Link1</a> <a href="#" class="btn btn-success">Link2</a> <a href="#" class="btn btn-primary">Link3</a> <a href="#" class="btn btn-danger">Link4</a> <a href="#" class="btn btn-danger">Link5</a> </div> <div class="btn-group-vertical"> <a href="#" class="btn btn-danger">Link1</a> <a href="#" class="btn btn-success">Link2</a> <a href="#" class="btn btn-primary">Link3</a> <a href="#" class="btn btn-danger">Link4</a> <a href="#" class="btn btn-danger">Link5</a> </div>

Để điều chỉnh kích thước nhóm, có lớp .btn-group-lg .btn-group-sm. Nếu muốn nhóm các nút bố trí theo chiều ngang thì dùng đến .btn-group-vertical

Nếu có nhiều nhóm nút bấm, có thể cho chúng vào một phần tử .btn-toolbar để tạo thành thanh công cụ cho ứng dụng web, ví dụ:

Copy Cut Paste Normal Bold Itatic Link1 Link2 Link3 Link4 Link5 <div class="btn-toolbar"> <div class="btn-group mx-1"> <a href="#" class="btn btn-danger">Copy</a> <a href="#" class="btn btn-success">Cut</a> <a href="#" class="btn btn-primary">Paste</a> </div> <div class="btn-group mx-1"> <a href="#" class="btn btn-secondary">Normal</a> <a href="#" class="btn btn-secondary font-weight-bold">Bold</a> <a href="#" class="btn btn-secondary font-italic">Itatic</a> </div> <div class="btn-group mx-1"> <a href="#" class="btn btn-danger">Link1</a> <a href="#" class="btn btn-success">Link2</a> <a href="#" class="btn btn-primary">Link3</a> <a href="#" class="btn btn-danger">Link4</a> <a href="#" class="btn btn-danger">Link5</a> </div> </div> ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới Dùng grunt tạo dự án biên dịch SASS thành CSS tùy biến thư viện CSS Bootstrap Ứng dụng lớp .media của Bootstrap Các tiện ích CSS cơ bản của Bootstrap Xây dựng Layout cơ bản với Bootstrap Tạo thanh Navbar trong Bootstrap Sử dụng badge tạo ra các nhãn lable trong Bootstrap Thanh điều hướng phân trang Pagination trong Bootstrap Tạo breadcrumb với Bootstrap Sử dụng Card tạo box chứa nội dung trong Bootstrap Tạo thanh progress với Bootstrap