Nhóm nút radio Bootstrap

Question

Trong bootstrap 4, một nút radio hiển thị các nút tròn nhỏ có thể được chọn hoặc bỏ chọn. Một chấm đen nhỏ xuất hiện trong vòng tròn nếu các lựa chọn được chọn; . Các nút radio là loại trừ lẫn nhau, tôi. e. , khách truy cập chỉ có thể chọn một trong một số tùy chọn. Do đó, nó được sử dụng khi khách truy cập được hỏi một câu hỏi chỉ có thể đúng từ tất cả các lựa chọn như giới tính của một người, tình trạng hôn nhân, v.v.

Nội dung chính Show

Thiết lập Thư viện Bootstrap trong Dự án của bạn
Nhập tệp JavaScript Bootstrap trong Footer
Ví dụ về mẫu khởi động Bootstrap
Ví dụ về nút radio mặc định
Bootstrap Inline Radio Buttons Ví dụ
Tạo nhóm nút radio Bootstrap
Bootstrap Radio Button Toggle State
Thêm kiểu tùy chỉnh vào các nút radio
Bài viết đề xuất
Nhóm nút trong nút radio là gì?
Làm cách nào để sử dụng nhóm nút trong Bootstrap?
Chúng ta có thể tạo một nhóm thành phần nút radio không?
Lớp nào được sử dụng để nhóm các nút lại với nhau trong Bootstrap?

Hãy lấy các ví dụ khác nhau về các nút Radio Bootstrap 4

ví dụ 1

Giải trình

Trong ví dụ trên, chúng tôi đã tạo nút Radio tùy chỉnh với sự trợ giúp của Bootstrap 4. Trong phần này, người dùng đã chọn một chỉ định từ tùy chọn đã cho

Tạo các nút radio với Bootstrap 4 rất dễ dàng, bạn phải thêm lớp đầu vào radio vào các nút radio của mình. Ngoài ra, nếu bạn muốn thêm kiểu mới vào các nút radio của mình, thì bạn cũng có thể sử dụng các trình cắm của bên thứ ba

Thiết lập Thư viện Bootstrap trong Dự án của bạn

Để làm việc với các nút radio bằng Bootstrap, chúng ta cần thiết lập và định cấu hình thư viện Bootstrap 4 UI trong dự án của mình. Tôi khuyên bạn nên sử dụng Bootstrap CDN để thiết lập Bootstrap trong dự án của bạn

Dán mã bên dưới vào phần

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">script>

0 của tệp HTML của bạn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Có rất nhiều thành phần trong Bootstrap phụ thuộc vào jQuery và Popper js. Dán đoạn mã JavaScript sau vào trước thẻ đóng nội dung trong bố cục HTML của bạn. Vui lòng dán theo thứ tự như các tập lệnh được đề cập trong hướng dẫn này

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">script>

Ví dụ về mẫu khởi động Bootstrap


<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!title>
  head>
  <body>
    <h1>Hello, world!h1>
    
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">script>
  body>
html>

Ví dụ về nút radio mặc định

Chúng tôi đã tạo bố cục Bootstrap cơ bản để hiển thị ví dụ về các nút radio. Bây giờ, hãy xem bên dưới, chúng tôi sắp tạo một nhóm các nút radio bằng cách sử dụng lớp Bootstrap

<div class="container">
<strong>Which option do you want to choose?strong>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="a" checked>
   <label class="form-check-label" for="exampleRadios1">
   A
   label>
div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="b">
   <label class="form-check-label" for="exampleRadios2">
   B
   label>
div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="c">
   <label class="form-check-label" for="exampleRadios3">
   C
   label>
div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="d">
   <label class="form-check-label" for="exampleRadios4">
   D
   label>
div>

Ví dụ về nút radio đơn giản với Bootstrap 4

Bootstrap Inline Radio Buttons Ví dụ

Để tạo các nút radio nội tuyến Bootstrap, hãy sử dụng lớp biểu mẫu-check-inline với div bên ngoài các nút radio giống như trong ví dụ bên dưới

<div class="container">
<h4>Which option do you want to choose?h4>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="a" checked>
   <label class="form-check-label" for="exampleRadios1">
   A
   label>
div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="b">
   <label class="form-check-label" for="exampleRadios2">
   B
   label>
div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="c">
   <label class="form-check-label" for="exampleRadios3">
   C
   label>
div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="d">
   <label class="form-check-label" for="exampleRadios4">
   D
   label>
div>

Bản demo của các nút radio nội tuyến

Tạo nhóm nút radio Bootstrap

Để tạo nhóm nút radio trong Bootstrap rất dễ dàng, chỉ cần thêm đoạn mã sau vào bố cục HTML của bạn

Bootstrap Radio Button Toggle State

Để kích hoạt trạng thái hoạt động trong nút radio Bootstrap, chúng ta cần chuyển

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">script>

0 vào nút. bạn nên thêm. lớp đang hoạt động và arai-ép=”true” trong nút để đặt trạng thái chuyển đổi trước của nút

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Toggle Me
button>

