Nút khởi động html 4

Trong Bootstrap 4, người dùng cũng có thể thêm các nút vào trang web của họ. Có nhiều loại nút khác nhau có thể được áp dụng cho các trang web. Những nút được liệt kê dưới đây

1. Nút cơ bản
2. Nút chính
3. Nút phụ
4. Nút thành công
5. Nút thông tin
6. Nút cảnh báo
7. nút nguy hiểm
8. Nút tối
9. Nút sáng
10. Nút liên kết

Mã mẫu để hiển thị tất cả các kiểu nút này được cung cấp bên dưới

Đầu ra của mã mẫu đã cho ở trên sẽ là

Các nút có phần tử

Ngoài ra, các nút này đôi khi có thể được sử dụng với các thành phần như nút liên kết, nút nhập liệu, v.v.

Ví dụ

Đầu ra cho ví dụ này sẽ là

Các nút có đường viền

Trong Bootstrap 4, người dùng cũng có thể chỉ thêm các đường viền vào các nút. Có tổng cộng 8 loại nút có đường viền hiện có sẵn với Bootstrap 4. Khi di chuột vào các nút này, người dùng sẽ thấy màu của đường viền bên trong nút

Các loại nút phác thảo khác nhau được đưa ra dưới đây

1. Nút phác thảo chính
2. Nút phác thảo phụ
3. Nút phác thảo thành công
4. Nút phác thảo thông tin
5. Nút phác thảo cảnh báo
6. Nút phác thảo nguy hiểm
7. Nút Đường viền tối
8. Nút viền sáng

Mã mẫu để hiển thị các nút phác thảo này được đưa ra bên dưới

Đầu ra của mã mẫu này sẽ là

Kích thước khác nhau của các nút

Người dùng cũng có thể thay đổi kích thước của các nút với sự trợ giúp của việc sử dụng lớp. btn-large để phóng to kích thước của nút và lớp. btn-sm để giảm kích thước của nút

Ví dụ

Đầu ra của mã đã cho ở trên sẽ là

Các nút hoạt động hoặc các nút bị vô hiệu hóa

Trong Bootstrap 4, một nút có thể được hiển thị ở trạng thái hoạt động (dường như được nhấn) hoặc bị vô hiệu hóa (dường như không thể nhấp được)

Đối với nút hoạt động, lớp. hoạt động được sử dụng để làm cho một nút xuất hiện được nhấn và thuộc tính bị vô hiệu hóa làm cho một nút không thể nhấp được

Tuy nhiên, các phần tử không hỗ trợ thuộc tính bị vô hiệu hóa và do đó phải sử dụng thuộc tính. lớp bị vô hiệu hóa để làm cho nó xuất hiện trực quan bị vô hiệu hóa

Bootstrap đi kèm với tải nội dung thú vị để bạn có thể tạo các nút tùy chỉnh. Bạn có thể sử dụng các nút cho mọi thứ như gửi biểu mẫu, mở rộng nội dung và liên kết đến các trang mới. Có rất nhiều kiểu có sẵn để bạn có thể điều chỉnh giao diện của chúng theo nội dung trái tim của bạn

Bạn có thể tự mình thử tất cả các nút thông qua từng liên kết trong các phần có liên quan bên dưới hoặc bạn có thể truy cập toàn bộ bộ sưu tập tại đây

Các kiểu nút Bootstrap được đưa vào mã của bạn bằng cách sử dụng lớp .btn như hình bên dưới

"button" class="btn">A Button

Một nút cơ bản không có kiểu bổ sung

thẻ

Một vài yếu tố có thể được tạo kiểu bằng các nút Bootstrap, vì vậy chúng ta sẽ xem xét những yếu tố đó trước

Theo lẽ thường, các lớp .btn dành cho các phần tử , tuy nhiên, trong khi chúng được thiết kế cho mục đích đó, chúng có thể được thêm vào các phần tử khác. Các lớp cũng sẽ hoạt động trên các phần tử 

class="btn" type="submit">Submit class="btn" href="#" role="button">Expand class="btn" type="reset" value="Reset"> 0 và 

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

