Elemen HTML dhasar ditata lan ditambah karo kelas sing bisa diperluas.
Kabeh judhul HTML, <h1>
liwat <h6>
kasedhiya.
Standar global Bootstrap font-size
yaiku 14px , kanthi line-height
ukuran 20px . Iki ditrapake kanggo <body>
lan kabeh paragraf. Kajaba iku, <p>
(paragraf) nampa wates ngisor setengah dhuwur garis (10px minangka standar).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit lungguh amet non magna. Donec id elit non mi porta gravida lan eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p> ... </p>
Gawea paragraf kanthi nambahake .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class = "lead" > ... </p>
Skala tipografi adhedhasar rong variabel KURANG ing variabel.kurang : @baseFontSize
lan @baseLineHeight
. Sing pertama yaiku ukuran font dhasar sing digunakake ing saindenging lan sing nomer loro yaiku dhuwur garis dhasar. Kita nggunakake variabel kasebut lan sawetara matematika sing gampang kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane. Kustomisasi lan adaptasi Bootstrap.
Gunakake tag emphasis standar HTML kanthi gaya entheng.
<small>
Kanggo de-emphasizing inline utawa pamblokiran teks, gunakake tag cilik.
Baris teks iki kudu dianggep minangka cetakan sing apik.
<p> <cilik> Baris teks iki kudu dianggep minangka cetakan sing apik. < /p>cilik>
Kanggo nandheske potongan teks kanthi bobot font sing luwih abot.
Cuplikan teks ing ngisor iki diwenehi teks kandel .
<strong> digawe minangka teks kandel </strong>
Kanggo nandheske cuplikan teks kanthi miring.
Cuplikan teks ing ngisor iki digawe minangka teks miring .
<em> diwenehi teks miring </em>
Kepala munggah!Bebas bae kanggo nggunakake <b>
lan <i>
ing HTML5. <b>
tegese kanggo nyorot tembung utawa frase tanpa menehi wigati tambahan nalika <i>
biasane kanggo swara, istilah teknis, lsp.
Nerangake makna liwat werna kanthi sawetara kelas sarana emphasis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
- <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
- <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
- <p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p>
- <p class = "text-success" > Duis mollis, est non commodo luctus, some erat porttitor ligula. </p>
Implementasi gaya saka <abbr>
unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan karo title
atribut duwe wates ngisor titik cahya lan kursor bantuan ing hover, nyedhiyakake konteks tambahan ing hover.
<abbr>
Kanggo teks sing ditambahi ing hover dawa saka singkatan, kalebu title
atribut.
Singkatan saka tembung atribut yaiku attr .
<abbr title = "atribut" > attr </abbr>
<abbr class="initialism">
Tambah .initialism
menyang singkatan kanggo ukuran font sing rada cilik.
HTML minangka sing paling apik wiwit roti irisan.
<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>
Saiki informasi kontak kanggo leluhur paling cedhak utawa kabeh awak karya.
<address>
Simpen format kanthi mungkasi kabeh baris nganggo <br>
.
- <alamat>
- <strong> Twitter, Inc. </strong><br>
- 795 Folsom Ave, Suite 600 <br>
- San Francisco, CA 94107 <br>
- <abbr title = "Telpon" > P: </abbr> (123) 456-7890
- </alamat>
- <alamat>
- <strong> Jeneng Lengkap </strong><br>
- <a href = "mailto:#" > [email protected] </a>
- </alamat>
Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan.
Bungkus HTML<blockquote>
apa wae minangka kutipan. Kanggo kuotasi langsung disaranake a .<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
- </blockquote>
Gaya lan isi owah-owahan kanggo variasi prasaja ing blockquote standar.
Tambah <small>
tag kanggo ngenali sumber. Bungkus jeneng karya sumber ing <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Wong sing misuwur ing Judhul Sumber
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
- <cite> Wong sing misuwur <cite title = "Sumber Judul" > Sumber Judul </cite></small>
- </blockquote>
Gunakake .pull-right
kanggo kutipan blok sing diambang lan didadekake tengen.
- <blockquote class = "tarik-tengen" >
- ...
- </blockquote>
Dhaptar item sing urutan ora penting banget.
- <ul>
- <li> ... </li>
- </ul>
Dhaptar item sing urutan kasebut pancen penting.
- <ol>
- <li> ... </li>
- </ol>
Copot bantalan gawan list-style
lan kiwa ing dhaptar item (mung bocah-bocah langsung).
- <ul class = "ora nganggo gaya" >
- <li> ... </li>
- </ul>
Selehake kabeh item dhaptar ing baris siji karo inline-block
lan sawetara padding cahya.
- <ul class = "inline" >
- <li> ... </li>
- </ul>
Dhaptar istilah kanthi katrangan sing gegandhengan.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Nggawe istilah lan katrangan ing <dl>
baris sisih-by-side.
- <dl class = "dl-horizontal" >
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Kepala munggah!Dhaptar deskripsi horisontal bakal ngethok istilah sing dawa banget kanggo pas karo koreksi kolom kiwa text-overflow
. Ing tampilan sing luwih sempit, dheweke bakal ganti menyang tata letak tumpukan standar.
Bungkus potongan kode inline nganggo <code>
.
<section>
kudu dibungkus minangka inline.
- Contone , < code><section> </ code > kudu dibungkus dadi inline .
Gunakake <pre>
kanggo sawetara baris kode. Aja manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat.
<p>Conto teks ing kene...</p>
- <pre>
- <p>Conto teks ing kene...</p>
- </pre>
Kepala munggah!Pesthekake supaya kode tetep ing <pre>
tag sing paling cedhak ing sisih kiwa; iku bakal nerjemahake kabeh tab.
Sampeyan bisa nambah kelas kanthi opsional .pre-scrollable
sing bakal nyetel dhuwur maksimal 350px lan menehi scrollbar sumbu-y.
Kanggo gaya dhasar - bantalan entheng lan mung pembagi horisontal - tambahake kelas dasar .table
menyang sembarang <table>
.
# | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
---|---|---|---|
1 | Tandhani | Otto | @mdo |
2 | Yakub | Thornton | @lemak |
3 | Larry | si Manuk |
- < kelas tabel = "tabel" >
- …
- </tabel>
Tambah kelas ing ngisor iki menyang kelas .table
dhasar.
.table-striped
Nambahake zebra-striping menyang sembarang baris tabel ing <tbody>
liwat :nth-child
pamilih CSS (ora kasedhiya ing IE7-IE8).
# | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
---|---|---|---|
1 | Tandhani | Otto | @mdo |
2 | Yakub | Thornton | @lemak |
3 | Larry | si Manuk |
- <table class = "table table-striped" >
- …
- </tabel>
.table-bordered
Tambah wates lan sudhut dibunderaké kanggo meja.
# | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
---|---|---|---|
1 | Tandhani | Otto | @mdo |
Tandhani | Otto | @getbootstrap | |
2 | Yakub | Thornton | @lemak |
3 | Larry the Bird |
- <table class = "table table-bordered" >
- …
- </tabel>
.table-hover
Aktifake status hover ing baris tabel ing a <tbody>
.
# | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
---|---|---|---|
1 | Tandhani | Otto | @mdo |
2 | Yakub | Thornton | @lemak |
3 | Larry the Bird |
- <table class = "table table-hover" >
- …
- </tabel>
.table-condensed
Nggawe tabel luwih kompak kanthi ngethok lapisan sel dadi setengah.
# | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
---|---|---|---|
1 | Tandhani | Otto | @mdo |
2 | Yakub | Thornton | @lemak |
3 | Larry the Bird |
- <table class = "table table-condensed" >
- …
- </tabel>
Gunakake kelas kontekstual kanggo warna larik tabel.
kelas | Katrangan |
---|---|
.success |
Nuduhake tumindak sing sukses utawa positif. |
.error |
Nuduhake tumindak mbebayani utawa duweni potensi negatif. |
.warning |
Nuduhake bebaya sing mbutuhake perhatian. |
.info |
Digunakake minangka alternatif kanggo gaya standar. |
# | produk | Pembayaran dijupuk | Status |
---|---|---|---|
1 | TB - Saben wulan | 01/04/2012 | disetujoni |
2 | TB - Saben wulan | 02/04/2012 | ditolak |
3 | TB - Saben wulan | 03/04/2012 | Ditunggu |
4 | TB - Saben wulan | 04/04/2012 | Telpon kanggo konfirmasi |
- ...
- < tr class = "sukses" >
- <td> 1 < /td>
- <td>TB - Saben wulan</ td >
- <td> 01 / 04 / 2012 < /td>
- <td>Disetujoni</ td >
- </ tr >
- ...
Dhaptar unsur HTML tabel sing didhukung lan carane kudu digunakake.
Tag | Katrangan |
---|---|
<table> |
Unsur pambungkus kanggo nampilake data ing format tabular |
<thead> |
Unsur wadhah kanggo baris header tabel ( <tr> ) kanggo label kolom tabel |
<tbody> |
Unsur wadhah kanggo larik meja ( <tr> ) ing awak meja |
<tr> |
Unsur wadhah kanggo sakumpulan sel tabel ( <td> utawa <th> ) sing katon ing baris siji |
<td> |
Sel tabel standar |
<th> |
Sel tabel khusus kanggo label kolom (utawa baris, gumantung saka ruang lingkup lan panggonan) kudu digunakake ing a <thead> |
<caption> |
Katrangan utawa ringkesan apa sing ana ing meja, utamane migunani kanggo maca layar |
- <tabel>
- <caption> ... </caption>
- <sirah>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </head>
- <awak>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </tabel>
Kontrol wangun individu nampa gaya, nanging tanpa kelas dhasar sing dibutuhake <form>
utawa owah-owahan gedhe ing markup. Asil ing tumpukan, label sejajar kiwa ing ndhuwur kontrol formulir.
- <form>
- <fieldset>
- <legend> Legenda </legend>
- <label> Jeneng label </label>
- <input type = "text" placeholder = "Ketik soko…" >
- <span class = "help-block" > Conto teks bantuan tingkat blok ing kene. </span>
- <label class = "kotak centang" >
- <input type = "checkbox" > Priksa kula
- </label>
- <tombol type = "submit" class = "btn" > Kirim </button>
- </fieldset>
- </form>
Klebu karo Bootstrap yaiku telung tata letak formulir opsional kanggo kasus panggunaan umum.
Tambah .form-search
menyang formulir lan .search-query
kanggo <input>
input teks ekstra-dibunderaké.
- <form class = "form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Telusuri </button>
- </form>
Tambah .form-inline
kanggo label kiwa-selaras lan kontrol inline-block kanggo tata letak kompak.
- <form class = "form-inline" >
- <input type = "text" class = "input-cilik" placeholder = "Email" >
- < tipe input = "sandi" class = "input-cilik" placeholder = "Sandhi" >
- <label class = "kotak centang" >
- <input type = "kotak centang" > Elingi aku
- </label>
- <button type = "submit" class = "btn" > Mlebu </button>
- </form>
Label sejajar tengen lan ngambang ing sisih kiwa supaya katon ing baris sing padha karo kontrol. Mbutuhake pangowahan markup paling akeh saka formulir standar:
.form-horizontal
ing wangun.control-group
.control-label
menyang label.controls
kanggo keselarasan sing tepat
- <form class = "form-horizontal" >
- <div class = "kontrol-grup" >
- <label class = "control-label" for = "inputEmail" > Email </label>
- <div class = "kontrol" >
- <input type = "text" id = "inputEmail" placeholder = "Email" >
- </div>
- </div>
- <div class = "kontrol-grup" >
- <label class = "control-label" for = "inputPassword" > Sandi </label>
- <div class = "kontrol" >
- <input type = "sandi" id = "inputPassword" placeholder = "Sandi" >
- </div>
- </div>
- <div class = "kontrol-grup" >
- <div class = "kontrol" >
- <label class = "kotak centang" >
- <input type = "kotak centang" > Elingi aku
- </label>
- <button type = "submit" class = "btn" > Mlebu </button>
- </div>
- </div>
- </form>
Conto kontrol wangun standar sing didhukung ing conto tata letak formulir.
Kontrol formulir sing paling umum, kolom input basis teks. Kalebu dhukungan kanggo kabeh jinis HTML5: teks, sandi, datetime, datetime-lokal, tanggal, sasi, wektu, minggu, nomer, email, url, telusuran, tel, lan werna.
Mbutuhake nggunakake tartamtu type
ing kabeh wektu.
- <input type = "text" placeholder = "Input teks" >
Kontrol formulir sing ndhukung pirang-pirang baris teks. Ganti rows
atribut yen perlu.
- <textarea rows = "3" ></textarea>
Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar nalika radio kanggo milih siji opsi saka akeh.
- <label class = "kotak centang" >
- < tipe input = "kotak centhang" nilai = "" >
- Opsi siji yaiku iki lan iki - manawa sampeyan kudu nyakup kenapa apik banget
- </label>
- <label class = "radio" >
- <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" dicenthang >
- Opsi siji yaiku iki lan iki - manawa sampeyan kudu nyakup kenapa apik banget
- </label>
- <label class = "radio" >
- <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
- Opsi loro bisa dadi liya lan milih bakal mbatalake pilihan siji
- </label>
Tambah .inline
kelas menyang seri kothak utawa radio kanggo kontrol katon ing baris sing padha.
- <label class = "kotak centang inline" >
- < tipe input = "kotak centang" id = "inlineCheckbox1" nilai = "pilihan1" > 1
- </label>
- <label class = "kotak centang inline" >
- <masukan < tipe = "kotak centang" id = "inlineCheckbox2" nilai = "pilihan2" > 2
- </label>
- <label class = "kotak centang inline" >
- < tipe input = "kotak centang" id = "inlineCheckbox3" nilai = "pilihan3" > 3
- </label>
Gunakake pilihan standar utawa nemtokake a multiple="multiple"
kanggo nuduhake sawetara opsi bebarengan.
- <pilih>
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </pilih>
- <select multiple = "multiple" >
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </pilih>
Nambahake ing ndhuwur kontrol browser sing ana, Bootstrap kalebu komponen wangun migunani liyane.
Tambah teks utawa tombol sadurunge utawa sawise input adhedhasar teks. Elinga yenselect
unsur ora didhukung ing kene.
Bungkus an .add-on
lan an input
karo salah siji saka rong kelas kanggo prepend utawa nambah teks menyang input.
- <div class = "input-prepend" >
- <span class = "add-on" > @ </span>
- <input class = "span2" id = "prependedInput" type = "text" placeholder = "Jeneng pangguna" >
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInput" type = "teks" >
- <span class = "add-on" > .00 </span>
- </div>
Gunakake loro kelas lan rong conto .add-on
kanggo prepend lan nambah input.
- <div class = "input-prepend input-append" >
- <span class = "add-on" > $ </span>
- <input class = "span2" id = "appendedPrependedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </div>
Tinimbang a <span>
karo teks, nggunakake a .btn
masang tombol (utawa loro) kanggo input.
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButton" type = "teks" >
- <button class = "btn" type = "button" > Go! </tombol>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButtons" type = "teks" >
- <button class = "btn" type = "button" > Telusuri </button>
- <button class = "btn" type = "button" > Pilihan </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedDropdownButton" type = "text" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Tumindak
- <span class = "caret" ></span>
- </tombol>
- <ul class = "menu dropdown" >
- ...
- </ul>
- </div>
- </div>
- <div class = "input-prepend" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Tumindak
- <span class = "caret" ></span>
- </tombol>
- <ul class = "menu dropdown" >
- ...
- </ul>
- </div>
- <input class = "span2" id = "prependedDropdownButton" type = "text" >
- </div>
- <div class = "input-prepend input-append" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Tumindak
- <span class = "caret" ></span>
- </tombol>
- <ul class = "menu dropdown" >
- ...
- </ul>
- </div>
- <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Tumindak
- <span class = "caret" ></span>
- </tombol>
- <ul class = "menu dropdown" >
- ...
- </ul>
- </div>
- </div>
- <form>
- <div class = "input-prepend" >
- <div class = "btn-group" > ... </div>
- < tipe input = "teks" >
- </div>
- <div class = "input-append" >
- < tipe input = "teks" >
- <div class = "btn-group" > ... </div>
- </div>
- </form>
- <form class = "form-search" >
- <div class = "input-append" >
- <input type = "text" class = "span2 search-query" >
- <button type="submit" class="btn">Search</button>
- </div>
- <div class="input-prepend">
- <button type="submit" class="btn">Search</button>
- <input type="text" class="span2 search-query">
- </div>
- </form>
Use relative sizing classes like .input-large
or match your inputs to the grid column sizes using .span*
classes.
Make any <input>
or <textarea>
element behave like a block level element.
- <input class="input-block-level" type="text" placeholder=".input-block-level">
- <input class="input-mini" type="text" placeholder=".input-mini">
- <input class="input-small" type="text" placeholder=".input-small">
- <input class="input-medium" type="text" placeholder=".input-medium">
- <input class="input-large" type="text" placeholder=".input-large">
- <input class="input-xlarge" type="text" placeholder=".input-xlarge">
- <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large
will increase the padding and font-size of an input.
Use .span1
to .span12
for inputs that match the same sizes of the grid columns.
- <input class="span1" type="text" placeholder=".span1">
- <input class="span2" type="text" placeholder=".span2">
- <input class="span3" type="text" placeholder=".span3">
- <select class="span1">
- ...
- </select>
- <select class="span2">
- ...
- </select>
- <select class="span3">
- ...
- </select>
For multiple grid inputs per line, use the .controls-row
modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.
- <div class="controls">
- <input class="span5" type="text" placeholder=".span5">
- </div>
- <div class="controls controls-row">
- <input class="span4" type="text" placeholder=".span4">
- <input class="span1" type="text" placeholder=".span1">
- </div>
- ...
Present data in a form that's not editable without using actual form markup.
- <span class="input-xlarge uneditable-input">Some value here</span>
End a form with a group of actions (buttons). When placed within a .form-horizontal
, the buttons will automatically indent to line up with the form controls.
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">Save changes</button>
- <button type="button" class="btn">Cancel</button>
- </div>
Inline and block level support for help text that appears around form controls.
- <input type="text"><span class="help-inline">Inline help text</span>
- <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
Provide feedback to users or visitors with basic feedback states on form controls and labels.
We remove the default outline
styles on some form controls and apply a box-shadow
in its place for :focus
.
- <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
Style inputs via default browser functionality with :invalid
. Specify a type
and add the required
attribute.
- <input class="span3" type="email" required>
Add the disabled
attribute on an input to prevent user input and trigger a slightly different look.
- <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group
.
- <div class="control-group warning">
- <label class="control-label" for="inputWarning">Input with warning</label>
- <div class="controls">
- <input type="text" id="inputWarning">
- <span class="help-inline">Something may have gone wrong</span>
- </div>
- </div>
- <div class="control-group error">
- <label class="control-label" for="inputError">Input with error</label>
- <div class="controls">
- <input type="text" id="inputError">
- <span class="help-inline">Please correct the error</span>
- </div>
- </div>
- <div class="control-group success">
- <label class="control-label" for="inputSuccess">Input with success</label>
- <div class="controls">
- <input type="text" id="inputSuccess">
- <span class="help-inline">Woohoo!</span>
- </div>
- </div>
Add classes to an <img>
element to easily style images in any project.
- <img src="..." class="img-rounded">
- <img src="..." class="img-circle">
- <img src="..." class="img-polaroid">
Heads up! .img-rounded
and .img-circle
do not work in IE7-8 due to lack of border-radius
support.
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
All icons require an <i>
tag with a unique class, prefixed with icon-
. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
- <i class="icon-search icon-white"></i>
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i>
tag for proper spacing.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn" href="#"><i class="icon-align-left"></i></a>
- <a class="btn" href="#"><i class="icon-align-center"></i></a>
- <a class="btn" href="#"><i class="icon-align-right"></i></a>
- <a class="btn" href="#"><i class="icon-align-justify"></i></a>
- </div>
- </div>
- <div class="btn-group">
- <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
- <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
- <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="i"></i> Make admin</a></li>
- </ul>
- </div>
- <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
- <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
- <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
- <ul class="nav nav-list">
- <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
- <li><a href="#"><i class="icon-book"></i> Library</a></li>
- <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
- <li><a href="#"><i class="i"></i> Misc</a></li>
- </ul>
- <div class="control-group">
- <label class="control-label" for="inputIcon">Email address</label>
- <div class="controls">
- <div class="input-prepend">
- <span class="add-on"><i class="icon-envelope"></i></span>
- <input class="span2" id="inputIcon" type="text">
- </div>
- </div>
- </div>