Contoh permulaan cepat

Perlukan beberapa templat pantas? Lihat contoh asas yang telah kami kumpulkan:

Grid lalai

Sistem grid lalai yang disediakan sebagai sebahagian daripada Bootstrap ialah grid 16 lajur lebar 940px. Ia adalah perisa sistem grid 960 yang popular, tetapi tanpa margin/padding tambahan di sebelah kiri dan kanan.

Contoh penanda grid

Seperti yang ditunjukkan di sini, reka letak asas boleh dibuat dengan dua "lajur", setiap satu merangkumi sejumlah 16 lajur asas yang kami takrifkan sebagai sebahagian daripada sistem grid kami. Lihat contoh di bawah untuk lebih banyak variasi.

<div class = "baris" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Lajur bersarang

Sarang kandungan anda jika anda perlu dengan membuat .rowdalam lajur sedia ada.

Contoh lajur bersarang

<div class = "baris" > 
  <div class = "span12" > 
    Tahap 1 lajur
    <div class = "baris" > 
      <div class = "span6" > 
        Tahap 2
      </div>
      <div class = "span6" > 
        Tahap 2
      </div>
    </div>
  </div>
</div>

Gulung grid anda sendiri

Dibina dalam Bootstrap ialah segelintir pembolehubah untuk menyesuaikan sistem grid lalai 940px. Dengan sedikit penyesuaian, anda boleh mengubah suai saiz lajur, longkangnya dan bekas tempat ia tinggal.

Di dalam grid

Pembolehubah yang diperlukan untuk mengubah suai sistem grid pada masa ini semuanya berada dalam variables.less.

Sekarang untuk menyesuaikan

Mengubah suai grid bermakna menukar tiga @grid-*pembolehubah dan menyusun semula fail Kurang.

Bootstrap dilengkapi untuk mengendalikan sistem grid dengan sehingga 24 lajur; lalainya hanya 16. Beginilah cara pembolehubah grid anda akan kelihatan disesuaikan kepada grid 24 lajur.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Setelah disusun semula, anda akan ditetapkan!

Susun atur tetap

Reka letak berpusat 940px lebar lalai dan ringkas untuk hampir mana-mana tapak web atau halaman yang disediakan oleh satu <div.container>.

<badan>
  <div class = "bekas" > 
    ...
  </div>
</body>

Susun atur cecair

Struktur halaman bendalir alternatif yang fleksibel dengan lebar min dan maks serta bar sisi sebelah kiri. Hebat untuk apl dan dokumen.

<badan>
  <div class = "bendalir bekas" > 
    <div class = "bar sisi" > 
      ...
    </div>
    <div class = "kandungan" > 
      ...
    </div>
  </div>
</body>

Tajuk & salinan

Hierarki tipografi standard untuk menstrukturkan halaman web anda.

Keseluruhan grid tipografi adalah berdasarkan dua Kurang pembolehubah dalam fail pembolehubah kami.less: @basefontdan @baseline. 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.

h1. Tajuk 1

h2. Tajuk 2

h3. Tajuk 3

h4. Tajuk 4

h5. Tajuk 5

h6. Tajuk 6

Contoh perenggan

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.

Contoh tajuk Mempunyai sub-tajuk…

Lain-lain elemen

Menggunakan penekanan, alamat, & singkatan

<strong> <em> <address> <abbr>

Bila nak guna

Teg penekanan ( <strong>dan <em>) hendaklah digunakan untuk menunjukkan kepentingan tambahan atau penekanan sesuatu perkataan atau frasa berbanding salinan sekelilingnya. Gunakan <strong>untuk kepentingan dan <em>untuk penekanan tekanan .

Penekanan dalam perenggan

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: Anda masih boleh menggunakan <b>dan <i>teg dalam HTML5 dan mereka tidak perlu digayakan tebal dan condong, masing-masing (walaupun jika terdapat unsur yang lebih semantik, gunakannya). <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan, manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.

Alamat

Unsur <address>ini digunakan untuk maklumat hubungan untuk nenek moyang terdekatnya, atau seluruh badan kerja. Berikut ialah dua contoh bagaimana ia boleh digunakan:

