Ọmụmaatụ mmalite ngwa ngwa

Achọrọ ndebiri ngwa ngwa? Lelee ihe atụ ndị a bụ isi anyị chịkọtara ọnụ:

Grid ezighi ezi

Sistemụ grid ndabara enyere dị ka akụkụ nke Bootstrap bụ grid kọlụm 16 obosara 940px. Ọ bụ ụtọ nke sistemu grid 960 na-ewu ewu, mana enweghị oke / padding n'akụkụ aka ekpe na aka nri.

Ọmụmaatụ akara akara

Dịka egosiri n'ebe a, enwere ike ịmepụta okirikiri nhọrọ ukwuu na "ogidi abụọ," nke ọ bụla na-agbakọ ọnụ ọgụgụ nke kọlụm 16 ntọala anyị kọwara dịka akụkụ nke usoro grid anyị. Lee ihe atụ n'okpuru maka ndịiche ọzọ.

<div klas = "ahịrị" > 
  <div klas = "span6" > 
    ...
  </div>
  <div klas = "span10" > 
    ...
  </div>
</div>

Ogidi akwụ

Akwu ọdịnaya gị ma ọ bụrụ na ị ga-emerịrị site na ịmepụta .rown'ime kọlụm dị.

Ọmụmaatụ nke kọlụm akwụrụ

<div klas = "ahịrị" > 
  <div klas = "span12" > 
    Ọkwa 1 nke kọlụm
    <div klas = "ahịrị" > 
      <div klas = "span6" > 
        Ọkwa 2
      </div>
      <div klas = "span6" > 
        Ọkwa 2
      </div>
    </div>
  </div>
</div>

Nyefee grid nke gị

Ewubere n'ime Bootstrap bụ ọnụ ọgụgụ dị nta nke mgbanwe maka ịhazi sistemu grid 940px ndabara. Site na nhazi ntakịrị, ị nwere ike gbanwee nha nke kọlụm, gọọlụ ha na akpa ha bi.

N'ime grid

Ọdịiche dị mkpa iji megharịa sistemu grid ugbu a niile bi na preboot.less.

Ugbu a hazie

Ịgbanwe grid pụtara ịgbanwe mgbanwe atọ @grid-*na ịchịkọta faịlụ ndị pere mpe.

Bootstrap na-abịa nke ọma ijikwa sistemu grid nwere ogidi 24; ndabara bụ naanị 16. Nke a bụ otú grid variables ga-adị ka ahaziri ka ọ bụrụ grid 24-column.

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

Ozugbo achịkọtara gị, a ga-edozi gị!

Nhazi edoziri

Ihe ndabara na dị mfe 940px-obosara, okirikiri nhọrọ ukwuu maka naanị webụsaịtị ma ọ bụ ibe ọ bụla nke otu faịlụ nyere <div.container>.

<ahụ>
  <div klas = "container" > 
    ...
  </div>
</ ahu>

Nhazi mmiri mmiri

Nhazi ibe ihu mmiri na-agbanwe agbanwe, nke nwere obere- na max-obosara yana akụkụ aka ekpe. Ọ dị mma maka ngwa na docs.

<ahụ>
  <div class = "container-fluid" > 
    <div class = " sidebar" > 
      ...
    </div>
    <div klas = "ọdịnaya" > 
      ...
    </div>
  </div>
</ ahu>

Isi & oyiri

Ọkọlọtọ typographic ọkwa maka ịhazi ibe weebụ gị.

Ihe niile grid ederede dabere na mgbanwe abụọ pere mpe na faịlụ preboot.less anyị: @basefontna @baseline. Nke mbụ bụ nha font-isi ejiri mee ihe niile na nke abụọ bụ ogologo ahịrị ntọala.

Anyị na-eji mgbanwe ndị ahụ, yana ụfọdụ mgbakọ na mwepụ, iji mepụta oke, paddings, na ogologo ahịrị ụdị anyị niile na ndị ọzọ.

h1. Isi nke 1

h2. Isi nke 2

h3. Isi nke 3

h4. Isi nke 4

h5. Isi nke 5

h6. Isi nke 6

Paragraf ọmụmaatụ

Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Nullam id dolor id nibh ultricies vehicula ut id elit.

Isi ihe atụ nwere isi-isi…

Ụdị dị iche iche. ihe

Iji nkwusi okwu ike, adreesị, na ndebiri

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

