Nhập tìm kiếm Bootstrap 4

Đây là một thiết kế cơ bản của hộp tìm kiếm cho bootstrap nhưng nó đủ hiệu quả để phục vụ mục đích của chúng ta. Đối với một hộp tìm kiếm trang web là một thành phần thiết yếu, vì vậy điều rất quan trọng là phải đơn giản nhưng đúng phong cách để phù hợp với trang web của bạn. Điều này sử dụng bootstrap 4 và các tệp CSS tuyệt vời về phông chữ. Trong HTML. các nhóm đầu vào được sử dụng, lớp là một vùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút ở phía trước hoặc phía sau trường nhập dưới dạng "văn bản trợ giúp", cùng với điều này, bạn có thể sử dụng. input-group-prepend để thêm văn bản trợ giúp trước đầu vào và. input-group-append để thêm nó phía sau đầu vào. Ở đây để tìm kiếm chúng tôi đang sử dụng. has-search không có trong Bootstrap 4. Check out the CSS styling for the search button. Thiết kế này là lý tưởng để có nó trên một trang. Để có nó trên tiêu đề, bạn sẽ phải tinh chỉnh nó một chút

Trong bootstrap 4, hộp tìm kiếm thường là nội dung văn bản hoặc biểu tượng tìm kiếm với tính năng chuyên dụng là chấp nhận đầu vào của người dùng để tìm kiếm trong hộp tìm kiếm. Nó được sử dụng trong nhiều ứng dụng web, trang web ngoài ứng dụng dành cho thiết bị di động và ứng dụng dành cho máy tính để bàn

Đoạn mã này giúp bạn tạo hộp tìm kiếm Bootstrap 4 có biểu tượng. Bạn có thể đặt bất kỳ biểu tượng Font Awesome nào bên trong kiểu nhập văn bản với sự trợ giúp của mã ví dụ này

Cách tạo Hộp tìm kiếm Bootstrap 4 bằng biểu tượng

1. Trước hết, hãy tải Bootstrap và Font Awesome CSS vào tài liệu HTML của bạn

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

2. Tạo cấu trúc HTML cho hộp tìm kiếm như sau

  <!-- Actual search box -->
  <div class="form-group has-search">
    <span class="fa fa-search form-control-feedback"></span>
    <input type="text" class="form-control" placeholder="Search">
  </div>
  
  <!-- Another variation with a button -->
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search this blog">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>

3. Cuối cùng, tạo kiểu cho hộp tìm kiếm của bạn bằng CSS

/* Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

Đó là tất cả. Tôi hy vọng bạn có thể tạo hộp tìm kiếm có biểu tượng. Nếu bạn cần thêm bất kỳ trợ giúp nào, hãy cho tôi biết bằng cách bình luận bên dưới

Lớp .input-group là một vùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút ở phía trước hoặc phía sau trường đầu vào dưới dạng "văn bản trợ giúp"

Sử dụng .input-group-prepend để thêm văn bản trợ giúp phía trước đầu vào và .input-group-append để thêm văn bản trợ giúp phía sau đầu vào

Cuối cùng, thêm lớp .input-group-text để tạo kiểu cho văn bản trợ giúp đã chỉ định

Ví dụ

      @
   

      @example. com
   

Mẹo. Chúng tôi sử dụng lớp tiện ích .mb-3 để đảm bảo rằng nhóm đầu vào có đáy lề phù hợp. Đọc thêm về các lớp tiện ích trong Chương Tiện ích BS4 của chúng tôi

Kích thước nhóm đầu vào

Sử dụng lớp .input-group-sm cho các nhóm đầu vào nhỏ và .input-group-lg cho các nhóm đầu vào lớn

Ví dụ

       Nhỏ
   

      Mặc định
   

      Lớn
   

Nhiều đầu vào và người trợ giúp

Thêm nhiều đầu vào hoặc addons

Ví dụ

      Người
   

      Một
      Hai
      Three
   

Input Group with Checkboxes and Radios

Bạn cũng có thể sử dụng hộp kiểm hoặc nút radio thay vì văn bản

Ví dụ

Nhóm nút đầu vào

Ví dụ

    Nút cơ bản
 

    Đi
 

    OK
    Hủy
 

Nhóm đầu vào với nút thả xuống

Thêm một nút thả xuống trong nhóm đầu vào. Lưu ý rằng bạn không cần. trình bao bọc thả xuống, như bạn thường làm

Ví dụ

    
      Nút thả xuống
    
    

Nhãn nhóm đầu vào

Đặt nhãn bên ngoài nhóm đầu vào và nhớ rằng giá trị của thuộc tính for phải khớp với id của đầu vào

Làm cách nào để thêm biểu tượng tìm kiếm vào trường nhập liệu Bootstrap 4?

Làm cách nào để tạo hộp tìm kiếm trong Bootstrap?

Làm cách nào để nút tìm kiếm hoạt động trong Bootstrap?

Tìm kiếm hoạt động như thế nào trong Bootstrap?