Conto ngamimitian gancang

Peryogi sababaraha témplat gancang? Parios conto dasar ieu anu kami kumpulkeun:

Grid standar

Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 16-kolom lega 940px. Éta rasa tina sistem grid 960 populér, tapi tanpa margin tambahan / padding di sisi kénca sareng katuhu.

Contona grid markup

Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 16 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami. Tempo conto di handap pikeun leuwih variasi.

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

Kolom nyarang

Sarang eusi anjeun upami anjeun kedah ku nyiptakeun .rowdina kolom anu tos aya.

Contoh kolom bersarang

<div class = "baris" > 
  <div class = "span12" > 
    Tingkat 1 kolom
    <div class = "baris" > 
      <div class = "span6" > 
        Tingkat 2
      </div>
      <div class = "span6" > 
        Tingkat 2
      </div>
    </div>
  </div>
</div>

Gulung grid anjeun sorangan

Diwangun kana Bootstrap aya sakeupeul variabel pikeun ngaropéa sistem grid standar 940px. Kalayan sakedik kustomisasi, anjeun tiasa ngarobih ukuran kolom, talangna, sareng wadahna tempatna.

Di jero grid

Variabel diperlukeun pikeun ngaropéa sistem grid ayeuna sadayana reside di variables.less.

Ayeuna pikeun ngaropea

Ngaropéa grid hartina ngarobah tilu @grid-*variabel jeung recompiling file Kurang.

Bootstrap dilengkepan pikeun nanganan sistem grid nepi ka 24 kolom; standar téh ngan 16. Ieu kumaha variabel grid anjeun bakal kasampak ngaropéa ka grid 24-kolom.

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

Sakali recompiled, anjeun bakal diatur!

perenah maneuh

Tata letak standar sareng saderhana 940px-lega, dipuseurkeun pikeun situs wéb atanapi halaman anu disayogikeun ku hiji <div.container>.

<awak>
  <div class = "wadah" > 
    ...
  </div>
</awak>

Susunan cairan

Alternatif, struktur kaca cairan fléksibel jeung min- jeung max-lebar sarta sidebar kénca-leungeun. Saé kanggo aplikasi sareng dokumén.

<awak>
  <div class = "wadah-cairan" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "eusi" > 
      ...
    </div>
  </div>
</awak>

Judul & salinan

Hierarki tipografi standar pikeun nyusun halaman wéb anjeun.

Sakabéh grid tipografi dumasar kana dua Kurang variabel dina file variables.less kami: @basefontjeung @baseline. Anu kahiji nyaéta ukuran font dasar anu dianggo sapanjang sareng anu kadua nyaéta jangkungna garis dasar.

Kami nganggo variabel-variabel éta, sareng sababaraha matematika, pikeun nyiptakeun margin, paddings, sareng jangkung garis sadaya jinis urang sareng seueur deui.

h1. Judul 1

h2. Judul 2

h3. Judul 3

h4. Judul 4

h5. Judul 5

h6. Judul 6

Conto paragraf

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.

Conto judul Mibanda subjudul…

Misc. elemen

Ngagunakeun tekenan, alamat, & singketan

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

Nalika ngagunakeun

Tag emphasis ( <strong>jeung <em>) kudu dipaké pikeun nunjukkeun pentingna tambahan atawa tekenan hiji kecap atawa frasa relatif ka salinan sabudeureun na. Anggo <strong>pikeun pentingna sareng <em>pikeun tekenan setrés .

Tekenan dina hiji paragraf

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.

Catetan: Ieu masih oke ngagunakeun <b>sarta <i>tag dina HTML5 sarta aranjeunna teu kudu styled kandel jeung miring, mungguh (sanajan lamun aya unsur leuwih semantis, make eta). <b>dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan, sedengkeun <i>lolobana pikeun sora, istilah teknis, jsb.

Alamat

Unsur <address>dipaké pikeun informasi kontak pikeun karuhun pangcaketna, atawa sakabéh awak gawé. Ieu dua conto kumaha éta tiasa dianggo:

Catetan: Unggal garis dina hiji <address>kudu ditungtungan ku garis-break ( <br />) atawa dibungkus dina tag blok-tingkat (misalna, <p>) mun leres struktur eusi.

Singgetan

Pikeun singketan sareng akronim, paké <abbr>tag ( <acronym>dileungitkeun dina HTML5 ). Nempatkeun formulir shorthand dina tag tur nyetel judul pikeun ngaran lengkep.

Blockquotes

<blockquote> <p> <small>