Mgbe iji

Ekwesịrị iji mkpado mesiri ike ( <strong>na <em>) iji gosi mkpa ọzọ ma ọ bụ mesiri okwu ma ọ bụ nkebiokwu metụtara nnomi ya gbara ya gburugburu. Jiri <strong>maka mkpa yana <em>maka nrụgide nrụgide.

Emesiri ike na 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.

Rịba ama: Ọ ka dị mma iji <b>na <i>mkpado na HTML5 na ha ekwesịghị ịkepụta nkwuwa okwu na italic, n'otu n'otu (ọ bụ ezie na ọ bụrụ na enwere ihe ọmụmụ ihe ọzọ, jiri ya). <b>bu n'obi ime ka okwu ma ọ bụ nkebiokwu pụta ìhè n'ebupụtaghị mkpa ọzọ, ebe ọ <i>na-abụkarị maka olu, okwu teknụzụ, wdg.

Adreesị

A <address>na-eji mmewere ahụ maka ozi kọntaktị maka nna nna ya nso, ma ọ bụ ahụ dum nke ọrụ. Nke a bụ ihe atụ abụọ nke otu a ga-esi jiri ya mee ihe:

Mara: Ahịrị ọ bụla dị na ya <address>ga-akwụsịrịrị na nkwụsị ahịrị ( <br />) ma ọ bụ kechie ya na mkpado ọkwa mgbochi (dịka ọmụmaatụ <p>) iji hazie ọdịnaya nke ọma.

Ndebiri

Maka ndebiri na mkpọghe okwu, jiri <abbr>mkpado ( <acronym>emebiela na HTML5 ). Tinye mpempe akwụkwọ n'ime mkpado ma tọọ aha maka aha zuru ezu.

Ihe mgbochi

<blockquote> <p> <small>

Otu esi ekwu okwu

Iji tinye ihe mgbochi , kechie <blockquote>na mkpado. Jiri mmewere gosi isi mmalite gị ma ị ga-enweta em dash n'ihu ya.<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-eme ka ọ bụrụ ihe na-eme ka ọ bụrụ ihe na-atọ ụtọ.

Dr Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nwere ike ime ka ọ bụrụ ihe na-atọ ụtọ. </p>
  <obere> Dr. Julius Hibbert </small>
</blockquote>

Edeghị iwu<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem na massa
• Facilisis na pretium nisl aliquet
• Ngwa ngwa ngwa ngwa ngwa
  • Phasellus iaculis bụ ihe dị mkpa
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat na
• Faucibus Porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ekebeghị ụdị<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem na massa
• Facilisis na pretium nisl aliquet
• Ngwa ngwa ngwa ngwa ngwa
  • Phasellus iaculis bụ ihe dị mkpa
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat na
• Faucibus Porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Enyere iwu<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem na massa
4. Facilisis na pretium nisl aliquet
5. Ngwa ngwa ngwa ngwa ngwa
6. Faucibus Porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Nkọwadl

Ndepụta nkọwa

Ndepụta nkọwa zuru oke maka ịkọwa okwu.

Euismod

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

Achọpụtaghị m porta gravida na eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Koodu

<code> <pre>

Jiri mkpado abụọ dị mfe tinye koodu gị n'ụdị. Maka ịdị egwu karịa site na javascript, tinye n'ọbá akwụkwọ mara mma nke Google wee hazie gị.

Koodu na-egosi

Koodu, ngọngọ nke ma ọ bụ naanị snippets inline, enwere ike igosipụta ya na ụdị naanị site na ịpịnye na mkpado ziri ezi. Maka ngọngọ koodu na-agafe ọtụtụ ahịrị, jiri <pre>mmewere. Maka koodu inline, jiri <code>mmewere.

<div>
  <h1>Isi </h1>
  <p>Ihe dị ebe a...</p>
</div>

<div> <h1> Isi </h1> <p> Ihe dị ebe a... </p> </ div>
  
  

Akara akara

<span class="label">

Kpọọ ntị ma ọ bụ tụọ akpaokwu ọ bụla na ederede ahụ gị.

Kpọọ ihe ọ bụla

Ọ dịtụla mgbe achọrọ otu n'ime ọhụụ ọhụrụ ahụ mara mma! ma ọ bụ ọkọlọtọ dị mkpa mgbe ị na-ede koodu? Ọfọn, ugbu a ị nwere ha. Nke a bụ ihe agụnyere na ndabara:

Igwe mgbasa ozi

Gosipụta thumbnails nke nha dị iche iche na ibe nwere akara ukwu HTML dị ala yana ụdị obere.

Ihe atụ obere mkpịsị aka

Mkpịsị aka n'ime .media-gridnwere ike ịbụ nha ọ bụla, mana ha na-arụ ọrụ kacha mma mgbe etinyere ya ozugbo na sistemụ grid Bootstrap arụnyere. Obosara onyonyo dị ka 90, 210 na 330 jikọtara ya na pikselụ ole na ole nke padding ka ha nhata nha .span2, .span4, na .span6kọlụm.

Nnukwu

Ọkara

Obere

Na-etinye koodu ha

Igwe mgbasa ozi dị mfe iji ma dịkwa mfe n'akụkụ akara. Akụkụ ha na-adabere naanị na nha onyonyo agụnyere.

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

Tebụl ụlọ

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

Tebụl dị mma - maka ọtụtụ ihe. Tebụl ndị mara mma, Otú ọ dị, chọrọ ntakịrị ịhụnanya nrịbama ka ọ bụrụ ihe bara uru, nke a na-atụgharị, na nke a na-agụ (na ọkwa koodu). Nke a bụ ndụmọdụ ole na ole iji nyere aka.

Kechie ndị nkụnye eji isi mee kọlụm gị mgbe niile n'ụdị ọkwa <thead>ahụ bụ <thead>> <tr>> <th>.

Dị ka ndị nkụnye eji isi mee kọlụm, ọdịnaya ahụ dị na tebụl gị niile kwesịrị ka a kechie ya <tbody>ka ndị isi gị wee bụrụ <tbody>> <tr>> <td>.

Ọmụmaatụ: Ụdị tebụl nke emeghị eme

A ga-eji naanị oke dị mkpa hazie tebụl niile na-akpaghị aka iji hụ na enwere ike ịgụ na idobe nhazi. Ọ dịghị mkpa ịgbakwunye klaasị ma ọ bụ àgwà.

<tebụl>
  ...
</table>

Ọmụmaatụ: Ahịhịa zebra

Nweta ntakịrị mmasị na tebụl gị site na ịgbakwunye zebra-striping - naanị tinye .zebra-stripedklas ahụ.

Mara: Zebra-striping bụ nkwalite na-aga n'ihu adịghị maka ihe nchọgharị ochie dị ka IE8 na n'okpuru.

<tebụl klas = "zebra-striped" > 
...
</table>

Ọmụmaatụ: Zebra-striped w/TableSorter.js

N'iji ihe atụ gara aga, anyị na-emeziwanye uru nke tebụl anyị site n'inye ọrụ nhazi site na jQuery na Tablesorter plugin. Pịa nkụnye eji isi mee kọlụm ọ bụla ka ịgbanwee ụdị.

