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

Đang xem: Chỉnh kích thước button trong html

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 để 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ử , nếu muốn có thể sử dụng các loại phần tử HTML khác như …

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

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

Xem thêm:

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ử

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

Để đ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ụ:

*

Xem thêm: An Toàn Và Bảo Mật Thông Tin Tiếng Anh Là Gì? Bảo Mật Thông Tin Tiếng Anh Là Gì

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

Leave a Reply

Your email address will not be published. Required fields are marked *