Kumaha ngadugikeun

Pikeun ngalebetkeun kutipan blok , bungkus <blockquote>sareng tag. Anggo elemen pikeun nyebatkeun sumber anjeun sareng anjeun bakal nampi dash sateuacanna.<p><small><small>&mdash;

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>
  <leutik> Dr Julius Hibbert </leutik>
</blockquote>

Teu diurut<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem jeung massa
• Facilisis di 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 diuk amet erat nunc
• Eget porttitor lorem

Teu gaya<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem jeung massa
• Facilisis di 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 diuk amet erat nunc
• Eget porttitor lorem

Dititah<ol>

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

Katerangandl

Daptar pedaran

Daptar pedaran sampurna pikeun nangtukeun 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.

Kodeu

<code> <pre>

Pimp kode anjeun dina gaya sareng dua tag basajan. Pikeun langkung awesomeness ngaliwatan javascript, teundeun di perpustakaan prettify kode Google jeung anjeun geus disetel.

Nampilkeun kode

Kodeu, blok atawa ngan snippét inline, bisa ditampilkeun kalawan gaya ngan ku wrapping dina tag katuhu. Pikeun blok kode manjang sababaraha garis, make <pre>unsur. Pikeun kode inline, make <code>unsur.

<div>
  <h1>Judul</h1>
  <p>Aya nu kieu...</p>
</div>

<div> <h1> Judul </h1> <p> Aya anu di dieu... </p> </div>
  
  

labél Inline

<span class="label">

Nelepon perhatian kana atanapi bandéra frasa naon waé dina téks awak anjeun.

Label naon waé

Kantos peryogi salah sahiji anu énggal-énggal ! atanapi Bandéra penting nalika nyerat kode? Nya, ayeuna anjeun gaduh aranjeunna. Ieu naon anu kalebet sacara standar:

Média grid

Tampilkeun gambar leutik tina ukuran anu béda-béda dina halaman kalayan tapak HTML anu lemah sareng gaya anu minimal.

Conto gambar leutik

Gambar leutik dina .media-gridukuranana tiasa waé, tapi éta tiasa dianggo nalika dipetakeun langsung kana sistem grid Bootstrap anu diwangun. Lebar gambar sapertos 90, 210, sareng 330 digabungkeun sareng sababaraha piksel padding pikeun sami sareng ukuran .span2, .span4, sareng .span6kolom.

Gede

Sedeng

Leutik

Coding aranjeunna

Grid média gampang dianggo sareng rada saderhana dina sisi markup. dimensi maranéhanana anu murni dumasar kana ukuran gambar kaasup.

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

Ngawangun méja

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

Méja anu saé-pikeun seueur hal. Méja hébat, kumaha oge, peryogi sakedik markup cinta janten mangpaat, scalable, sareng tiasa dibaca (dina tingkat kode). Ieu sababaraha tip pikeun ngabantosan.

Salawasna bungkus header kolom anjeun dina <thead>hirarki sapertos anu <thead>> <tr>> <th>.

Sarupa jeung lulugu kolom, sakabeh eusi awak tabel anjeun kudu dibungkus dina <tbody>jadi hirarki anjeun <tbody>> <tr>> <td>.

Conto: Gaya tabel standar

Sadaya tabel bakal ditata sacara otomatis kalayan ngan ukur wates anu penting pikeun mastikeun kabaca sareng ngajaga struktur. Henteu kedah nambihan kelas atanapi atribut tambahan.

<méja>
  ...
</tabel>

Contona: Méja kentel

Pikeun tabel nu merlukeun leuwih data dina spasi tighter, make rasa condensed nu motong padding dina satengah. Ogé bisa dipaké ditéang jeung wates jeung zebra-belang, kawas gaya tabel standar.

Contona: Méja wates

Jieun tabel anjeun kasampak ngan saeutik sleeker ku rounding sudut maranéhanana sarta nambahkeun wates dina sagala sisi.

<table class = "tabél-bordered" > 
  ...
</tabel>

Contona: belang zebra

Kéngingkeun sakedik méja anjeun ku nambihan zebra-striping-ngan tambahkeun .zebra-stripedkelasna.

Catetan: Zebra-striping mangrupikeun paningkatan progresif anu henteu sayogi pikeun browser anu langkung lami sapertos IE8 sareng di handap.

<table class = "zebra-belang" > 
  ...
</tabel>

Conto: Zebra-belang w/ TableSorter.js