<div class="container">
<h4>Which car do you have?h4>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
   <label class="btn btn-secondary active">
   <input type="radio" name="options" id="hatchback" autocomplete="off" checked> Hatchback
   label>
   <label class="btn btn-secondary">
   <input type="radio" name="options" id="sedan" autocomplete="off"> Sedan
   label>
   <label class="btn btn-secondary">
   <input type="radio" name="options" id="suv" autocomplete="off"> SUV
   label>
div>

Kiểm tra bản trình diễn

Thêm kiểu tùy chỉnh vào các nút radio

Có thể dễ dàng thêm kiểu tùy chỉnh cho các nút radio trong bootstrap bằng cách sử dụng trình cắm của bên thứ 3 và css tùy chỉnh. Tôi sẽ tạo một kiểu tùy chỉnh và thêm nó vào các nút radio kiểu trong Bootstrap

Thêm đoạn mã sau vào mẫu HTML của bạn

________số 8

Sau đó, chuyển đến tệp CSS của bạn và bao gồm đoạn mã sau để tạo kiểu cho các nút radio tùy chỉnh trong Bootstrap

body {
  text-align: center;
  padding-top: 25px;
}
.custom-radio-button div {
  display: inline-block;
}
.custom-radio-button input[type="radio"] {
  display: none;
}
.custom-radio-button input[type="radio"] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.custom-radio-button input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
}
.custom-radio-button input[type="radio"] + label span img {
  opacity: 0;
  transition: all 0.3s ease;
}
.custom-radio-button input[type="radio"]#color-red + label span {
  background-color: red;
}
.custom-radio-button input[type="radio"]#color-blue + label span {
  background-color: blue;
}
.custom-radio-button input[type="radio"]#color-orange + label span {
  background-color: orange;
}
.custom-radio-button input[type="radio"]#color-pink + label span {
  background-color: pink;
}
.custom-radio-button input[type="radio"]:checked + label span {
  opacity: 1;
  background: url("https://www.positronx.io/wp-content/uploads/2019/06/tick-icon-4657-01.png")
    center center no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;
}

Kiểm tra bản trình diễn

Cuối cùng, chúng ta đã hoàn thành bài hướng dẫn Radio Buttons với Bootstrap, nếu bạn yêu thích hướng dẫn này thì đừng quên chia sẻ nó với những người khác

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Cách tạo đầu vào tệp tùy chỉnh với tệp Bootstrap Xác thực biểu mẫu InputBootstrap 4 với Trình xác thực. js Hướng dẫn Bootstrap 5 sắp ra mắt, Các tính năng dự kiến / Ngày phát hànhSự khác biệt giữa Bootstrap 3 và 4 là gì?Các phần tử HTML căn giữa theo chiều dọc khi sử dụng Bootstrap 4

Nhóm nút trong nút radio là gì?

Nhóm nút radio xác định bố cục cho các nút trong đó, bao gồm tiêu đề nhóm, căn chỉnh văn bản cho nhãn nút và có hiển thị đường viền hay không. You can place a radio button group control within a section control.

Làm cách nào để sử dụng nhóm nút trong Bootstrap?

Đối với nhóm nút, đây sẽ là role="group" , trong khi thanh công cụ phải có role="toolbar". Ngoài ra, các nhóm và thanh công cụ phải được gắn nhãn rõ ràng, vì hầu hết các công nghệ hỗ trợ sẽ không thông báo chúng, bất chấp sự hiện diện của thuộc tính vai trò chính xác.

Chúng ta có thể tạo một nhóm thành phần nút radio không?

Để tạo từng tùy chọn nút radio, hãy tạo RadioButton trong bố cục của bạn. Tuy nhiên, vì các nút radio loại trừ lẫn nhau nên bạn phải nhóm chúng lại với nhau trong một RadioGroup . Bằng cách nhóm chúng lại với nhau, hệ thống đảm bảo rằng mỗi lần chỉ có thể chọn một nút radio.

Lớp nào được sử dụng để nhóm các nút lại với nhau trong Bootstrap?

“Nhóm nút” trong Bootstrap là một lớp tên “ btn-group ” được sử dụng để tạo chuỗi nút theo nhóm ( .

programming bootstrap

Nhóm nút radio Bootstrap

ví dụ 1

Thiết lập Thư viện Bootstrap trong Dự án của bạn

Nhập tệp JavaScript Bootstrap trong Footer

Ví dụ về mẫu khởi động Bootstrap

Ví dụ về nút radio mặc định

Ví dụ về nút radio đơn giản với Bootstrap 4

Bootstrap Inline Radio Buttons Ví dụ

Bản demo của các nút radio nội tuyến

Tạo nhóm nút radio Bootstrap

Bootstrap Radio Button Toggle State

Thêm kiểu tùy chỉnh vào các nút radio

Bài viết đề xuất

Nhóm nút trong nút radio là gì?

Làm cách nào để sử dụng nhóm nút trong Bootstrap?

Chúng ta có thể tạo một nhóm thành phần nút radio không?

Lớp nào được sử dụng để nhóm các nút lại với nhau trong Bootstrap?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội