Conto wiwitan cepet

Perlu sawetara cithakan cepet? Priksa conto dhasar sing wis kita kumpulake:

Kisi standar

Sistem kothak standar sing disedhiyakake minangka bagéan saka Bootstrap yaiku kothak 16-kolom sing amba 940px. Iku roso saka sistem kothak 960 populer, nanging tanpa wates tambahan / padding ing sisih kiwa lan tengen.

Tuladha grid markup

Kaya sing dituduhake ing kene, tata letak dhasar bisa digawe kanthi rong "kolom," saben-saben nyakup sawetara 16 kolom dhasar sing ditetepake minangka bagean saka sistem kothak. Deleng conto ing ngisor iki kanggo variasi liyane.

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

Nesting kolom

Nest isi sampeyan yen sampeyan kudu nggawe .rowing kolom sing wis ana.

Tuladha kolom nested

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

Gulung kothak dhewe

Dibangun ing Bootstrap minangka sawetara variabel kanggo ngatur sistem kothak standar 940px. Kanthi sawetara kustomisasi, sampeyan bisa ngowahi ukuran kolom, talang, lan wadhah sing dienggoni.

Ing njero kothak

Variabel sing dibutuhake kanggo ngowahi sistem kothak saiki kabeh manggon ing preboot.less.

Saiki kanggo ngatur

Ngowahi kothak tegese ngganti telung @grid-*variabel lan ngumpulake maneh file Kurang.

Bootstrap dilengkapi kanggo nangani sistem kothak nganti 24 kolom; standar mung 16. Punika carane variabel kothak bakal katon selaras kanggo kothak 24-kolom.

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

Sawise dikompilasi maneh, sampeyan bakal disetel!

Tata letak tetep

Default lan prasaja 940px-wide, tata letak tengah kanggo meh wae situs web utawa kaca sing diwenehake dening siji <div.container>.

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

Tata letak cairan

Alternatif, struktur kaca cairan fleksibel kanthi jembar minimal lan maksimal lan sidebar sisih kiwa. Apik kanggo aplikasi lan dokumen.

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

Judul & salinan

Hierarki tipografi standar kanggo nyusun kaca web sampeyan.

Kabeh kothak tipografi adhedhasar rong variabel Kurang ing file preboot.less kita: @basefontlan @baseline. 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, kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane.

h1. Heading 1

h2. Heading 2

h3. Judul 3

h4. Judul 4

h5. Judul 5

h6. Judul 6

Tuladha paragraf

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

Tuladha judhul Nduweni subjudul…

Misc. unsur

Nggunakake emphasis, alamat, & singkatan

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

Nalika nggunakake

Tag emphasis ( <strong>lan <em>) kudu digunakake kanggo nunjukake wigati tambahan utawa emphasis saka tembung utawa frase relatif kanggo salinan lingkungan. Gunakake <strong>kanggo wigati lan <em>kanggo emphasis kaku .

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

Cathetan: Sampeyan isih bisa nggunakake <b>lan <i>menehi tag ing HTML5 lan ora kudu nganggo gaya kandel lan miring (sanajan yen ana unsur semantik, gunakake). <b>tegese kanggo nyorot tembung utawa frasa tanpa menehi wigati tambahan, nanging <i>biasane kanggo swara, istilah teknis, lsp.

Alamat

Unsur <address>kasebut digunakake kanggo informasi kontak kanggo leluhur sing paling cedhak, utawa kabeh awak kerja. Ing ngisor iki ana rong conto carane bisa digunakake:

Cathetan: Saben baris <address>kudu dipungkasi nganggo garis putus ( <br />) utawa dibungkus tag tingkat blok (contone, <p>) supaya isine disusun kanthi bener.

Singkatan

Kanggo singkatan lan akronim, gunakake <abbr>tag ( <acronym>wis ora digunakake ing HTML5 ). Sijine formulir shorthand ing tag lan setel judhul kanggo jeneng lengkap.

Blockquotes

<blockquote> <p> <small>

Carane ngutip

<blockquote>Kanggo nyakup blockquote , bungkus <p>lan <small>tag. Gunakake <small>unsur —kasebut kanggo nyebut sumber sampeyan lan sampeyan bakal entuk em dash sadurunge.

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

Ora ditata<ul>

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

Tanpa gaya<ul.unstyled>

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

dhawuh<ol>

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

Katrangandl

Dhaptar katrangan

Dhaptar deskripsi sampurna kanggo nemtokake istilah.

Euismod

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

Donec id elit non mi porta gravida lan eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kode

<code> <pre>

Pimp kode sampeyan kanthi gaya kanthi rong tag sing prasaja. Kanggo luwih awesomeness liwat javascript, nyelehake ing kode Google prettify perpustakaan lan sampeyan wis disetel.

Presenting kode

Kode, pamblokiran utawa mung potongan inline, bisa ditampilake kanthi gaya mung kanthi mbungkus tag sing bener. Kanggo pamblokiran kode sing akeh baris, gunakake <pre>unsur kasebut. Kanggo kode inline, gunakake <code>unsur kasebut.

<div>
  <h1>Judul</h1>
  <p>Sopo wae...</p>
</div>

<div> <h1> Heading </h1> <p> Ana ing kene... </p> </div>
  
  

Label inline

<span class="label">

Nelpon manungsa waé utawa tandhani frase apa wae ing teks awak.

Label apa wae

Tau needed siji sing apik New! utawa Gendéra Penting nalika nulis kode? Nah, saiki sampeyan duwe. Iki sing kalebu standar:

Jaringan media

Tampilake gambar cilik kanthi ukuran sing beda-beda ing kaca kanthi tapak HTML sing sithik lan gaya minimal.

Tuladha gambar cilik

Gambar cilik .media-gridbisa dadi ukuran apa wae, nanging paling apik yen dipetakan langsung menyang sistem kothak Bootstrap sing dibangun. Jembar gambar kaya 90, 210, lan 330 digabungake karo sawetara piksel padding sing padha karo ukuran .span2, .span4, lan .span6kolom.

Gedhe

Sedheng

Cilik

Coding mau

Grid media gampang digunakake lan cukup prasaja ing sisih markup. Ukurane mung adhedhasar ukuran gambar sing kalebu.

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

Meja bangunan

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

Tabel apik banget-kanggo akeh perkara. Tabel gedhe, Nanging, perlu sethitik markup tresna dadi migunani, keukur, lan bisa diwaca (ing tingkat kode). Kene sawetara tips kanggo mbantu.

Tansah mbungkus header kolom kanthi <thead>hirarki kasebut yaiku <thead>> <tr>> <th>.

Kaya header kolom, kabeh isi tabel sampeyan kudu dibungkus dadi <tbody>hirarki sampeyan <tbody>> <tr>> <td>.

Tuladha: Gaya tabel standar

Kabeh tabel bakal ditata kanthi otomatis kanthi mung wates penting kanggo njamin keterbacaan lan njaga struktur. Ora perlu nambah kelas utawa atribut ekstra.

<tabel>
  ...
</tabel>

Tuladha: Belang Zebra

Nggawe meja kanthi apik kanthi nambahake zebra-striping-mung nambah .zebra-stripedkelas.

Cathetan: Zebra-striping minangka paningkatan progresif sing ora kasedhiya kanggo browser lawas kaya IE8 lan ngisor.

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

Tuladha: Zebra-belang w/ TableSorter.js

Njupuk conto sadurunge, kita nambah migunani tabel kita kanthi nyedhiyakake fungsi ngurutake liwat jQuery lan plugin Tablesorter . Klik header kolom kanggo ngganti urutan.

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

Gaya standar

Kabeh formulir diwenehi gaya standar supaya bisa diwaca lan bisa diukur. Gaya kasedhiya kanggo input teks, pilih dhaptar, area teks, tombol radio lan kothak centhang, lan tombol.

Wangun sing ditumpuk

Tambah .form-stackedmenyang HTML formulir lan sampeyan bakal duwe label ing ndhuwur kolom tinimbang ing sisih kiwa. Iki bisa dianggo apik yen formulir sampeyan cendhak utawa sampeyan duwe rong kolom input kanggo formulir sing luwih abot.

Formulir ukuran lapangan

Kustomisasi wangun apa wae input, select, utawa textareajembar kanthi nambahake sawetara kelas menyang markup sampeyan.

Ing v1.3.0, kita wis nambah kelas ukuran basis kothak kanggo unsur wangun. Mangga gunakake iki ing kelas sing wis ana .mini, .small, etc.

Tombol

Minangka konvensi, tombol digunakake kanggo tumindak nalika pranala digunakake kanggo obyek. Contone, "Download" bisa dadi tombol lan "aktivitas anyar" bisa dadi link.

Kabeh tombol standar kanggo gaya werna abu-abu cahya, nanging sawetara kelas fungsi bisa Applied kanggo gaya werna beda. Kelas kasebut kalebu kelas biru .primary, kelas biru cahya .info, kelas ijo .success, lan kelas abang .danger.

Tuladha tombol

Gaya tombol bisa ditrapake kanggo apa .btnwae sing ditrapake. Biasane sampeyan pengin aplikasi iki mung kanggo <a>, <button>, lan pilih <input>unsur. Mangkene carane katon:

Ukuran alternatif

Apik tombol luwih gedhe utawa luwih cilik? Wis ing!

negara dipatèni

Kanggo tombol sing ora aktif utawa dipatèni dening app kanggo siji utawa alesan liyane, nggunakake negara dipatèni. Iku .disabledkanggo pranala lan :disabledkanggo <button>unsur.

Pranala

Tombol

Opo kuwi

Topbar kita minangka bar tetep sing ngemot logo utawa jeneng situs web, pandhu arah utama, lan formulir telusuran.

Bisa disesuaikan

Kabeh unsur ing, lan kabeh topbar uga, opsional. Sampeyan bisa milih kanggo nyakup logo/jeneng, nav, telusuran, lan nav sekunder-utawa kombinasi apa wae.

Dropdowns klebu

