Stiluri de butoane
Bootstrap oferă șapte stiluri de butoane:
de de
Pentru a realiza stiluri butonul de mai sus, Bootstrap are următoarele clase:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
Următorul exemplu arată codul pentru diferite stiluri buton:
Exemplu
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> Încearcă - l singur » Clasele de buton poate fi utilizat pe un <a> , <button> sau <input> Element:
Exemplu
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button"> Încearcă - l singur » De ce am pus un # în href atributul de link - ul?
Din moment ce nu au nici o pagină să - l conectați, și nu doriți să obțineți un "404" mesaj, am pus # ca link - ul. În viața reală ar fi, desigur , un URL real pentru "Search" pagina.
Dimensiuni Button
Bootstrap oferă patru dimensiuni buton:
Clasele care definesc diferitele dimensiuni sunt:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
Următorul exemplu arată codul de diferite dimensiuni buton:
Exemplu
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Încearcă - l singur » Butoane Bloc de nivel
Un buton de nivel de bloc se întinde pe întreaga lățime a elementului mamă.
Adăugați clasa .btn-block pentru a crea un buton nivel de bloc:
Exemplu
<button type="button" class="btn btn-primary btn-block">Button 1</button> Încearcă - l singur » Butoanele active / handicap
Un buton poate fi setat la un activ (appear pressed) sau un handicap (unclickable) de stat:
Clasa .active face ca un buton să apară apăsat, iar clasa .disabled face un buton da clic pe :
Exemplu
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
Complet Bootstrap Butonul de referință
Pentru o referință completă a tuturor claselor buton, du - te pentru a completa nostru Bootstrap Buton de referință .