Nota: Setiap baris dalam a <address>mesti diakhiri dengan pemisah baris ( <br />) atau dibalut dengan tag peringkat blok (cth, <p>) untuk menstruktur kandungan dengan betul.

Singkatan

Untuk singkatan dan akronim, gunakan <abbr>teg ( <acronym>tidak digunakan dalam HTML5 ). Letakkan borang trengkas dalam teg dan tetapkan tajuk untuk nama lengkap.

Sekat petikan

<blockquote> <p> <small>

Cara memetik

Untuk memasukkan petikan blok, bungkus <blockquote>dan <p>tandai <small>. Gunakan <small>elemen untuk memetik sumber anda dan anda akan mendapat sempang em di —hadapannya.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <kecil> Dr Julius Hibbert </kecil>
</blockquote>

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.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

Penerangandl

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.

Kod

<code> <pre>

Pimp kod anda dalam gaya dengan dua tag mudah. Untuk lebih hebat lagi melalui javascript, masukkan pustaka prettify kod Google dan anda sudah bersedia.

Mempersembahkan kod

Kod, blok atau hanya coretan sebaris, boleh dipaparkan dengan gaya hanya dengan membungkus teg yang betul. Untuk blok kod yang merangkumi berbilang baris, gunakan <pre>elemen. Untuk kod sebaris, gunakan <code>elemen.

<div>
  <h1>Tajuk</h1>
  <p>Sesuatu di sini...</p>
</div>

<div> <h1> Tajuk </h1> <p> Sesuatu di sini... </p> </div>
  
  

Label sebaris

<span class="label">

Panggil perhatian atau benderakan mana-mana frasa dalam teks badan anda.

Labelkan apa sahaja

Pernah memerlukan salah satu daripada yang baru mewah itu! atau Bendera penting semasa menulis kod? Nah, sekarang anda mempunyai mereka. Berikut ialah perkara yang disertakan secara lalai:

Grid media

Paparkan lakaran kenit dengan pelbagai saiz pada halaman dengan jejak HTML yang rendah dan gaya yang minimum.

Contoh lakaran kenit

Imej kecil dalam .media-gridboleh menjadi sebarang saiz, tetapi ia berfungsi paling baik apabila dipetakan terus ke sistem grid Bootstrap terbina dalam. Lebar imej seperti 90, 210 dan 330 digabungkan dengan beberapa piksel padding untuk menyamai saiz .span2, .span4, dan .span6lajur.

besar

Sederhana

Kecil

Mengekodkan mereka

Grid media mudah digunakan dan agak ringkas pada bahagian markup. Dimensi mereka adalah semata-mata berdasarkan saiz imej yang disertakan.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Membina meja

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Meja sangat bagus—untuk banyak perkara. Walau bagaimanapun, jadual yang hebat memerlukan sedikit minat markup untuk menjadi berguna, berskala dan boleh dibaca (pada peringkat kod). Berikut adalah beberapa petua untuk membantu.

Sentiasa bungkus pengepala lajur anda dalam <thead>hierarki sedemikian <thead>> <tr>> <th>.

Sama seperti pengepala lajur, semua kandungan kandungan jadual anda hendaklah dibalut dengan <tbody>jadi hierarki anda ialah <tbody>> <tr>> <td>.

Contoh: Gaya jadual lalai

Semua jadual akan digayakan secara automatik dengan hanya sempadan penting untuk memastikan kebolehbacaan dan mengekalkan struktur. Tidak perlu menambah kelas atau atribut tambahan.

<jadual>
  ...
</ jadual>

Contoh: Meja pekat

Untuk jadual yang memerlukan lebih banyak data dalam ruang yang lebih sempit, gunakan rasa pekat yang memotong padding separuh. Ia juga boleh digunakan bersama dengan sempadan dan jalur zebra, sama seperti gaya jadual lalai.

Contoh: Meja bersempadan

Jadikan jadual anda kelihatan sedikit lebih licin dengan membulatkan sudutnya dan menambah jidar pada semua sisi.

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

Contoh: Belang belang

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

Nota: Zebra-striping ialah peningkatan progresif yang tidak tersedia untuk pelayar lama seperti IE8 dan ke bawah.

<table class = "belang kuda belang" > 
  ...
</ jadual>

Contoh: Belang zebra dengan TableSorter.js