Nyandak conto samemehna, urang ningkatkeun mangpaat tabel kami ku nyadiakeun fungsionalitas asihan via jQuery jeung plugin Tablesorter . Klik lulugu kolom mana wae pikeun ngarobah nurun.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( fungsi () { 
    $ ( "tabél#sortTableConto" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-belang" > 
  ...
</tabel>

Gaya standar

Sadaya bentuk dipasihan gaya standar pikeun nampilkeunana dina cara anu tiasa dibaca sareng tiasa skala. Gaya disayogikeun pikeun input téks, pilih daptar, daérah téks, tombol radio sareng kotak centang, sareng tombol.

Bentuk tumpuk

Tambahkeun .form-stackedka HTML formulir anjeun sarta anjeun bakal boga labél dina luhureun widang maranéhanana tinimbang ka kénca maranéhanana. Ieu tiasa dianggo saé upami formulir anjeun pondok atanapi anjeun gaduh dua kolom input pikeun bentuk anu langkung beurat.

Ukuran widang formulir

Sesuaikeun bentuk naon waé input, select, atanapi textarealebar ku nambihan sababaraha kelas kana markup anjeun.

Salaku v1.3.0, kami geus ditambahkeun kelas ukuran dumasar-grid pikeun elemen formulir. Punten nganggo ieu dina kelas anu aya .mini, .small, jsb.

Kancing

Salaku konvénsi a, tombol dipaké pikeun lampah bari Tumbu dipaké pikeun objék. Salaku conto, "Unduh" tiasa janten tombol sareng "aktivitas panganyarna" tiasa janten tautan.

Sadaya tombol standar kana gaya kulawu lampu, tapi sajumlah kelas fungsional tiasa diterapkeun pikeun gaya warna anu béda. Kelas ieu kalebet kelas biru .primary, kelas biru .infomuda, kelas héjo .success, sareng kelas beureum .danger.

Conto tombol

Gaya tombol tiasa diterapkeun kana naon waé anu .btnditerapkeun. Biasana anjeun badé nerapkeun ieu ngan ukur <a>, <button>, sareng pilih <input>elemen. Ieu kumaha katingalina:

Ukuran alternatip

Fancy tombol gedé atawa leutik? Kudu di dinya!

kaayaan ditumpurkeun

Pikeun tombol nu teu aktip atawa ditumpurkeun ku aplikasi pikeun hiji alesan atawa sejen, make kaayaan ditumpurkeun. Éta .disabledpikeun tautan sareng :disabledpikeun <button>elemen.

Tumbu

Kancing

Anu mana

Topbar kami mangrupikeun bar tetep anu ngagaduhan logo atanapi nami halaman wéb, navigasi primér, sareng bentuk milarian.

Bisa disaluyukeun

Kabéh elemen dina, sarta sakabéh topbar ogé, mangrupa pilihan. Anjeun tiasa milih ngalebetkeun logo/nami, nav, milarian, sareng nav sekundér-atanapi kombinasi naon waé.

Dropdowns kaasup

Salaku bagian tina navigasi utama, kami geus kaasup kamampuhan pikeun anjeun pikeun nambahkeun dropdowns mun nav Anjeun. Pariksa nav sekundér luhur (Blok katuhu) pikeun katingal kumaha eta tos rengse. Tag dropdown liogé ngadukung .activepikeun nunjukkeun pilihan halaman ayeuna.

Tab jeung pil

Jieun navigasi sekundér basajan kalawan <ul>. Swap antara tab atawa pil ku nambahkeun kelas luyu.

Saé pikeun sub-bagian eusi sapertos halaman setélan akun kami sareng garis waktos pangguna pikeun ngagentos antara halaman eusi anu sami. Sadia dina gaya tabbed atanapi pil.

Conto tab dasar

Tab tiasa dianggo salaku navigasi biasa (ngamuat halaman éksternal dina tab anu sami) atanapi salaku daérah eusi tabbable pikeun ngarobih panel eusi. Kami ngagaduhan plugin tab anu tiasa dianggo pikeun ngahijikeun anu terakhir.

• Imah
• Propil
• Talatah
• Setélan
• Kontak
• Puragkeun
  • Tumbu sékundér
  • Lain di dieu
  • link sejen

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#" > Imah </a></li>  
  <li><a href = "#" > Propil </a></li> 
  <li><a href = "#" > Talatah </a></li> 
  <li><a href = "#" > Setélan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Conto pél dasar

• Imah
• Propil
• Talatah
• Setélan
• Kontak

<ul class = "pil" > 
  <li class = "aktif" ><a href = "#" > Imah </a></li>  
  <li><a href = "#" > Propil </a></li> 
  <li><a href = "#" > Talatah </a></li> 
  <li><a href = "#" > Setélan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Breadcrumbs

Napigasi Breadcrumb dianggo salaku cara pikeun nunjukkeun ka pangguna dimana aranjeunna aya dina aplikasi atanapi situs, tapi sanés pikeun navigasi primér.

• Imah

• imah /
• Kaca tengah

• imah /
• Kaca tengah /
• Hiji deui

• imah /
• Kaca tengah /
• Hiji deui /
• Anjeun aya didieu

<ul class = "breadcrumb" > 
  <li><a href = "#" > Imah </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Kaca tengah </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Hiji deui </a> <span class = "divider" > / </span></li>   
  <li class = "aktif" > Anjeun di dieu </li> 
</ul>

Pagination

pagination ultra saderhana sareng gaya minimal anu diideuan ku Rdio. Blok badag hésé sono, gampang scalable, sarta nyadiakeun wewengkon klik badag.

<div class = "pagination" > 
  <ul>
    <li class = "prev ditumpurkeun" ><a href = "#"> & larr ; saméméhna </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 = "salajengna" ><a href = "#" > salajengna & rarr; </a></li>  
  </ul>
</div>

Panggeuing dasar

.alert-message

Pesen hiji-garis pikeun nyorot kagagalan, kamungkinan kagagalan, atanapi kasuksésan tindakan. Utamana mangpaat pikeun formulir.

Kéngingkeun javascript »

Conto kode

<div class = "waspada-pesen peringatan" > 
  <a class = "deukeut" href = "#" > × </a>  
  <p><strong> Guacamole suci! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé. </p>
</div>

Meungpeuk pesen

.alert-message.block-message

Pikeun pesen anu peryogi sakedik katerangan, kami gaduh panggeuing gaya paragraf. Ieu sampurna pikeun ngagedekeun pesen kasalahan anu langkung panjang, ngingetkeun pangguna ngeunaan tindakan anu ditangguhkeun, atanapi ngan ukur nunjukkeun inpormasi pikeun langkung tekenan kana halaman éta.

Kéngingkeun javascript »

Conto kode

<div class = "waspada-pesen block-pesen warning" > 
  <a class = "deukeut" href = "#" > × </a>  
  <p><strong> Guacamole suci! Ieu peringatan! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, atanapi scelerisque nisl consectetur et. </p>
  <div class = "siaga-aksi" > 
    <a class = "btn small" href = "#" > Laksanakeun tindakan ieu </a> <a class = "btn small" href = "#" > Atanapi laksanakeun ieu </a>     
  </div>
</div>

Modal

Modals-dialogs atanapi lightboxes-saé kanggo tindakan kontekstual dina kaayaan anu penting pikeun ngajaga kontéks latar.

Kéngingkeun javascript »

Tooltips

Twipsies super mangpaat pikeun ngabantosan pangguna anu bingung sareng ngarahkeunana ka arah anu leres.

Kéngingkeun javascript »

Popovers

Anggo popovers pikeun masihan inpormasi subtekstual ka halaman tanpa mangaruhan perenah.

Kéngingkeun javascript »

Ngamimitian

Ngahijikeun javascript sareng perpustakaan Bootstrap super gampang. Di handap ieu kami ngaliwat dasar-dasar sareng nyayogikeun anjeun sababaraha plugins anu saé pikeun ngamimitian anjeun!

Tingali dokumén javascript »

Naon kaasup

Bawa sababaraha komponén primér Bootstrap pikeun hirup kalawan plugins custom anyar nu gawéna kalayan jQuery na Ender . Kami ajak anjeun manjangkeun sareng ngarobih aranjeunna pikeun nyocogkeun ka kabutuhan pangembangan khusus anjeun.

Naha javascript perlu?

Henteu! Bootstrap dirancang munggaran tur foremost janten perpustakaan CSS. JavaScript ieu nyadiakeun lapisan interaktif dasar dina luhureun gaya kaasup.

Nanging, pikeun anu peryogi javascript, kami parantos nyayogikeun plugins di luhur pikeun ngabantosan anjeun ngartos kumaha ngahijikeun Bootstrap sareng javascript sareng masihan anjeun pilihan anu gancang sareng hampang pikeun fungsionalitas dasar langsung.

Kanggo inpo nu leuwih lengkep sareng ningali sababaraha demo langsung, mangga tingal halaman dokuméntasi plugin kami .