<script src = "js/jquery/jquery.tablesorter.min.js" >> script> 
<edemede > 
  $ ( ọrụ () { 
    $ ( "okpokoro#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  }
</script>
<tebụl klas = "zebra-striped" > 
  ...
</table>

Ụdị ndị ezighi ezi

A na-enye ụdịdị niile ka ọ bụrụ nke dabara adaba iji weta ha n'ụzọ enwere ike ịgụ na scalable. Enyere ụdị maka ntinye ederede, ndepụta họrọ, ebe ederede, bọtịnụ redio na igbe nlele, na bọtịnụ.

Ụdị ekpokọtara

Tinye .form-stackedna HTML ụdị gị ma ị ga-enwe akara n'elu ubi ha kama ịnọ n'aka ekpe ha. Nke a na-arụ ọrụ nke ọma ma ọ bụrụ na ụdị gị dị mkpụmkpụ ma ọ bụ na ị nwere ogidi abụọ nke ntinye maka ụdị dị arọ.

Ụdị nha ubi

Hazie ụdị ọ bụla input, , select, ma ọ bụ textareaobosara site n'ịgbakwunye naanị klaasị ole na ole na akara gị.

Dịka nke v1.3.0, anyị agbakwunyela klaasị nha dabere na grid maka ụdị ụdị. Biko jiri ihe ndị a karịa klaasị dị .mini, .small, wdg.

Bọtịnụ

Dịka mgbakọ, a na-eji bọtịnụ eme ihe mgbe ejiri njikọ mee ihe. Dịka ọmụmaatụ, "Download" nwere ike ịbụ bọtịnụ yana "ọrụ na-adịbeghị anya" nwere ike ịbụ njikọ.

Bọtịnụ niile dabara na ụdị isi awọ dị ọkụ, mana enwere ike itinye ọtụtụ klaasị arụ ọrụ maka ụdị agba dị iche iche. Klas ndị a gụnyere klaasị na-acha anụnụ anụnụ .primary, klaasị-acha anụnụ anụnụ .info, klaasị akwụkwọ ndụ akwụkwọ ndụ .success, na klaasị ọbara ọbara .danger.

Bọtịnụ ihe atụ

Enwere ike itinye ụdị bọtịnụ na ihe ọ bụla na .btnetinyere ya. Ọ na-adịkarị, ị ga-achọ itinye ndị a na naanị <a>, <button>, ma họrọ <input>ihe. Nke a bụ ka ọ dị:

Nha ọzọ

Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Nwee ya!

Ọnọdụ nkwarụ

Maka bọtịnụ ndị na-adịghị arụ ọrụ ma ọ bụ ndị ngwa nwere nkwarụ maka otu ihe ma ọ bụ ọzọ, jiri steeti nkwarụ. Nke ahụ bụ .disabledmaka njikọ na :disabledmaka <button>ihe.

Njikọ

Bọtịnụ

Kedu ihe ọ bụ

Topbar anyị bụ ụlọ mmanya edobere nke nwere akara ma ọ bụ aha webụsaịtị, igodo ụzọ na ụdị ọchụchọ.

Enwere ike ịhazi ya

Ihe niile dị n'ime, yana topbar dum, bụ nhọrọ. Ị nwere ike ịhọrọ itinye akara/aha, igodo, ọchụchọ na ụgbọ mmiri nke abụọ-ma ọ bụ ngwakọta ọ bụla nke ahụ.

Mbudata gụnyere

Dịka akụkụ nke igodo igodo, anyị etinyela ikike ị gbakwunye mkpọda na ụgbọ mmiri gị. Lelee ụgbọ mmiri nke abụọ dị n'elu (dakọtara aka nri) ka ịhụ ka esi eme ya. Mkpado dropdown lina-akwadokwa .activeigosi nhọrọ ibe dị ugbu a.

Taabụ na ọgwụ

Mepụta igodo nsoro dị mfe site na iji a <ul>. Gbanwee n'etiti taabụ ma ọ bụ ọgwụ site na ịgbakwunye klaasị kwesịrị ekwesị.

Ọ dị mma maka obere akụkụ nke ọdịnaya dị ka ibe ntọala akaụntụ anyị yana usoro oge onye ọrụ maka ịtụgharị n'etiti ibe ọdịnaya. Dị na tabbed ma ọ bụ pill ụdị.

• Ụlọ
• Profaịlụ
• Ozi
• Ntọala
• Kpọtụrụ
• Wedaa
  • Njikọ nke abụọ
  • Ihe ọzọ ebe a
  • Njikọ ọzọ

<ul klas = "taabụ" > 
  <li class = "ọrụ" ><a href = "#" > Ụlọ </a></li>  
  <li><a href = "#" > Profaịlụ </a></li> 
  <li><a href = "#" > Ozi </a></li> 
  <li><a href = "#" > Ntọala </a></li> 
  <li><a href = "#" > Kọntaktị </a></li> 
</ul>

• Ụlọ
• Profaịlụ
• Ozi
• Ntọala
• Kpọtụrụ

<ul klas = "ọgwụ" > 
  <li class = "ọrụ" ><a href = "#" > Ụlọ </a></li>  
  <li><a href = "#" > Profaịlụ </a></li> 
  <li><a href = "#" > Ozi </a></li> 
  <li><a href = "#" > Ntọala </a></li> 
  <li><a href = "#" > Kọntaktị </a></li> 
</ul>

Nri achịcha

A na-eji igodo crumb eme ihe dị ka ụzọ iji gosi ndị ọrụ ebe ha nọ n'ime ngwa ma ọ bụ saịtị, mana ọ bụghị maka igodo igodo.

• Ụlọ

• Ụlọ /
• Ebe etiti

• Ụlọ /
• ibe etiti /
• Nke ọzọ

• Ụlọ /
• ibe etiti /
• Ọzọ /
• Ị nọ ebe a

<ul klas = "achịcha achịcha" > 
  <li><a href = "#" > Ụlọ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > ibe etiti </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ọzọ </a> <span class = "divider" > / </span></li>   
  <li class = "arụ ọrụ" > Ị nọ ebe a </li> 
</ul>

Pagination

Pagination dị mfe ma dị ntakịrị nke sitere n'ike mmụọ nsọ Rdio. Nnukwu ngọngọ siri ike ịgbaghara, na-adị mfe ịrị elu, ma na-enye nnukwu mpaghara pịa.

<div klas = "pagination" > 
  <ul>
    <li class = "Agbanyụrụ nke gara aga" ><a href = "#" > ← Nke gara aga </a></li>  
    <li class = "ọrụ" ><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 = "na-esote" ><a href = "#" > Ọzọ → </a></li>  
  </ul>
</div>

Ngosipụta isi

.alert-message

Ozi otu ahịrị maka igosipụta ọdịda, ọdịda enwere ike, ma ọ bụ ịga nke ọma nke ihe omume. Karịsịa bara uru maka ụdị.

Nweta javascript »

Koodu atụ

<div class = "ịdọ aka na ntị-ozi ịdọ aka ná ntị" > 
  <a class = "emechi" href = "#" > × </a>  
  <p><strong> Guacamole dị nsọ! </strong> Lelee kacha mma maka onwe gị, ị naghị adị oke mma. </p>
</div>

Gbochie ozi

.alert-message.block-message

Maka ozi chọrọ ntakịrị nkọwa, anyị nwere ọkwa ọkwa paragraf. Ndị a zuru oke maka iwepụta ozi njehie dị ogologo, dọọ onye ọrụ aka na ntị maka ihe na-echere, ma ọ bụ naanị iwepụta ozi maka itinyekwu ike na ibe ahụ.

Nweta javascript »

Koodu atụ

<div class = "alert-message block-message ịdọ aka ná ntị" > 
  <a class = "emechi" href = "#" > × </a>  
  <p><strong> Guacamole dị nsọ! Nke a bụ ịdọ aka ná ntị! </strong> Lelee kacha mma maka onwe gị, ị naghị adị oke mma. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel selerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Mee ihe a </a> <a class = "btn small" href = "#" > Ma ọ bụ mee nke a </a>     
  </div>
</div>

Ụdị ụdị

Modals — dialogs ma ọ bụ igbe ọkụ — dị mma maka omume ọnọdụ n'ọnọdụ ebe ọ dị mkpa ka edobe ọnọdụ ndabere.

Nweta javascript »

Ntuziaka ngwaọrụ

Twipsies bara uru nke ukwuu maka inyere onye ọrụ mgbagwoju anya aka na ịtụ ha aka n'ụzọ ziri ezi.

Nweta javascript »

Popovers

Jiri popovers iji nye ozi subtextual na ibe na-emetụtaghị okirikiri nhọrọ ukwuu.

Nweta javascript »

Na-amalite

Ijikọ javascript na ọbá akwụkwọ Bootstrap dị mfe nke ukwuu. N'okpuru ebe a, anyị na-agafe isi ihe ma nye gị ụfọdụ plugins dị egwu ka ị malite!

Lelee dọkụmentị javascript »

Kedu ihe gụnyere

Weta ụfọdụ ihe ndị bụ isi nke Bootstrap na ngwa mgbakwunye omenala ọhụrụ na-arụ ọrụ na jQuery na Ender . Anyị na-agba gị ume ịgbatị ma gbanwee ha ka ọ dabara mkpa mmepe gị.

Javascript ọ dị mkpa?

Mba! Emebere Bootstrap nke mbụ ka ọ bụrụ ọbá akwụkwọ CSS. Javascript a na-enye oyi akwa mmekọrịta n'elu ụdị agụnyere.

Agbanyeghị, maka ndị chọrọ javascript, anyị enyela plugins ndị dị n'elu iji nyere gị aka ịghọta otu esi ejikọ Bootstrap na javascript yana ịnye gị ngwa ngwa, nhọrọ dị fechaa maka ọrụ bụ isi ozugbo.

Maka ozi ndị ọzọ na ịhụ ụfọdụ ngosi ngosi dị ndụ, biko rụtụ aka na ibe ngwa mgbakwunye anyị .