Hướng dẫn bootstrap 5 search box with icon - hộp tìm kiếm bootstrap 5 có biểu tượng

Thêm nhận xét/câu hỏi

Nhập thêm 15 ký tự

Tìm hiểu, phát triển và giúp đỡ người khác với BBBOOTSTRAP

Đóng góp cho chúng tôi với một số đoạn trích thú vị tuyệt vời sử dụng HTML, CSS, JavaScript và Bootstrap

Đầu vào hộp tìm kiếm Bootstrap 5 với các biểu tượng bên trong đoạn trích được tạo bởi nhóm BBBOOTSTRAP bằng bootstrap 5. Đoạn trích này là miễn phí và nguồn mở do đó bạn có thể sử dụng nó trong dự án của mình. Dự án

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

Ví dụ cơ bản

Đặt một nút bổ trợ hoặc nút ở hai bên của đầu vào. Bạn cũng có thể đặt một ở cả hai bên của đầu vào. Hãy nhớ đặt

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

@

@example.com

Url vanity của bạn

https://example.com/users/

$.00 .00

@

Url vanity của bạn

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.comspan>
div>

<label for="basic-url" class="form-label">Your vanity URLlabel>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
div>

<div class="input-group mb-3">
  <span class="input-group-text">$span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00span>
div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <span class="input-group-text">@span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
div>

<div class="input-group">
  <span class="input-group-text">With textareaspan>
  <textarea class="form-control" aria-label="With textarea">textarea>
div>

Với Textarea

Gói

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

Các nhóm đầu vào bọc theo mặc định qua

Small

Default

Large

0 để phù hợp với xác thực trường biểu mẫu tùy chỉnh trong một nhóm đầu vào. Bạn có thể vô hiệu hóa điều này với

Small

Default

Large

1.

Kích thước

Thêm các lớp kích thước biểu mẫu tương đối vào chính

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Smallspan>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Defaultspan>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Largespan>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
div>

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Smallspan>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Defaultspan>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Largespan>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
div>

Kích thước trên các yếu tố nhóm đầu vào cá nhân không được hỗ trợ.

Hộp kiểm và radio

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
  div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
div>

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
  div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
div>

Đặt bất kỳ hộp kiểm hoặc tùy chọn radio nào trong nhóm đầu vào addon thay vì văn bản. Chúng tôi khuyên bạn nên thêm

Small

Default

Large

3 vào

Small

Default

Large

4 khi không có văn bản có thể nhìn thấy bên cạnh đầu vào.

Nhiều đầu vào

<div class="input-group">
  <span class="input-group-text">First and last namespan>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
div>

Trong khi nhiều

Small

Default

Large

5 được hỗ trợ trực quan, các kiểu xác thực chỉ có sẵn cho các nhóm đầu vào với một

Small

Default

Large

5.

Nhiều addons

<div class="input-group mb-3">
  <span class="input-group-text">$span>
  <span class="input-group-text">0.00span>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">$span>
  <span class="input-group-text">0.00span>
div>

Nhiều tiện ích bổ sung được hỗ trợ và có thể được trộn với các phiên bản đầu vào hộp kiểm và radio.

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Buttonbutton>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Buttonbutton>
div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Buttonbutton>
  <button class="btn btn-outline-secondary" type="button">Buttonbutton>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
  <button class="btn btn-outline-secondary" type="button">Buttonbutton>
  <button class="btn btn-outline-secondary" type="button">Buttonbutton>
div>

Addons nút

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdownbutton>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdownbutton>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdownbutton>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action beforea>li>
    <li><a class="dropdown-item" href="#">Another action beforea>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdownbutton>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>

Các nút có thả xuống

<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">Actionbutton>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <button type="button" class="btn btn-outline-secondary">Actionbutton>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>

Các nút phân đoạn

Hình thức tùy chỉnh

Tùy chỉnh chọn

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Optionslabel>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Choose...option>
    <option value="1">Oneoption>
    <option value="2">Twooption>
    <option value="3">Threeoption>
  select>
div>

<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect02">
    <option selected>Choose...option>
    <option value="1">Oneoption>
    <option value="2">Twooption>
    <option value="3">Threeoption>
  select>
  <label class="input-group-text" for="inputGroupSelect02">Optionslabel>
div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Buttonbutton>
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...option>
    <option value="1">Oneoption>
    <option value="2">Twooption>
    <option value="3">Threeoption>
  select>
div>

<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...option>
    <option value="1">Oneoption>
    <option value="2">Twooption>
    <option value="3">Threeoption>
  select>
  <button class="btn btn-outline-secondary" type="button">Buttonbutton>
div>

Đầu vào tập tin tùy chỉnh

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

Sass

Biến

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
div>

Làm thế nào bạn có thể chèn biểu tượng tìm kiếm trong Bootstrap 5?