Đầu vào nhãn bootstrap cùng một dòng

Question

Bootstrap hỗ trợ tất cả các loại đầu vào HTML5. văn bản, mật khẩu, ngày giờ, datetime-local, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc

Nội dung chính Show

Bootstrap Textarea
Hộp kiểm Bootstrap
Ví dụ giải thích
Hộp kiểm nội tuyến
Nút radio Bootstrap
Danh sách chọn Bootstrap
Kích thước kiểm soát biểu mẫu
Kiểm soát biểu mẫu với văn bản thuần túy
Phạm vi và tệp điều khiển biểu mẫu
Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?
Có phải mọi đầu vào cần một nhãn?
Làm cách nào để thêm nhãn trong Bootstrap?
Làm cách nào để tạo khoảng trống giữa hai trường đầu vào trong Bootstrap?

Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng

Ví dụ sau chứa ba nút radio. Tùy chọn đầu tiên được chọn theo mặc định và tùy chọn cuối cùng bị tắt

Bootstrap hỗ trợ tất cả các loại đầu vào HTML5. văn bản, mật khẩu, ngày giờ, datetime-local, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc

Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng

Ví dụ sau chứa hai yếu tố đầu vào; . Như chúng tôi đã đề cập trong chương Biểu mẫu, chúng tôi sử dụng lớp .form-control để định kiểu đầu vào với độ rộng đầy đủ và phần đệm phù hợp, v.v.

Ví dụ

Tên.

Mật khẩu.

Try it Yourself »

Bootstrap Textarea

Ví dụ sau chứa một vùng văn bản

Ví dụ

Nhận xét.

Tự mình thử »

Hộp kiểm Bootstrap

Các hộp kiểm được sử dụng nếu bạn muốn người dùng chọn bất kỳ số lượng tùy chọn nào từ danh sách các tùy chọn đặt trước

Ví dụ sau có ba hộp kiểm. Tùy chọn cuối cùng bị vô hiệu hóa

Ví dụ

Tùy chọn 1

Tùy chọn 2

Tùy chọn 3

Try it Yourself »

Ví dụ giải thích

Sử dụng phần tử bao bọc có class="form-check" để đảm bảo lề thích hợp cho nhãn và hộp kiểm

Thêm lớp .form-check-label vào các phần tử nhãn và .form-check-input vào các hộp kiểm định kiểu bên trong vùng chứa .form-check

Hộp kiểm nội tuyến

Sử dụng lớp .form-check-inline nếu bạn muốn các hộp kiểm xuất hiện trên cùng một dòng

Ví dụ

Tùy chọn 1

Tùy chọn 2

Tùy chọn 3

Try it Yourself »

Nút radio Bootstrap

Các nút radio được sử dụng nếu bạn muốn giới hạn người dùng chỉ trong một lựa chọn từ danh sách các tùy chọn đặt trước

Ví dụ sau chứa ba nút radio. Tùy chọn cuối cùng bị vô hiệu hóa

Ví dụ

Tùy chọn 1

Tùy chọn 2

Tùy chọn 3

Try it Yourself »

Đối với các hộp kiểm, hãy sử dụng lớp .form-check-inline nếu bạn muốn các nút radio xuất hiện trên cùng một dòng

Ví dụ

Tùy chọn 1

Tùy chọn 2

Tùy chọn 3

Try it Yourself »

Danh sách chọn Bootstrap

Danh sách chọn được sử dụng nếu bạn muốn cho phép người dùng chọn từ nhiều tùy chọn

Ví dụ sau chứa danh sách thả xuống (danh sách chọn)

Ví dụ

Chọn danh sách.

Tự mình thử »

Kích thước kiểm soát biểu mẫu

Thay đổi kích thước của điều khiển biểu mẫu bằng

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>How to align checkbox and text in same line in bootstraptitle>
  head>
  <body>
   <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Alabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Blabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">C (disabled)label>
  div>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script>

  body>
html>

1 hoặc type="password"0

Ví dụ

Tự mình thử »

Kiểm soát biểu mẫu với văn bản thuần túy

Sử dụng type="password"1 nếu bạn muốn tạo kiểu cho trường nhập dưới dạng văn bản thuần túy

Phạm vi và tệp điều khiển biểu mẫu

Thêm lớp type="password"2 vào type="password"3 hoặc type="password"4 vào type="password"5 để định kiểu điều khiển phạm vi hoặc trường tệp có chiều rộng đầy đủ

Tôi không thể đặt các hộp kiểm và nhãn của mình trên cùng một dòng. Cách bootstrap thích hợp là bọc hộp kiểm trong thẻ nhãn như thế này-

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>How to align checkbox and text in same line in bootstraptitle>
  head>
  <body>

    <li>           
      <label><input type="radio">I am uesing radio method.label>
    li>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script>

  body>
html>

Hãy xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào

Hãy thử sử dụng lớp bootstrap

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>How to align checkbox and text in same line in bootstraptitle>
  head>
  <body>
   <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Alabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Blabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">C (disabled)label>
  div>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script>

  body>
html>

8 hoặc

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>How to align checkbox and text in same line in bootstraptitle>
  head>
  <body>
   <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Alabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Blabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">C (disabled)label>
  div>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script>

  body>
html>

9

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>How to align checkbox and text in same line in bootstraptitle>
  head>
  <body>
   <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Alabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Blabel>
  div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">C (disabled)label>
  div>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script>

  body>
html>

Trong đoạn mã trên, chúng tôi đã sử dụng phương pháp type="text"0 hoặc type="text"1 để căn giữa văn bản căn chỉnh bên dưới hình ảnh

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?

Bạn có thể áp dụng các lớp bootstrap để đáp ứng chiều rộng . Bạn có thể tạo cho nó một đường viền nếu muốn, để làm cho nó trông giống như một đầu vào. Sử dụng textContent thay vì giá trị để truy cập dữ liệu và sử dụng sự kiện tiêu điểm thay vì sự kiện thay đổi. Lưu câu trả lời này.

Có phải mọi đầu vào cần một nhãn?

An element with a type="button" declaration and a valid value attribute does not need a label associated with it.

Làm cách nào để thêm nhãn trong Bootstrap?

Nhãn. Bootstrap'. .

Add

tag in the HTML body with class container..

Declare tag with . label class in html body..

Thêm nhãn khác nhau như. nhãn thành công,. nhãn chính,. nhãn nguy hiểm, các lớp để thêm màu nền cho nhãn

Làm cách nào để tạo khoảng trống giữa hai trường đầu vào trong Bootstrap?

Để tạo khoảng cách giữa hai trường nhập liệu, đặt. biểu mẫu nội tuyến. form-group trong lớp css tạo khoảng trống cho các trường nhập liệu.

programming bootstrap

Đầu vào nhãn bootstrap cùng một dòng

Ví dụ

Bootstrap Textarea

Ví dụ

Hộp kiểm Bootstrap

Ví dụ

Ví dụ giải thích

Hộp kiểm nội tuyến

Ví dụ

Nút radio Bootstrap

Ví dụ

Ví dụ

Danh sách chọn Bootstrap

Ví dụ

Kích thước kiểm soát biểu mẫu

Ví dụ

Kiểm soát biểu mẫu với văn bản thuần túy

Phạm vi và tệp điều khiển biểu mẫu

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?

Có phải mọi đầu vào cần một nhãn?

Làm cách nào để thêm nhãn trong Bootstrap?

Làm cách nào để tạo khoảng trống giữa hai trường đầu vào 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