Di atas perancah, elemen HTML asas digayakan dan dipertingkatkan dengan kelas yang boleh diperluas untuk memberikan rupa dan rasa yang segar dan konsisten.
Keseluruhan grid tipografi adalah berdasarkan dua Kurang pembolehubah dalam fail pembolehubah kami.less: @baseFontSizedan @baseLineHeight. Yang pertama ialah saiz fon asas yang digunakan sepanjang dan yang kedua ialah ketinggian garis asas.
Kami menggunakan pembolehubah tersebut, dan beberapa matematik, untuk mencipta jidar, pelapik dan ketinggian garis semua jenis kami dan banyak lagi.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Jadikan perenggan menonjol dengan menambah .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ini bukan commodo luctus.
| unsur | Penggunaan | Pilihan |
|---|---|---|
<strong> |
Untuk menekankan coretan teks dengan penting | tiada |
<em> |
Untuk menekankan coretan teks dengan tekanan | tiada |
<abbr> |
Membungkus singkatan dan akronim untuk menunjukkan versi dikembangkan pada tuding | Sertakan .initialismkelas untuk singkatan huruf besar. |
<address> |
Untuk maklumat hubungan untuk nenek moyang terdekat atau seluruh badan kerja | Kekalkan pemformatan dengan menamatkan semua baris dengan<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Nota: Jangan ragu untuk menggunakan <b>dan <i>dalam HTML5, tetapi penggunaannya telah berubah sedikit. <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.
Berikut ialah dua contoh cara <address>teg boleh digunakan:
Singkatan dengan titleatribut mempunyai sempadan bawah titik terang dan kursor bantuan pada tuding. Ini memberi pengguna petunjuk tambahan bahawa sesuatu akan ditunjukkan pada tuding.
Tambahkan initialismkelas pada singkatan untuk meningkatkan keharmonian tipografi dengan memberikan saiz teks yang lebih kecil sedikit.
HTML adalah perkara terbaik sejak roti dihiris.
Singkatan perkataan atribut ialah attr .
| unsur | Penggunaan | Pilihan |
|---|---|---|
<blockquote> |
Elemen peringkat blok untuk memetik kandungan daripada sumber lain | Tambahkan .pull-leftdan .pull-rightkelas untuk pilihan terapung |
<small> |
Elemen pilihan untuk menambah petikan yang dihadapi pengguna, biasanya pengarang dengan tajuk kerja | Letakkan di <cite>sekeliling tajuk atau nama sumber |
Untuk memasukkan petikan sekatan, bungkus <blockquote>mana-mana HTML sebagai petikan. Untuk petikan lurus kami mengesyorkan <p>.
Sertakan <small>elemen pilihan untuk memetik sumber anda dan anda akan mendapat sempang em di —hadapannya untuk tujuan penggayaan.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Seseorang yang terkenal </small>
- </blockquote>
Petikan blok lalai digayakan seperti itu:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Seseorang yang terkenal dalam Badan kerja
Untuk mengapungkan petikan blok anda ke kanan, tambahkan class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Seseorang yang terkenal dalam Badan kerja
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Angkat kepala! Senarai perihalan mendatar akan memotong istilah yang terlalu panjang untuk dimuatkan dalam pembetulan lajur kiri text-overflow. Dalam ruang pandang yang lebih sempit, ia akan bertukar kepada susun atur bertindan lalai.
Balut coretan sebaris kod dengan <code>.
- Sebagai contoh , bahagian <code> </ code > hendaklah dibalut sebagai sebaris .
Gunakan <pre>untuk berbilang baris kod. Pastikan anda melepaskan sebarang kurungan sudut dalam kod untuk pemaparan yang betul.
<p>Contoh teks di sini...</p>
- <pra>
- <p>Contoh teks di sini...</p>
- </pre>
Nota: Pastikan anda menyimpan kod dalam <pre>teg sedekat mungkin di sebelah kiri; ia akan memaparkan semua tab.
Anda boleh menambah .pre-scrollablekelas secara pilihan yang akan menetapkan ketinggian maksimum 350px dan menyediakan bar skrol paksi-y.
Ambil <pre>elemen yang sama dan tambahkan dua kelas pilihan untuk pemaparan yang dipertingkatkan.
- <p> Contoh teks di sini... </p>
- <pra kelas = "prettyprint
- linenum" >
- <p>Contoh teks di sini...</p>
- </pre>
Muat turun google-code-prettify dan lihat readme untuk cara menggunakannya.
| Tag | Penerangan |
|---|---|
<table> |
Elemen pembalut untuk memaparkan data dalam format jadual |
<thead> |
Elemen bekas untuk baris pengepala jadual ( <tr>) untuk melabel lajur jadual |
<tbody> |
Unsur bekas untuk baris jadual ( <tr>) dalam badan jadual |
<tr> |
Elemen bekas untuk set sel jadual ( <td>atau <th>) yang muncul pada satu baris |
<td> |
Sel jadual lalai |
<th> |
Sel jadual khas untuk label lajur (atau baris, bergantung pada skop dan peletakan) Mesti digunakan dalam a <thead> |
<caption> |
Perihalan atau ringkasan tentang kandungan jadual, terutamanya berguna untuk pembaca skrin |
- <jadual>
- <kepala>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ jadual>
| Nama | Kelas | Penerangan |
|---|---|---|
| Lalai | tiada | Tiada gaya, hanya lajur dan baris |
| asas | .table |
Hanya garis mendatar antara baris |
| Bersempadan | .table-bordered |
Membundarkan sudut dan menambah sempadan luar |
| Belang belang | .table-striped |
Menambahkan warna latar belakang kelabu muda pada baris ganjil (1, 3, 5, dll) |
| pekat | .table-condensed |
Memotong padding menegak separuh, daripada 8px kepada 4px, dalam semua tddan thelemen |
Jadual digayakan secara automatik dengan hanya beberapa sempadan untuk memastikan kebolehbacaan dan mengekalkan struktur. Dengan 2.0, .tablekelas diperlukan.
- <table class = "jadual" >
- …
- </ jadual>
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung |
Dapatkan sedikit kemewahan dengan jadual anda dengan menambahkan jalur zebra—hanya tambah .table-stripedkelas.
Nota: Jadual berjalur menggunakan :nth-childpemilih CSS dan tidak tersedia dalam IE7-IE8.
- <table class = "jalur meja meja" >
- …
- </ jadual>
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung |
Tambahkan jidar di sekeliling seluruh meja dan sudut bulat untuk tujuan estetik.
- <table class = "table table-bordered" >
- …
- </ jadual>
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| Tandakan | Otto | @getbootstrap | |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry the Bird | ||
Jadikan jadual anda lebih padat dengan menambah .table-condensedkelas untuk memotong padding sel meja kepada separuh (daripada 8px kepada 4px).
- <table class = "table table-condensed" >
- …
- </ jadual>
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry the Bird | ||
Jangan ragu untuk menggabungkan mana-mana kelas jadual untuk mencapai rupa yang berbeza dengan menggunakan mana-mana kelas yang tersedia.
- <table class = "table table-jalur meja-sempadan meja-memadatkan" >
- ...
- </ jadual>
| Nama penuh | |||
|---|---|---|---|
| # | Nama pertama | Nama terakhir | Nama pengguna |
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry the Bird | ||
Bahagian terbaik tentang borang dalam Bootstrap ialah semua input dan kawalan anda kelihatan hebat tidak kira bagaimana anda membinanya dalam markup anda. Tiada HTML berlebihan diperlukan, tetapi kami menyediakan corak untuk mereka yang memerlukannya.
Reka letak yang lebih rumit disertakan dengan kelas yang ringkas dan berskala untuk penggayaan yang mudah dan pengikatan acara, jadi anda dilindungi pada setiap langkah.
Bootstrap datang dengan sokongan untuk empat jenis susun atur borang:
Jenis reka letak borang yang berbeza memerlukan beberapa perubahan pada penandaan, tetapi kawalan itu sendiri kekal dan berkelakuan sama.
Borang Bootstrap termasuk gaya untuk semua kawalan bentuk asas seperti input, kawasan teks dan pilihan yang anda harapkan. Tetapi ia juga disertakan dengan beberapa komponen tersuai seperti input yang dilampirkan dan didahulukan serta sokongan untuk senarai kotak pilihan.
Keadaan seperti ralat, amaran dan kejayaan disertakan untuk setiap jenis kawalan borang. Turut disertakan ialah gaya untuk kawalan orang kurang upaya.
Bootstrap menyediakan penanda dan gaya mudah untuk empat gaya borang web biasa.
| Nama | Kelas | Penerangan |
|---|---|---|
| Menegak (lalai) | .form-vertical (tidak dikehendaki) |
Label bertindan, dijajar ke kiri atas kawalan |
| Dalam barisan | .form-inline |
Label dijajar kiri dan kawalan blok sebaris untuk gaya padat |
| Cari | .form-search |
Input teks yang lebih bulat untuk estetika carian biasa |
| Mendatar | .form-horizontal |
Terapung kiri, label dijajar kanan pada baris yang sama dengan kawalan |
Lalai pintar dan ringan tanpa penanda tambahan.
- <form class = "well" >
- <label> Nama label </label>
- <input type = "text" class = "span3" placeholder = "Taip sesuatu…" >
- <span class = "help-block" > Contoh teks bantuan peringkat blok di sini. </span>
- <label class = "kotak semak" >
- < jenis input = "kotak semak" > Semak saya keluar
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
Tambahkan .form-searchpada borang dan .search-querypada input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Cari </button>
- </form>
Tambahkan .form-inlineuntuk menyempurnakan penjajaran menegak dan jarak kawalan borang.
- <form class = "well form-inline" >
- < jenis input = "teks" class = "input-small" pemegang tempat = "E-mel" >
- < jenis input = "kata laluan" kelas = "input-kecil" pemegang tempat = "Kata Laluan" >
- <label class = "kotak semak" >
- < jenis input = "kotak semak" > Ingat saya
- </label>
- <button type = "submit" class = "btn" > Log masuk </button>
- </form>
Ditunjukkan di sebelah kanan adalah semua kawalan borang lalai yang kami sokong. Berikut ialah senarai bertitik tumpu mata:
Memandangkan contoh reka letak borang di atas, berikut ialah penanda yang dikaitkan dengan kumpulan input dan kawalan pertama. Kelas .control-group, .control-label, dan .controlssemuanya diperlukan untuk penggayaan.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Teks lagenda </legend>
- <div class = "kumpulan kawalan" >
- <label class = "control-label" for = "input01" > Input teks </label>
- <div class = "kawalan" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Menyokong teks bantuan </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap menampilkan gaya untuk fokus dan disabledkeadaan yang disokong pelayar. Kami mengalih keluar Webkit lalai outlinedan menggunakan a box-shadowsebagai gantinya untuk :focus.
Ia juga termasuk gaya pengesahan untuk ralat, amaran dan kejayaan. Untuk menggunakan, tambahkan kelas ralat pada sekeliling .control-group.
- <fieldset
- class = "ralat kumpulan kawalan" >
- …
- </fieldset>
Kumpulan input—dengan teks yang dilampirkan atau diprapendi—menyediakan cara mudah untuk memberikan lebih banyak konteks untuk input anda. Contoh hebat termasuk tanda @ untuk nama pengguna Twitter atau $ untuk kewangan.
Sehingga v1.4, Bootstrap memerlukan penanda tambahan di sekeliling kotak pilihan dan radio untuk menyusunnya. Sekarang, perkara mudah untuk mengulangi <label class="checkbox">yang membungkus <input type="checkbox">.
Kotak semak sebaris dan radio juga disokong. Hanya tambah .inlinepada mana-mana .checkboxatau .radiodan anda selesai.
Untuk menggunakan prapend atau tambah input dalam bentuk sebaris, pastikan anda meletakkan .add-ondan inputpada baris yang sama, tanpa ruang.
Untuk menambah teks bantuan untuk input borang anda, sertakan teks bantuan sebaris dengan <span class="help-inline">atau blok teks bantuan dengan <p class="help-block">selepas elemen input.
Daripada menjadikan setiap ikon sebagai permintaan tambahan, kami telah menyusunnya menjadi sprite—sekumpulan imej dalam satu fail yang menggunakan CSS untuk meletakkan imej dengan background-position. Ini adalah kaedah yang sama yang kami gunakan di Twitter.com dan ia telah berfungsi dengan baik untuk kami.
Semua kelas ikon diawali dengan .icon-untuk ruang nama dan skop yang betul, sama seperti komponen kami yang lain. Ini akan membantu mengelakkan konflik dengan alat lain.
Glyphicons telah memberikan kami penggunaan set Halfling dalam kit alat sumber terbuka kami selagi kami menyediakan pautan dan kredit di sini dalam dokumen. Sila pertimbangkan untuk melakukan perkara yang sama dalam projek anda.
Bootstrap menggunakan <i>teg untuk semua ikon, tetapi ia tidak mempunyai kelas kes—hanya awalan yang dikongsi. Untuk menggunakan, letakkan kod berikut di mana-mana sahaja:
- <i class = "icon-search" ></i>
Terdapat juga gaya yang tersedia untuk ikon terbalik (putih), yang disediakan dengan satu kelas tambahan:
- <i class = "icon-search icon-white" ></i>
Terdapat 140 kelas untuk dipilih untuk ikon anda. Cuma tambahkan <i>teg dengan kelas yang betul dan anda sudah bersedia. Anda boleh mendapatkan senarai penuh dalam sprites.less atau di sini dalam dokumen ini.
Angkat kepala! Apabila menggunakan di sebelah rentetan teks, seperti dalam butang atau pautan navigasi, pastikan anda meninggalkan ruang selepas <i>teg untuk jarak yang betul.
Ikon hebat, tetapi di manakah seseorang akan menggunakannya? Berikut adalah beberapa idea:
Pada asasnya, di mana sahaja anda boleh meletakkan <i>tag, anda boleh meletakkan ikon.
Gunakannya dalam butang, kumpulan butang untuk bar alat, navigasi atau input borang yang diprapendi.