Ví dụ bên dưới cho thấy các phần tử khác nhau này được tạo kiểu như các nút thực hiện một số loại hành động trong trang (e. g. gửi biểu mẫu, mở rộng một số nội dung, đặt lại biểu mẫu). Bạn sẽ thấy trong ví dụ mà tôi đã thêm ____1_______2 vào phần tử ______1_______0. Điều đó là cần thiết để cho trình đọc màn hình và công nghệ hỗ trợ khác biết mục đích của liên kết là gì

Tùy chọn thẻ cho các nút

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

Nhấn vào đây để tự mình đi…

Kiểu Nút Chuẩn

Cho đến bây giờ chúng tôi đã thêm bất kỳ kiểu nào vào các nút. Phải nói rằng, ngay cả với mã rất đơn giản ở trên, một số kiểu sẽ được áp dụng. Có một số màu chúng ta có thể áp dụng cho các nút của mình. Điều này khá hữu ích để truyền đạt một số loại ý nghĩa. Ví dụ: bạn có thể muốn sử dụng màu xanh lục để gửi biểu mẫu hoặc có thể là màu đỏ để đặt lại biểu mẫu

Dù bạn chọn gì, hãy nhớ rằng những người dùng dựa vào công nghệ hỗ trợ như trình đọc màn hình sẽ không có lợi cho việc bạn sử dụng màu sắc. Vì vậy, bạn nên đảm bảo rằng nội dung (có thể là văn bản) của nút cho người dùng biết nút đó làm gì (e. g. bằng cách viết "gửi" trên nút gửi màu xanh lục của bạn). Nếu không, bạn nên cân nhắc việc ẩn một số văn bản trên nút bằng cách sử dụng lớp 

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

Kiểu nút Bootstrap tiêu chuẩn 4

"button" class="btn btn-primary">Primary
"button" class="btn btn-secondary">Secondary
"button" class="btn btn-success">Success
"button" class="btn btn-danger">Danger
"button" class="btn btn-warning">Warning
"button" class="btn btn-info">Info
"button" class="btn btn-light">Light
"button" class="btn btn-dark">Dark
"button" class="btn btn-link">Link

Nhấn vào đây để tự mình đi…

Các kiểu nút phác thảo

Nếu bạn không muốn các nút của mình được tô màu thì cũng có các tùy chọn cho các nút phác thảo. Trên các màu này, màu được áp dụng cho đường viền và văn bản đã xóa nền như hình bên dưới. Họ có phong cách di chuột đặc biệt thú vị

Các kiểu nút phác thảo

Nhấn vào đây để tự mình đi….  

Kích thước nút

