Nút radio Mdbootstrap

Nút Radio là một thành phần được sử dụng để cho phép người dùng đưa ra lựa chọn duy nhất trong số nhiều tùy chọn (trong khi Hộp kiểm được sử dụng để chọn nhiều tùy chọn)

Cài đặt

Cài đặt thủ công (gói zip)

Để tận dụng thành phần hình ảnh Bootstrap của chúng tôi và sử dụng chúng trong dự án của bạn, trước tiên bạn cần cài đặt

MDB CLI

Xem Hướng dẫn bắt đầu nhanh của chúng tôi để khám phá và sử dụng toàn bộ tiềm năng của MDB 5 và MDB CLI

NPM

Trước khi bắt đầu dự án, hãy đảm bảo cài đặt Node LTS (12. x. x khuyến nghị)

Để cài đặt MDB UI KIT trong dự án của bạn, hãy dễ dàng gõ lệnh sau trong terminal

npm i mdb-ui-kit 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể nhập toàn bộ thư viện hoặc chỉ các mô-đun riêng lẻ

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để nhập biểu định kiểu MDB, vui lòng sử dụng cú pháp sau

@import '~mdb-ui-kit/css/mdb.min.css'; 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn cũng có thể nhập các mô-đun SCSS riêng lẻ. Để thực hiện đúng cách, chúng tôi khuyên bạn nên sao chép chúng từ vị trí node_modules/mdb-ui-kit/src/scss trực tiếp vào dự án của bạn và nhập theo cách tương tự như các tệp CSS

Bạn có thể tăng tốc đáng kể quá trình tạo một dự án mới dựa trên Webpack bằng Starter của chúng tôi

CDN

Cài đặt qua CDN là một trong những phương pháp dễ dàng nhất để tích hợp MDB UI KIT với dự án của bạn. Chỉ cần sao chép thẻ tập lệnh JS được biên dịch mới nhất và thẻ liên kết CSS từ cdnjs vào ứng dụng

Đừng quên thêm Font Awesome và Roboto font nếu bạn cần. Đây là một mã ví dụ

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

tùy biến

Ví dụ cơ bản

Các hộp kiểm và radio mặc định của trình duyệt được thay thế bằng sự trợ giúp của .form-check, một loạt các lớp cho cả hai loại đầu vào giúp cải thiện bố cục và hành vi của các thành phần HTML của chúng, mang lại khả năng tùy chỉnh cao hơn và tính nhất quán giữa các trình duyệt. Các hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio dùng để chọn một tùy chọn từ nhiều tùy chọn

Về mặt cấu trúc, các <input> và <label> của chúng ta là các phần tử anh em trái ngược với một <input> trong một <label>. Điều này dài dòng hơn một chút vì bạn phải chỉ định các thuộc tính

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

Chúng tôi sử dụng bộ chọn anh chị em (_______1_______6) cho tất cả các tiểu bang <input> của chúng tôi, như

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

@import '~mdb-ui-kit/css/mdb.min.css'; 

<!-- Default radio -->
<div class="form-check">
  <input
    class="form-check-input"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault1"
  />
  <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
</div>

<!-- Default checked radio -->
<div class="form-check">
  <input
    class="form-check-input"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault2"
    checked
  />
  <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tàn tật

Thêm thuộc tính

@import '~mdb-ui-kit/css/mdb.min.css'; 

Nút radio trong bootstrap là gì?

Làm cách nào để tùy chỉnh nút radio trong Bootstrap?

Làm cách nào để tắt nút radio trong Bootstrap?

Làm cách nào để căn chỉnh nút radio và văn bản trong cùng một dòng Bootstrap?