Jak mogę dodać glyphicon do pola wprowadzania typu tekstowego? Na przykład chcę mieć 'ikonę-użytkownika' w polu wprowadzania nazwy użytkownika, coś w tym stylu:
We'll get to Bootstrap w sekundę, ale tutaj's podstawowe koncepcje CSS w grze, aby zrobić to samemu. Jak wskazuje [beard of prey points out][beard answer], możesz to zrobić za pomocą CSS poprzez absolutne pozycjonowanie ikony wewnątrz elementu wejściowego. Następnie dodaj padding do obu stron, aby tekst nie nakładał się na ikonę. Tak więc dla następującego HTML:
<input type="text" class="form-control" />
Możesz użyć następującego CSS do wyrównania glifów do lewej i prawej:
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
![css screenshot][css screenshot]
Uwaga: Zakłada to, że używasz glyphicons, ale działa równie dobrze z font-awesome.
Dla FA, po prostu zamień.glyphicon
na.fa
.Z Bootstrapem:
Jak buffer points out, można to osiągnąć natywnie w Bootstrap poprzez użycie Validation States with Optional Icons. Odbywa się to poprzez nadanie elementowi
.form-group
klasy.has-feedback
a ikonie klasy.form-control-feedback
. Najprostszym przykładem może być coś takiego:**Pros**: * Zawiera wsparcie dla różnych typów formularzy (Basic, Horizontal, Inline) * Zawiera wsparcie dla różnych rozmiarów kontrolek (Domyślna, Mała, Duża) **Cons**: * Nie zawiera wsparcia dla wyrównywania ikon do *lewej* linii. Aby przezwyciężyć wady, złożyłem razem ten [pull-request][pull-request] ze zmianami, aby wspierać ikony wyrównane do lewej strony. Ponieważ jest to stosunkowo duża zmiana, została ona odłożona do przyszłego wydania, ale jeśli potrzebujesz tych funkcji **już dziś**, oto prosty przewodnik implementacji: Po prostu dołącz [**te zmiany formularzy w css**][formChangs.css] (także inlined przez ukryty snippet stosu na dole)
<input type="text" class="form-control" placeholder="Username" />
***LESS**: alternatywnie, jeśli budujesz przez less][less compiler], oto'e [zmiany formularzy w less][formChanges.less] Następnie wszystko, co musisz zrobić, to dołączyć klasę `.has-feedback-left` do każdej grupy, która ma klasę `.has-feedback`, aby wyrównać ikonę do lewej. Ponieważ istnieje wiele możliwych konfiguracji html dla różnych typów formularzy, różnych rozmiarów kontrolek, różnych zestawów ikon i różnych widoczności etykiet, stworzyłem stronę testową, która pokazuje poprawny zestaw HTML dla każdej permutacji wraz z demem na żywo. ## [Tutaj'jest demo w Plunkerze][feedback plunker] [![feedback screenshot][feedback screenshot]][feedback embed] **P.S.** [frizi's suggestion][frizi] of adding `pointer-events: none;` has been [added to bootstrap][pointer PR] **Nie znalazłeś tego, czego szukałeś**? Spróbuj tych podobnych pytań: * [Add Twitter Bootstrap icon to Input box][SO1] * [Umieść ikonę wyszukiwania w pobliżu bootstrap textbox][SO2] ### Dodatek CSS dla ikonek zwrotnych wyrównanych do lewej
.has-feedback .form-control {
padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
padding-right: 46px;
}
.has-feedback-left .form-control {
padding-right: 12px;
padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-control-feedback {
line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
top: 0;
}
@media (min-width: 768px) {
.form-inline .inline-feedback {
position: relative;
display: inline-block;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 15px;
}
Oto'e alternatywa oparta tylko na CSS. Ustawiłem to dla pola wyszukiwania, aby uzyskać efekt podobny do Firefoksa (& sto innych aplikacji).
HTML
<div class="col-md-4">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
</div>
CSS
.form-control {
padding-right: 30px;
}
.form-control + .glyphicon {
position: absolute;
right: 0;
padding: 8px 27px;
}
Powinieneś być w stanie to zrobić za pomocą istniejących klas bootstrap i odrobiny niestandardowej stylizacji.
<form>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user"></i>
</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
</div>
Edycja Ikona jest przywoływana przez klasę icon-user
. Ta odpowiedź została napisana w czasie Bootstrap w wersji 2. Możesz zobaczyć odniesienie na następującej stronie: http://getbootstrap.com/2.3.2/base-css.html#images