Bootstrap cũng cung cấp cho bạn một số tùy chọn về kích thước của các nút để bạn có thể chọn tùy chọn phù hợp nhất cho dự án của mình. Đối với nút có kích thước tiêu chuẩn, bạn không cần thêm bất kỳ loại bổ sung nào (mặc dù 

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

Ngoài ba nút “bình thường”, còn có các nút cấp độ khối. Nút cấp khối chiếm toàn bộ chiều rộng của phần tử cha của nó. Để tạo nút cấp khối, chỉ cần thêm ____1_______8 vào mã của bạn

Kích thước nút khác nhau

"button" class="btn btn-primary btn-lg">Large
"button" class="btn btn-primary">Standard
"button" class="btn btn-primary btn-sm">Small
"button" class="btn btn-primary btn-lg btn-block">Block level (full width) button

Nhấn vào đây để tự mình đi…

Các trạng thái bị vô hiệu hóa / đang hoạt động

Các nút Bootstrap 4 đã tích hợp sẵn các kiểu cho trạng thái hoạt động (i. e. khi nút đang được nhấn), trạng thái di chuột (i. e. khi con trỏ chuột ở trên nút) và các trạng thái bị vô hiệu hóa (i. e. khi không thể nhấn nút)

Bạn có thể buộc các nút chuyển sang trạng thái hoạt động và vô hiệu hóa một cách dễ dàng. Để làm cho một  hoặc một nút được tạo kiểu 

class="btn" type="submit">Submit class="btn" href="#" role="button">Expand class="btn" type="reset" value="Reset"> 0 trông giống như được nhấn, bạn chỉ cần thêm 

"button" class="btn btn-primary">Primary
"button" class="btn btn-secondary">Secondary
"button" class="btn btn-success">Success
"button" class="btn btn-danger">Danger
"button" class="btn btn-warning">Warning
"button" class="btn btn-info">Info
"button" class="btn btn-light">Light
"button" class="btn btn-dark">Dark
"button" class="btn btn-link">Link

"button" class="btn btn-primary">Primary
"button" class="btn btn-secondary">Secondary
"button" class="btn btn-success">Success
"button" class="btn btn-danger">Danger
"button" class="btn btn-warning">Warning
"button" class="btn btn-info">Info
"button" class="btn btn-light">Light
"button" class="btn btn-dark">Dark
"button" class="btn btn-link">Link

"button" class="btn btn-primary">Primary
"button" class="btn btn-secondary">Secondary
"button" class="btn btn-success">Success
"button" class="btn btn-danger">Danger
"button" class="btn btn-warning">Warning
"button" class="btn btn-info">Info
"button" class="btn btn-light">Light
"button" class="btn btn-dark">Dark
"button" class="btn btn-link">Link

Để làm cho một  không thể nhấp được, bạn chỉ cần thêm thuộc tính 

"button" class="btn btn-primary">Primary "button" class="btn btn-secondary">Secondary "button" class="btn btn-success">Success "button" class="btn btn-danger">Danger "button" class="btn btn-warning">Warning "button" class="btn btn-info">Info "button" class="btn btn-light">Light "button" class="btn btn-dark">Dark "button" class="btn btn-link">Link 7 vào nó

Để làm cho một 

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

"button" class="btn btn-primary">Primary
"button" class="btn btn-secondary">Secondary
"button" class="btn btn-success">Success
"button" class="btn btn-danger">Danger
"button" class="btn btn-warning">Warning
"button" class="btn btn-info">Info
"button" class="btn btn-light">Light
"button" class="btn btn-dark">Dark
"button" class="btn btn-link">Link

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

"button" class="btn btn-outline-primary">Primary
"button" class="btn btn-outline-secondary">Secondary
"button" class="btn btn-outline-success">Success
"button" class="btn btn-outline-danger">Danger
"button" class="btn btn-outline-warning">Warning
"button" class="btn btn-outline-info">Info
"button" class="btn btn-outline-light">Light
"button" class="btn btn-outline-dark">Dark

class="btn" type="submit">Submit
class="btn" href="#" role="button">Expand
class="btn" type="reset" value="Reset">

Lớp 

"button" class="btn btn-primary">Primary
"button" class="btn btn-secondary">Secondary
"button" class="btn btn-success">Success
"button" class="btn btn-danger">Danger
"button" class="btn btn-warning">Warning
"button" class="btn btn-info">Info
"button" class="btn btn-light">Light
"button" class="btn btn-dark">Dark
"button" class="btn btn-link">Link

"button" class="btn btn-outline-primary">Primary
"button" class="btn btn-outline-secondary">Secondary
"button" class="btn btn-outline-success">Success
"button" class="btn btn-outline-danger">Danger
"button" class="btn btn-outline-warning">Warning
"button" class="btn btn-outline-info">Info
"button" class="btn btn-outline-light">Light
"button" class="btn btn-outline-dark">Dark

Các nút bị vô hiệu hóa với một nút tiêu chuẩn để so sánh

"button" class="btn btn-primary" disabled aria-disabled="true">Disabled Button
"#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Link

Các nút hoạt động với một nút tiêu chuẩn để so sánh

"button" class="btn btn-primary active">Active Button
"#" class="btn btn-primary active" role="button" aria-pressed="true">Active Link

Nhấn vào đây để tự mình đi….  

Phần kết luận

Vì vậy, đó là các loại và kiểu nút cơ bản của bạn. Với lời giải thích ở đây cùng với các ví dụ để bạn thử nghiệm, hy vọng bạn sẽ có thể nhận được một số nút thú vị trong dự án của mình. Khi bạn tự tin với những điều này, bạn có thể xem bài đăng liên quan đến nút tiếp theo của chúng tôi, Bootstrap 4. Nhóm nút

Các nút trong Bootstrap 4 là gì?

Là gì. BTN trong HTML?

Làm cách nào để thêm nút chuyển đổi trong Bootstrap 4?

Làm cách nào để tạo nút phản hồi trong Bootstrap?