Wie formatiere ich Sucheingaben mit Symbolen in Bootstrap?-CSS-Tutorial-php.cn

Wie formatiere ich Sucheingaben mit Symbolen in Bootstrap?

Mary-Kate Olsen

Freigeben： 2024-11-12 13:41:01

Original

1019 Leute haben es durchsucht

How to Style Search Inputs With Icons in Bootstrap?

Sucheingaben mit Symbolen in Bootstrap gestalten

Bootstrap 4 hat die Unterstützung für Glyphicons eingestellt, es gibt jedoch immer noch Möglichkeiten, Symbole in Sucheingaben zu integrieren . Hier sind ein paar Ansätze:

Eingabegruppen verwenden:

Bootstrap 5:

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Nach dem Login kopieren

Bootstrap 4:

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

Nach dem Login kopieren

Positionierung des Symbols innerhalb der Eingabe:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

Nach dem Login kopieren

Eingabegruppentext ohne Hintergrund verwenden:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

Nach dem Login kopieren

Andere Optionen:

Rastersystem:

<div class="row no-gutters">
  <div class="col">
    <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

Nach dem Login kopieren

Symbol voranstellen:

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="...">

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie formatiere ich Sucheingaben mit Symbolen in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!