Hướng dẫn input file bootstrap 5 - tập tin đầu vào bootstrap 5

Thí dụ

Địa chỉ email

Ví dụ Textarea

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email addresslabel>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="">
div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarealabel>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">textarea>
div>

Kích thước

Đặt chiều cao bằng các lớp như

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

3 và

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

4.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

Vô hiệu hóa

Thêm thuộc tính boolean

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

5 trên đầu vào để cung cấp cho nó một hình dạng màu xám và xóa các sự kiện con trỏ.

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

Chỉ đọc

Thêm thuộc tính boolean

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

6 trên đầu vào để ngăn chặn sửa đổi giá trị đầu vào.

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

Văn bản đơn giản

Nếu bạn muốn có các phần tử

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

7 trong biểu mẫu của bạn được tạo kiểu dưới dạng văn bản thuần túy, hãy sử dụng lớp

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

8 để loại bỏ kiểu dáng trường biểu mẫu mặc định và bảo tồn lề và đệm chính xác.

  <div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Emaillabel>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="">
    div>
  div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Passwordlabel>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    div>
  div>

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Emaillabel>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Passwordlabel>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identitybutton>
  div>
form>

Đầu vào tập tin

Ví dụ đầu vào tệp mặc định

Ví dụ đầu vào nhiều tệp

Ví dụ đầu vào tệp bị vô hiệu hóa

Ví dụ đầu vào tệp nhỏ

Ví dụ đầu vào tệp lớn

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input examplelabel>
  <input class="form-control" type="file" id="formFile">
div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input examplelabel>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input examplelabel>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input examplelabel>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
div>
<div>
  <label for="formFileLg" class="form-label">Large file input examplelabel>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
div>

Màu sắc

Người chọn màu

<label for="exampleColorInput" class="form-label">Color pickerlabel>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Datalists

Datalists cho phép bạn tạo một nhóm

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

9 có thể được truy cập (và tự động hoàn thành) từ trong vòng

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

0. Chúng tương tự như các yếu tố

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

1, nhưng đi kèm với nhiều giới hạn và sự khác biệt về kiểu dáng menu. Trong khi hầu hết các trình duyệt và hệ điều hành bao gồm một số hỗ trợ cho các yếu tố ____22, kiểu dáng của chúng không nhất quán nhất.

Tìm hiểu thêm về hỗ trợ cho các yếu tố dữ liệu.

Ví dụ về Datalist

<label for="exampleDataList" class="form-label">Datalist examplelabel>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
datalist>

Sass

Biến

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

3 được chia sẻ trên hầu hết các điều khiển biểu mẫu của chúng tôi (và không phải nút).

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              $white;
$input-disabled-bg:                     $gray-200;
$input-disabled-border-color:           null;

$input-color:                           $body-color;
$input-border-color:                    $gray-400;
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      $box-shadow-inset;

$input-border-radius:                   $border-radius;
$input-border-radius-sm:                $border-radius-sm;
$input-border-radius-lg:                $border-radius-lg;

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               $gray-600;
$input-plaintext-color:                 $body-color;

$input-height-border:                   $input-border-width * 2;

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

4 và

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

5 dành cho thành phần

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

6 và

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

7 của chúng tôi.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

0

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

1

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

8 dành cho đầu vào tệp.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

2