Minangka bagéan saka pandhu arah utama, kita wis klebu kemampuan kanggo sampeyan nambah dropdowns kanggo nav Panjenengan. Priksa metu nav secondary ndhuwur (selaras tengen) kanggo dipikir carane iku rampung. Tag dropdown liuga ndhukung .activekanggo nuduhake pilihan kaca sing saiki.

Tab lan pil

Nggawe pandhu arah sekunder sing prasaja nganggo <ul>. Ganti antarane tab utawa pil kanthi nambahake kelas sing cocog.

Apik kanggo sub-bagean konten kaya kaca setelan akun lan garis wektu pangguna kanggo ngalih ing antarane kaca konten sing padha. Kasedhiya ing gaya tab utawa pil.

• Ngarep
• Profile
• Pesen
• Setelan
• Kontak
• Dropdown
  • Link sekunder
  • Liyane ing kene
  • link liyane

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#" > Ngarep </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Pesen </a></li> 
  <li><a href = "#" > Setelan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

• Ngarep
• Profile
• Pesen
• Setelan
• Kontak

<ul class = "pil" > 
  <li class = "aktif" ><a href = "#" > Ngarep </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Pesen </a></li> 
  <li><a href = "#" > Setelan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Breadcrumbs

Navigasi Breadcrumb digunakake minangka cara kanggo nuduhake pangguna ing ngendi dheweke ana ing aplikasi utawa situs, nanging ora kanggo navigasi utama.

• Ngarep

• ngarep /
• Kaca tengah

• ngarep /
• kaca tengah /
• Siji liyane

• ngarep /
• kaca tengah /
• siji liyane /
• Sampeyan kene

<ul class = "breadcrumb" > 
  <li><a href = "#" > Ngarep </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Kaca tengah </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Liyane </a> <span class = "divider" > / </span></li>   
  <li class = "aktif" > Sampeyan kene </li> 
</ul>

Pagination

pagination ultra simplistic lan minimal gaya inspirasi dening Rdio. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.

<div class = "pagination" > 
  <ul>
    <li class = "prev dipatèni" ><a href = "#"> & larr ; Sadurunge </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 = "sabanjure" ><a href = "#" > Sabanjure & rarr; </a></li>  
  </ul>
</div>

Tandha dhasar

.alert-message

Pesen siji-baris kanggo nyorot kegagalan, kemungkinan gagal, utawa sukses tumindak. Utamané migunani kanggo formulir.

Entuk javascript »

Tuladha kode

<div class = "waspada-pesen peringatan" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Kudus guacamole! </strong> Priksa dhewe, sampeyan ora katon apik banget. </p>
</div>

Blokir pesen

.alert-message.block-message

Kanggo pesen sing mbutuhake panjelasan sethithik, kita duwe tandha gaya paragraf. Iki cocog kanggo nggawe pesen kesalahan sing luwih dawa, menehi peringatan marang pangguna babagan tumindak sing ditundha, utawa mung menehi informasi supaya luwih ditekanake ing kaca kasebut.

Entuk javascript »

Tuladha kode

<div class = "waspada-pesen blok-pesen peringatan" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Kudus guacamole! Iki minangka bebaya! </strong> Priksa dhewe, sampeyan ora katon apik banget. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, utawa scelerisque nisl consectetur et. </p>
  <div class = "waspada-tindakan" > 
    <a class = "btn small" href = "#" > Tumindak iki </a> <a class = "btn small" href = "#" > Utawa nindakake iki </a>     
  </div>
</div>

Modal

Modals—dialog utawa lightboxes— apik banget kanggo tumindak kontekstual ing kahanan sing penting kanggo njaga konteks latar mburi.

Entuk javascript »

Tooltips

Twipsies migunani banget kanggo nulung pangguna sing bingung lan ngarahake menyang arah sing bener.

Entuk javascript »

Popovers

Gunakake popovers kanggo nyedhiyakake informasi subtekstual menyang kaca tanpa mengaruhi tata letak.

Entuk javascript »

Miwiti

Nggabungake javascript karo perpustakaan Bootstrap gampang banget. Ing ngisor iki, kita bakal ngrampungake dhasar lan menehi sawetara plugin sing apik tenan kanggo miwiti!

Deleng dokumen javascript »

Apa sing kalebu

Nggawe sawetara komponen utama Bootstrap kanthi plugin khusus anyar sing bisa digunakake karo jQuery lan Ender . Disaranake sampeyan ngluwihi lan ngowahi supaya cocog karo kabutuhan pangembangan tartamtu.

Apa javascript perlu?

Ora! Bootstrap dirancang pisanan lan paling penting dadi perpustakaan CSS. JavaScript iki nyedhiyakake lapisan interaktif dhasar ing ndhuwur gaya sing kalebu.

Nanging, kanggo sing mbutuhake javascript, kita wis nyedhiyakake plugin ing ndhuwur kanggo mbantu sampeyan ngerti carane nggabungake Bootstrap karo javascript lan menehi pilihan sing cepet lan entheng kanggo fungsi dhasar kasebut.

Kanggo informasi luwih lengkap lan ndeleng sawetara demo langsung, waca kaca dokumentasi plugin .