Mengambil contoh sebelumnya, kami menambah baik kegunaan jadual kami dengan menyediakan fungsi pengisihan melalui jQuery dan pemalam Tablesorter . Klik mana-mana pengepala lajur untuk menukar jenis.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skrip > 
  $ ( fungsi () { 
    $ ( "table#sortTableExample" ). penyusun jadual ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "belang kuda belang" > 
  ...
</ jadual>

Gaya lalai

Semua borang diberikan gaya lalai untuk mempersembahkannya dalam cara yang boleh dibaca dan berskala. Gaya disediakan untuk input teks, senarai pilih, kawasan teks, butang radio dan kotak semak, dan butang.

Borang bertindan

Tambahkan .form-stackedpada HTML borang anda dan anda akan mempunyai label di atas medan mereka dan bukannya di sebelah kirinya. Ini berfungsi dengan baik jika borang anda pendek atau anda mempunyai dua lajur input untuk borang yang lebih berat.

Saiz medan bentuk

Sesuaikan sebarang bentuk input, select, atau textarealebar dengan menambah hanya beberapa kelas pada penanda anda.

Setakat v1.3.0, kami telah menambah kelas saiz berasaskan grid untuk elemen bentuk. Sila gunakan ini ke atas kelas .mini, .small, dsb yang sedia ada.

Butang

Sebagai konvensyen, butang digunakan untuk tindakan manakala pautan digunakan untuk objek. Sebagai contoh, "Muat turun" boleh menjadi butang dan "aktiviti terkini" boleh menjadi pautan.

Semua butang lalai kepada gaya kelabu muda, tetapi beberapa kelas berfungsi boleh digunakan untuk gaya warna yang berbeza. Kelas ini termasuk kelas biru .primary, kelas biru muda .info, kelas hijau .successdan kelas merah .danger.

Contoh butang

Gaya butang boleh digunakan pada apa-apa sahaja dengan .btnditerapkan. Biasanya anda akan mahu menggunakan ini hanya pada elemen <a>, <button>, dan pilih . <input>Begini rupanya:

Saiz ganti

Inginkan butang yang lebih besar atau lebih kecil? Punyalah!

Keadaan kurang upaya

Untuk butang yang tidak aktif atau dilumpuhkan oleh apl atas satu sebab atau yang lain, gunakan keadaan dilumpuhkan. Itu .disableduntuk pautan dan :disableduntuk <button>elemen.

Pautan

Butang

Apa itu

Bar atas kami ialah bar tetap yang menempatkan logo atau nama tapak web, navigasi utama dan borang carian.

Boleh disesuaikan

Semua elemen dalam, dan keseluruhan bar atas juga, adalah pilihan. Anda boleh memilih untuk memasukkan logo/nama, nav, carian dan nav kedua—atau mana-mana gabungan itu.

Dropdown disertakan

Sebagai sebahagian daripada navigasi utama, kami telah menyertakan keupayaan untuk anda menambah dropdown pada navigasi anda. Lihat navigasi kedua di atas (dijajarkan ke kanan) untuk melihat cara ia dilakukan. liTeg jatuh turun juga menyokong .activeuntuk menunjukkan pilihan halaman semasa.

Tab dan pil

Buat navigasi sekunder yang mudah dengan <ul>. Tukar antara tab atau pil dengan menambah kelas yang sesuai.

Hebat untuk sub-bahagian kandungan seperti halaman tetapan akaun kami dan garis masa pengguna untuk menogol antara halaman kandungan serupa. Tersedia dalam gaya tab atau pil.

Contoh tab asas

Tab boleh digunakan sebagai navigasi biasa (memuatkan halaman luaran dalam tab yang sama) atau sebagai kawasan kandungan boleh tab untuk menukar anak tetingkap kandungan. Kami mempunyai pemalam tab yang boleh digunakan untuk menyepadukan yang terakhir.

• Rumah
• Profil
• Mesej
• tetapan
• Kenalan
• Jatuh turun
  • Pautan sekunder
  • Sesuatu yang lain di sini
  • Pautan lain

<ul class = "tab" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Mesej </a></li> 
  <li><a href = "#" > Tetapan </a></li> 
  <li><a href = "#" > Kenalan </a></li> 
</ul>

Contoh pil asas

• Rumah
• Profil
• Mesej
• tetapan
• Kenalan

<ul class = "pil" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Mesej </a></li> 
  <li><a href = "#" > Tetapan </a></li> 
  <li><a href = "#" > Kenalan </a></li> 
</ul>

Serbuk roti

Navigasi serbuk roti digunakan sebagai cara untuk menunjukkan kepada pengguna tempat mereka berada dalam apl atau tapak, tetapi bukan untuk navigasi utama.

• Rumah

• Laman Utama /
• Muka surat tengah

• Laman Utama /
• halaman tengah /
• Yang lagi satu

• Laman Utama /
• halaman tengah /
• Seorang lagi /
• Kamu di sini

<ul class = "serbuk roti" > 
  <li><a href = "#" > Laman Utama </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Halaman tengah </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Satu lagi </a> <span class = "divider" > / </span></li>   
  <li class = "aktif" > Anda di sini </li> 
</ul>

penomboran

Penomboran ultra ringkas dan gaya minimum yang diilhamkan oleh Rdio. Blok besar sukar untuk dilepaskan, mudah berskala dan menyediakan kawasan klik yang besar.

<div class = "penomboran" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Sebelumnya </a></li>  
    <li class = "aktif" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Makluman asas

.alert-message

Mesej satu baris untuk menyerlahkan kegagalan, kemungkinan kegagalan atau kejayaan sesuatu tindakan. Terutamanya berguna untuk borang.

Dapatkan javascript »

Contoh kod

<div class = "amaran mesej amaran" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole yang suci! </strong> Sebaiknya semak diri anda, anda tidak kelihatan terlalu bagus. </p>
</div>

Sekat mesej

.alert-message.block-message

Untuk mesej yang memerlukan sedikit penjelasan, kami mempunyai makluman gaya perenggan. Ini adalah sesuai untuk menggelegak mesej ralat yang lebih panjang, memberi amaran kepada pengguna tentang tindakan yang belum selesai, atau hanya menyampaikan maklumat untuk lebih penekanan pada halaman.

Dapatkan javascript »

Contoh kod

<div class = "amaran blok-mesej makluman" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole yang suci! Ini adalah amaran! </strong> Sebaiknya semak diri anda, anda tidak kelihatan terlalu bagus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "tindakan amaran" > 
    <a class = "btn small" href = "#" > Ambil tindakan ini </a> <a     class = "btn small" href = "#" > Atau lakukan ini </a> 
  </div>
</div>

modal

Modal—dialog atau peti cahaya—sangat bagus untuk tindakan kontekstual dalam situasi yang penting untuk mengekalkan konteks latar belakang.

Dapatkan javascript »

Petua alat

Twipsies sangat berguna untuk membantu pengguna yang keliru dan mengarahkan mereka ke arah yang betul.

Dapatkan javascript »

Popovers

Gunakan popover untuk memberikan maklumat subtekstual ke halaman tanpa menjejaskan reka letak.

Dapatkan javascript »

Bermula

Mengintegrasikan javascript dengan perpustakaan Bootstrap adalah sangat mudah. Di bawah ini kami membincangkan asas-asas dan memberikan anda beberapa pemalam yang hebat untuk anda bermula!

Lihat dokumen javascript »

Apa yang disertakan

Hidupkan beberapa komponen utama Bootstrap dengan pemalam tersuai baharu yang berfungsi dengan jQuery dan Ender . Kami menggalakkan anda untuk melanjutkan dan mengubah suainya agar sesuai dengan keperluan pembangunan khusus anda.

Adakah javascript diperlukan?

Tidak! Bootstrap direka pertama sekali untuk menjadi perpustakaan CSS. Javascript ini menyediakan lapisan interaktif asas di atas gaya yang disertakan.

Walau bagaimanapun, bagi mereka yang memerlukan javascript, kami telah menyediakan pemalam di atas untuk membantu anda memahami cara mengintegrasikan Bootstrap dengan javascript dan memberi anda pilihan yang cepat dan ringan untuk fungsi asas dengan segera.

Untuk maklumat lanjut dan melihat beberapa tunjuk cara langsung, sila rujuk halaman dokumentasi pemalam kami .