Skala tipografi

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.

Contoh teks isi kandungan

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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Menggunakan penekanan

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.

Contoh alamat

Berikut ialah dua contoh cara <address>teg boleh digunakan:

Contoh singkatan

Singkatan digayakan dengan teks huruf besar dan sempadan bawah bertitik terang. Mereka juga mempunyai kursor bantuan pada tuding supaya pengguna mempunyai petunjuk tambahan sesuatu akan ditunjukkan pada tuding.

HTML adalah perkara terbaik sejak roti dihiris.

Singkatan perkataan atribut ialah attr .

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

Tidak tertib

<ul>

• Lorem ipsum dolor duduk amet
• Consectetur adipiscing elit
• Integer molestie lorem dan massa
• Facilisis dalam pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean duduk amet erat nunc
• Eget porttitor lorem

Tidak bergaya

<ul class="unstyled">

• Lorem ipsum dolor duduk amet
• Consectetur adipiscing elit
• Integer molestie lorem dan massa
• Facilisis dalam pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean duduk amet erat nunc
• Eget porttitor lorem

Mengarahkan

<ol>

1. Lorem ipsum dolor duduk amet
2. Consectetur adipiscing elit
3. Integer molestie lorem dan massa
4. Facilisis dalam pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean duduk amet erat nunc
8. Eget porttitor lorem

Penerangan

<dl>

Senarai penerangan

Senarai huraian sesuai untuk menentukan istilah.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Dalam barisan

Balut coretan sebaris kod dengan <code>.

Sebagai contoh , bahagian <code> </ code > hendaklah dibalut sebagai sebaris .  

Blok asas

Gunakan <pre>untuk berbilang baris kod. Pastikan anda menukar mana-mana karet ke dalam aksara unicode mereka 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.

Google Prettify

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.

<jadual>
  <kepala>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </head>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ jadual>

Jadual digayakan secara automatik dengan hanya beberapa sempadan untuk memastikan kebolehbacaan dan mengekalkan struktur. Dengan 2.0, .tablekelas diperlukan.

<table class = "jadual" > 
  …
</ jadual>

Dapatkan sedikit kemewahan dengan jadual anda dengan menambahkan jalur zebra—hanya tambah .table-stripedkelas.

Nota: Jadual Sprited menggunakan :nth-childpemilih CSS dan tidak tersedia dalam IE7-IE8.

<table class = "jalur meja meja" > 
  …
</ jadual>

Tambahkan jidar di sekeliling seluruh meja dan sudut bulat untuk tujuan estetik.

<table class = "table table-bordered" > 
  …
</ jadual>

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>

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>

HTML dan CSS yang fleksibel

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.

Empat susun atur disertakan

Bootstrap datang dengan sokongan untuk empat jenis susun atur borang:

• Menegak (lalai)
• Cari
• Dalam barisan
• Mendatar

Jenis reka letak borang yang berbeza memerlukan beberapa perubahan pada penandaan, tetapi kawalan itu sendiri kekal dan berkelakuan sama.

Keadaan kawalan dan banyak lagi

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.

Dengan v2.0, kami mempunyai lalai yang lebih ringan dan lebih pintar untuk gaya borang. Tiada markup tambahan, hanya kawalan borang.

Mencerminkan gaya WebKit lalai, cuma tambah .form-searchuntuk medan carian bulat tambahan.

Input adalah tahap blok untuk dimulakan. Untuk .form-inlinedan .form-horizontal, kami menggunakan blok sebaris.

Apa yang disertakan

Ditunjukkan di sebelah kiri adalah semua kawalan borang lalai yang kami sokong. Berikut ialah senarai bertitik tumpu mata:

• input teks (teks, kata laluan, e-mel, dll)
• kotak semak
• radio
• pilih
• berbilang pilih
• input fail
• textarea

Lalai baharu dengan v2.0

Sehingga v1.4, gaya bentuk lalai Bootstrap menggunakan reka letak mendatar. Dengan Bootstrap 2, kami mengalih keluar kekangan itu untuk mempunyai lalai yang lebih pintar dan berskala untuk sebarang bentuk.

Keadaan penyemak imbas yang direka bentuk semula

Bootstrap menampilkan gaya untuk fokus dan disabledkeadaan yang disokong pelayar. Kami mengalih keluar Webkit lalai outlinedan menggunakan a box-shadowdi tempatnya untuk :focus.

Pengesahan borang

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>

Sediakan & tambah input

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.

Kotak semak dan radio

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.

Borang sebaris dan tambah/tambah

Untuk menggunakan prapend atau tambah input dalam bentuk sebaris, pastikan anda meletakkan .add-ondan inputpada baris yang sama, tanpa ruang.

Teks bantuan bentuk

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.

Butang untuk tindakan

Sebagai konvensyen, butang hanya boleh digunakan untuk tindakan manakala hiperpautan akan digunakan untuk objek. Contohnya, "Muat Turun" hendaklah menjadi butang manakala "aktiviti terkini" hendaklah menjadi pautan.

Untuk sauh dan borang

Gaya butang boleh digunakan pada apa-apa sahaja dengan .btnditerapkan. Walau bagaimanapun, biasanya anda akan mahu menggunakan ini hanya pada elemen <a>dan .<button>

Nota: Semua butang mesti termasuk .btnkelas. Gaya butang harus digunakan <button>dan <a>elemen untuk konsistensi.

Pelbagai saiz

Inginkan butang yang lebih besar atau lebih kecil? Punyalah!

Tindakan utama Tindakan

Tindakan utama Tindakan

Keadaan kurang upaya

Untuk butang yang dilumpuhkan, gunakan .btn-disableduntuk pautan dan :disableduntuk <button>elemen.

Tindakan utama Tindakan

Tindakan utama Tindakan

Keserasian silang pelayar

Dalam IE9, kami menjatuhkan kecerunan pada semua butang yang memihak kepada sudut bulat kerana IE9 tidak memangkas kecerunan latar belakang ke sudut.

Berkaitan, IE9 menghapuskan buttonelemen yang dilumpuhkan, menjadikan teks berwarna kelabu dengan bayangan teks yang jahat—malangnya kami tidak dapat membetulkannya.

Dibina sebagai sprite

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.

Bagaimana nak guna

Dengan v2.0.0, kami telah memilih untuk menggunakan <i>teg untuk semua ikon kami, 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 120 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.

Kes guna

Ikon hebat, tetapi di manakah seseorang akan menggunakannya? Berikut adalah beberapa idea:

• Sebagai visual untuk navigasi bar sisi anda
• Untuk navigasi dipacu ikon semata-mata
• Untuk butang untuk membantu menyampaikan maksud tindakan
• Dengan pautan untuk berkongsi konteks pada destinasi pengguna

Pada asasnya, di mana sahaja anda boleh meletakkan <i>tag, anda boleh meletakkan ikon.

Segarkan semula Checkout Padam

Komen tetapan Maklumat Lanjut