Взаємодія

Як можна вставити піктограму пошуку в Bootstrap?

2024 Від admin

Покроковий посібник із впровадження: Крок 1: додайте Bootstrap і jQuery CDN до тегу <head> перед усіма іншими таблицями стилів, щоб завантажити наш CSS. Крок 2. Додайте тег <div> у тіло HTML із контейнером класу. Крок 3. Тепер додайте будь-який потрібний значок, використовуючи наведений нижче синтаксис, де ім’я — це ім’я гліфікона. 8 травня 2023 р.

HTML

  1. <div class="container">
  2. <div class="input-group">
  3. <input type="text" class="form-control" placeholder="Search for…">
  4. <span class="input-group-btn">
  5. <button class="btn btn-search" type="button"><i class="fa fa-search fa-fw"></i> Search</button>
  6. </span>
  7. </div>
  8. </div>

Підхід:

  1. Перейдіть на офіційний сайт Bootstrap і скопіюйте CDN Bootstrap для CSS, JS, Popper. js і посилання jQuery.
  2. Додайте посилання CDN разом із посиланням на піктограму шрифту всередині тегу <head>.
  3. Додайте клас із bi-bi-icon_name, а потім іменем піктограми.
  1. зазвичай хочуть використовувати <form> для пошуку.
  2. у формі введення типу пошук + кнопка надсилання.
  3. дайте йому гнучкий дисплей.
  4. розмір кнопки, щоб вона була квадратною.
  5. flex: 1 на вході, щоб заповнити розмір, що залишився.
  6. застосуйте будь-яке вирівнювання/заповнення/колір.
  7. додати рамку до форми.

Піктограма Bootstrap 5 усередині компонента введення

  1. Використовуйте поле введення та видаліть елемент <label>.
  2. Якщо ви хочете зберегти заповнювач, додайте placeholder=" " до елемента <input>.
  3. Потім додайте піктограму разом із власним CSS, який правильно розташує піктограму в полі введення.

Покрокова інструкція по впровадженню: Крок 1. Включіть Bootstrap і jQuery CDN у тег <head> перед усіма іншими таблицями стилів, щоб завантажити наш CSS. Крок 2. Додайте тег <div> у тіло HTML із контейнером класу. Крок 3: Тепер додайте будь-яку піктограму, яку хочете, використовуючи наведений нижче синтаксис, де ім’я — це ім’я гліфікона.

Додавання фільтра до пошукового введення за допомогою Bootstrap

  1. Крок 1 – search-filter.html. Скопіюйте та вставте наведений нижче код у search-filter.html. …
  2. Крок 2 – search-filter.css. Завантажте CSS нижче та додайте його на свою веб-сторінку. …
  3. Крок 3. Додайте наступні компоненти на свою веб-сторінку.