Nhwɛso ahorow a wɔde fi ase ntɛmntɛm

Wo hia template ahorow bi a ɛyɛ ntɛm? Hwɛ nhwɛso atitiriw yi a yɛde abom:

Grid a wɔde ahyɛ mu

Default grid nhyehyɛe a wɔde ama sɛ Bootstrap fã no yɛ 940px trɛw 16-column grid. Ɛyɛ 960 grid nhyehyɛe a agye din no dɛ, nanso enni margin/padding foforo a ɛwɔ benkum ne nifa so.

Nhwɛso grid markup

Sɛnea wɔakyerɛ wɔ ha no, wobetumi ayɛ nhyehyɛe titiriw bi a "adum" abien, emu biara trɛw fapem adum 16 a yɛkyerɛkyerɛɛ mu sɛ yɛn grid nhyehyɛe no fã no dodow bi mu. Hwɛ nhwɛso ahorow a ɛwɔ ase hɔ no na woahu nsakrae pii.

<div adesuakuw = "row" > 
  <div adesuakuw = "span6" > 
    ...
  </div> no
  <div adesuakuw = "span10" > 
    ...
  </div> no
</div> no

Nesting columns a wɔde hyɛ mu

Nest wo content sɛ ɛsɛ sɛ wo denam a wobɛbɔ .rowwɔ column a ɛwɔ hɔ dedaw mu no so.

Nhwɛso a ɛfa nested columns ho

<div adesuakuw = "row" > 
  <div adesuakuw = "span12" > 
    Level 1 a ɛwɔ kɔla no mu
    <div adesuakuw = "row" > 
      <div adesuakuw = "span6" > 
        Ɔfa 2
      </div> no
      <div adesuakuw = "span6" > 
        Ɔfa 2
      </div> no
    </div> no
  </div> no
</div> no

Roll w’ankasa grid no

Wɔasi wɔ Bootstrap mu no yɛ nsa kakraa bi a ɛsakra a wɔde siesie default 940px grid nhyehyɛe no. Sɛ woyɛ nsakrae kakra a, wubetumi asesa adum no kɛse, ne nsu a ɛkɔ mu, ne ade a wɔde gu mu no mu.

Wɔ grid no mu

Nsakraeɛ a ɛhia na wɔde sesa grid nhyehyɛeɛ no mprempren nyinaa te preboot.less.

Afei sɛ wobɛma woayɛ nea wopɛ

Grid no a wobɛsesa no kyerɛ sɛ wobɛsesa @grid-*variables abiɛsa no na woasan aboaboa Less fael ahorow no ano.

Bootstrap ba a wɔasiesie no sɛnea ɛbɛyɛ a ebetumi adi grid nhyehyɛe a ɛwɔ adum a ɛkɔ 24 ho dwuma; default no yɛ 16 pɛ. Ɛha na wo grid variables no bɛhwɛ customized ama 24-column grid.

@gridNsɛm a Wɔde Kyerɛw Nsɛm : 24 ;       
@gridKɔla no Trɛw : 20px ;   
@gridGutterTrɛw : 20px ;   

Sɛ wosan boaboa ano wie a, wɔbɛhyehyɛ wo!

Wɔasiesie nhyehyɛe

Default ne mmerɛw 940px-trɛw, mfinimfini nhyehyɛe ma ɛkame ayɛ sɛ wɛbsaet anaa kratafa biara a obiako de ama <div.container>.

<nipadua>
  <div adesuakuw = "adekorabea" > 
    ...
  </div> no
</nipadua>

Nsu nhyehyɛe

Nsu kratafa nhyehyɛe foforo a ɛyɛ mmerɛw a ɛwɔ min- ne max-trɛw ne benkum so afã bi. Ɔkɛseɛ ma apps ne docs.

<nipadua>
  <div class = "ahina-nsuo" > 
    <div adesuakuw = "afã" > 
      ...
    </div> no
    <div class = "nsɛm a ɛwɔ mu" > 
      ...
    </div> no
  </div> no
</nipadua>

Nsɛmti & copy

Typographic hierarchy a ɛyɛ gyinapɛn a wɔde hyehyɛ wo wɛbsaet nkratafa.

Typographic grid no nyinaa gyina Less variables abien so wɔ yɛn preboot.less fael no mu: @basefontne @baseline. Nea edi kan ne base font-size a wɔde di dwuma wɔ ne nyinaa mu na nea ɛto so abien ne base line-height.

Yɛde saa variables no, ne akontabuo bi, yɛ margins, paddings, ne line-heights a ɛwɔ yɛn type no nyinaa ne nea ɛkeka ho.

h1. Asɛmti 1

h2. Asɛmti 2

h3. Asɛmti 3

h4. Asɛmti 4

h5. Asɛmti 5

h6. Asɛmti 6

Nhwɛso nkyekyem

Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Nhwɛso asɛmti Wɔ asɛmti ketewa...

Nneɛma ahorow. nneɛma a ɛwɔ mu

Fa nsɛm a wosi so dua, address ahorow, & nsɛmfua ntiantiaa a wɔde di dwuma

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

Bere a ɛsɛ sɛ wɔde di dwuma

Ɛsɛ sɛ wɔde nkyerɛwde a wɔde si so dua ( <strong>ne <em>) di dwuma de kyerɛ hia foforo a asɛmfua anaa kasasin bi ho hia anaasɛ wosi so dua bere a wɔde toto nea atwa ho ahyia no ho. Fa di dwuma <strong>ma hia a ɛho hia ne adwennwen a<em> wosi so dua.

Si so dua wɔ nkyekyɛm bi mu

Fusce dapibus , tellus ac cursus commodo , tortor mauris aduru a wɔde yɛ aduan nibh , ut aduru a wɔde yɛ aduru a wɔde yɛ aduru a wɔde yɛ aduan a ɛyɛ mmerɛw sɛ wobɛtra ase amet risus. Maecenas faucibus mollis a ɛwɔ ntam no. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Hyɛ no nsow: Ɛda so ara yɛ papa sɛ wode bedi dwuma <b>ne <i>tags wɔ HTML5 mu na enhia sɛ wɔde styled bold ne italic, sɛnea ɛte biara (ɛwom sɛ sɛ semantic element bi wɔ hɔ a, fa di dwuma). <b>no kyerɛ sɛ ɛbɛtwe adwene asi nsɛmfua anaa nsɛmfua so a ɛrenkyerɛ hia foforo, bere a <i>ɛyɛ nea ɛfa nne, mfiridwuma mu nsɛmfua, ne nea ɛkeka ho ho titiriw.

Address ahorow

Wɔde <address>element no di dwuma ma nkitahodi ho nsɛm ma ne nana a ɔbɛn no paa, anaa adwuma no nyinaa. Sɛnea wobetumi de adi dwuma ho nhwɛso abien ni:

Hyɛ no nsow: Ɛsɛ sɛ nkyerɛwde biara a ɛwɔ an mu <address>no de line-break ( <br />) ba awiei anaasɛ wɔde block-level tag (sɛ nhwɛso no, <p>) kyekyere ho na ama wɔahyehyɛ emu nsɛm no yiye.

Nsɛmfua a wɔatwa no tiaa

Sɛ wopɛ nsɛmfua ntiantiaa ne nsɛmfua a wɔatwa no tiaa a, fa <abbr>tag ( <acronym>wɔagyae wɔ HTML5 mu ). Fa nkyerɛwde tiawa no hyɛ tag no mu na fa asɛmti bi si hɔ ma edin mũ no nyinaa.

Nsɛm a wɔde siw ano

<blockquote> <p> <small>

Sɛnea wobɛfa asɛm aka

Sɛ wode blockquote bɛka ho a, fa kyekyere <blockquote>ho <p>na fa <small>tag ahorow. Fa <small>element no fa wo source no ka na wobɛnya em dash —ansa na ɛreba.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Integer posuere erat a ɛyɛ ante venenatis dapibus a ɛkyerɛ sɛnea obi te no.

Ɔbenfo Julius Hibbert na ɔkyerɛwee

<asɛm a wɔde siw ano>
  | _ Integer posuere erat a ɛyɛ ante venenatis dapibus a ɛkyerɛ sɛnea obi te no. </p> no
  <ketewa> Oduruyɛfo Julius Hibbert </ketewa>
</blockquote> a wɔde kyerɛw nsɛm

Wɔnhyɛ da<ul>

• Lorem ipsum dolor tena ase amet
• Consectetur adipiscing a ɛyɛ fɛ yiye
• Integer molestie lorem wɔ massa no mu
• Facilisis a ɛwɔ pretium nisl aliquet mu
• Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
  • Phasellus iaculis a ɛwɔ nipadua no mu
  • Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
  • Vestibulum laoreet hyɛn gyinabea sem
  • Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
• Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
• Aenean tena ase amet erat nunc
• Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

Wɔannwene no<ul.unstyled>

• Lorem ipsum dolor tena ase amet
• Consectetur adipiscing a ɛyɛ fɛ yiye
• Integer molestie lorem wɔ massa no mu
• Facilisis a ɛwɔ pretium nisl aliquet mu
• Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
  • Phasellus iaculis a ɛwɔ nipadua no mu
  • Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
  • Vestibulum laoreet hyɛn gyinabea sem
  • Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
• Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
• Aenean tena ase amet erat nunc
• Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

Wɔahyɛ sɛ<ol>

1. Lorem ipsum dolor tena ase amet
2. Consectetur adipiscing a ɛyɛ fɛ yiye
3. Integer molestie lorem wɔ massa no mu
4. Facilisis a ɛwɔ pretium nisl aliquet mu
5. Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
6. Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
7. Aenean tena ase amet erat nunc
8. Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

Nkyerɛmudl

Nkyerɛkyerɛmu a wɔahyehyɛ

Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.

Euismod ho asɛm

Vestibulum id ligula porta felis euismod awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.

Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.

Malesuada a ɛwɔ porta

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Mmarahyɛ Bagua

<code> <pre>

Pimp wo code wɔ style mu ne tag abien a ɛnyɛ den. Sɛ wopɛ awesomeness kɛse mpo denam javascript so a, to Google code prettify nhomakorabea no mu na woayɛ nhyehyɛe.

Mmara a wɔde ma

Code, blocks of anaasɛ snippets kɛkɛ inline, betumi ada no adi ne style denam wrapping wɔ tag a ɛfata no mu ara kwa so. Sɛ wopɛ blocks of code a ɛtrɛw nkyerɛwde ahorow pii mu a, fa <pre>element no di dwuma. Sɛ wopɛ inline code a, fa <code>element no di dwuma.

<div> no
  <h1>Asɛmti</h1>
  <p>Biribi wɔ ha yi ara...</p>
</div> no

<div> <h1> Asɛmti </h1> <p> Biribi wɔ ha yi ara... </p> </div>
  
  

Inline nkyerɛwde ahorow

<span class="label">

Twe adwene si kasasin biara a ɛwɔ wo nipadua mu nsɛm mu so anaasɛ fa frankaa hyɛ mu.

Fa biribiara din hyɛ mu

Daa na ehia saa Foforo a ɛyɛ fɛ no mu biako! anaasɛ Frɛmfrɛm a ɛho hia bere a worekyerɛw koodu no? Wiɛ, afei deɛ wowɔ wɔn. Nea ɛka ho default no ni:

Nsɛm ho amanneɛbɔfo grid

Kyerɛ mfonini nketewa a ɛsono ne kɛse wɔ nkratafa a HTML nan ase nkyerɛwee a ɛba fam ne ɔkwan a wɔfa so yɛ no kakraa bi na ɛwɔ so.

Nhwɛso mfonini nketewa

Mfonini nketewa a ɛwɔ mu no .media-gridbetumi ayɛ kɛse biara, nanso ɛyɛ adwuma yiye bere a wɔde map tẽẽ akɔ Bootstrap grid nhyehyɛe a wɔasisi no mu no. Mfonini ntrɛwmu te sɛ 90, 210, ne 330 ka bom ne piksel kakraa bi a wɔde ahyɛ mu ma ɛne .span2, .span4, ne .span6kɔla akɛse no yɛ pɛ.

Kakraa

Kwan

Ketewa

Coding a wɔde kyerɛw wɔn

Media grids yɛ mmerɛw sɛ wode bedi dwuma na mmom ɛyɛ mmerɛw wɔ markup fã no. Wɔn nsusuwii gyina mfonini ahorow a ɛka ho no kɛse so ara kwa.

<ul adesuakuw = "nsɛm ho amanneɛbɔ-grid" > 
  <li> no
    <a href = "#" > na ɛwɔ hɔ 
      <img class = "mfonini ketewa" src = "https://beae.it/330x230" alt = "" >   
    </a>
  </li>
  <li> no
    <a href = "#" > na ɛwɔ hɔ 
      <img class = "mfonini ketewa" src = "https://beae.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Apon a wɔde si so

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

Tables yɛ kɛse —ma nneɛma pii. Nanso, table akɛse hia markup dɔ kakra na ama ayɛ nea mfaso wɔ so, a wotumi sesa, na wotumi kenkan (wɔ code level no so). Afotusɛm kakraa bi a ɛbɛboa ni.

Bere nyinaa fa wo column headers no kyekyere sɛnea <thead>ɛbɛyɛ a hierarchy bɛyɛ <thead>> <tr>> <th>.

Te sɛ column headers no, ɛsɛ sɛ wode wo table no nipadua mu nsɛm nyinaa kyekyere a <tbody>enti wo hierarchy no yɛ <tbody>> <tr>> <td>.

Nhwɛso: Default table styles

Wɔbɛyɛ tables nyinaa styled automatically a borders a ɛho hia nkutoo na ama wɔatumi akenkan na wɔakura nhyehyɛe mu. Ɛho nhia sɛ wode adesua anaa su afoforo bɛka ho.

<pon>
  ...
</table> no

Nhwɛso: Ɔsebɔ-a ɛyɛ nsensanee

Nya wo pon ahorow no ho fɛfɛɛfɛ kakra denam zebra-striping a wode bɛka ho no so —fa .zebra-stripedadesuakuw no ka ho ara kwa.

Hyɛ no nsow: Zebra-striping yɛ nkɔso a ɛkɔ so a enni hɔ mma browser dedaw te sɛ IE8 ne nea ɛwɔ ase ha.

<pon adesuakuw = "zebra-striped" > 
...
</table> no

Nhwɛso: Ɔsebɔ-a ɛyɛ nsensanee w/ TableSorter.js

Sɛ yɛfa nhwɛsoɔ a atwam no a, yɛma yɛn tables no mfasoɔ tu mpɔn denam sorting dwumadie a yɛde ma denam jQuery ne Tablesorter plugin no so. Klik kɔla biara atiri so na sesa sɛnea wɔahyehyɛ no.

<script src = "js/jquery/jquery.ponsorter.min.js" ></script> 
<nkyerɛwee > 
  $ ( dwumadie () { . 
    $ ( "table#sortTableNhwɛso" ). tablesorter ({ nhyehyɛe a wɔahyehyɛ : [[ 1 , 0 ]] });  
  });
</script>
<pon adesuakuw = "zebra-striped" > 
  ...
</table> no

Default ahorow a wɔde yɛ nneɛma

Wɔama nkrataa no nyinaa default styles a wɔde bɛkyerɛ wɔ ɔkwan a wotumi kenkan na wotumi sesa so. Wɔde nsɛm a wɔde hyɛ mu, nsɛm a wɔahyehyɛ a wɔpaw, mmeae a wɔkyerɛw nsɛm, radio bɔtn ne nnaka a wɔde hyɛ mu, ne bɔtn ahorow ama.

Nkrataa a wɔaboaboa ano

Fa ka .form-stackedwo form no HTML ho na wobɛnya labels wɔ wɔn fields atifi sen sɛ ɛbɛkɔ wɔn benkum so. Eyi yɛ adwuma yiye sɛ wo nkrataa no yɛ tiaa anaasɛ wowɔ nkyerɛwde abien a wɔde hyɛ mu ma nkrataa a emu yɛ duru a.

Kyerɛw afuw akɛse

Fa kratasin input, select, anaa textareane tɛtrɛtɛ biara yɛ nea wopɛ denam adesua kakraa bi pɛ a wode bɛka wo agyiraehyɛde no ho no so.

Ɛde besi v1.3.0 no, yɛde grid-gyina sizing classes no aka ho ama form elements. Yɛsrɛ sɛ fa eyinom no di dwuma wɔ .mini, .small, etc adesua ahorow a ɛwɔ hɔ dedaw no so.

Nsɛmma nhoma no

Sɛ́ nhyiam no, wɔde bɔton di dwuma ma nneyɛe bere a wɔde link ahorow di dwuma ma nneɛma. Sɛ nhwɛso no, "Twe" betumi ayɛ bɔtn na "nnansa yi dwumadi" betumi ayɛ link.

Buttons nyinaa default kɔ light gray style, nanso wobetumi de functional class dodow bi adi dwuma ama color styles ahorow. Saa adesua ahorow yi bi ne adesuakuw a ɛyɛ bruu .primary, adesuakuw a ɛyɛ bruu a ɛyɛ hann .info, adesuakuw a ɛyɛ ahabammono .success, ne adesuakuw a ɛyɛ kɔkɔɔ .danger.

Nhwɛsode ahorow a wɔde yɛ nneɛma

Button styles betumi adi dwuma wɔ biribiara a wɔde adi .btndwuma no so. Mpɛn pii no wobɛpɛ sɛ wode eyinom di dwuma wɔ <a>, <button>, ne nneɛma a wɔpaw nkutoo <input>so. Sɛnea ɛte ni:

Fa akɛse a ɛsesa

Fancy akɛse anaa nketewa buttons? Nya wɔ ho!

Tebea a wɔadi dɛm

Sɛ wopɛ button ahorow a ɛnyɛ adwuma anaasɛ app no ​​agyae esiane biribi anaa biribi foforo nti a, fa tebea a wɔagyae no di dwuma. Ɛno yɛ .disabledma links ne :disabledma <button>elements.

Nkitahodi ahorow

Nsɛmma nhoma no

Dɛn ne no

Yɛn topbar yɛ fixed bar a ɛwɔ wɛbsaet bi ahyɛnsode anaa din, akwankyerɛ titiriw, ne nhwehwɛmu kratasin.

Wobetumi ayɛ no sɛnea wɔpɛ

Nneɛma a ɛwɔ mu nyinaa, ne topbar no nyinaa nso, yɛ nea wopɛ. Wubetumi apaw sɛ wode logo/din, nav, search, ne nav a ɛto so abien bɛka ho—anaasɛ nea wɔaka abom biara.

Dropdowns ka ho

Sɛ́ navigation titiriw no fã no, yɛde tumi a ɛbɛma woatumi de dropdowns aka wo nav no ho aka ho. Hwɛ secondary nav a ɛwɔ atifi hɔ (right aligned) no na hwɛ sɛnea wɔayɛ no. Dropdowns litags nso boa .activema wɔkyerɛ mprempren krataafa a wɔapaw.

Tabs ne pills a wɔde di dwuma

Yɛ akwantuo a ɛtɔ so mmienu a ɛnyɛ den a wode <ul>. Fa tabs anaa pills sesa denam adesuakuw a ɛfata a wode bɛka ho no so.

Ɔkɛseɛ ma nsɛm no afã nketewa te sɛ yɛn akontaabu nhyehyɛe nkratafa ne ɔdefo bere nhyehyɛe ma toggling ntam nkratafa a ɛte sɛ nsɛm. Wobetumi anya wɔ tabbed anaa pill ahorow mu.

• Fie
• Ho asɛm
• Nkrasɛm ahorow
• Nsiesiei ahorow
• Di nkutaho
• Dropdown a ɛwɔ hɔ
  • Nkitahodi a ɛto so abien
  • Biribi foforo nso wɔ ha
  • Link foforo nso

<ul adesuakuw = "tabs" > 
  <li adesuakuw = "adwumayɛ" ><a href = "#" > Ofie </a></li>  
  <li><a href = "#" > Nsɛm a ɛfa ho </a></li> 
  <li><a href = "#" > Nkrasɛm </a></li> 
  <li><a href = "#" > Nsiesiei ahorow </a></li> 
  <li><a href = "#" > Nkitahodi </a></li> 
</ul>

• Fie
• Ho asɛm
• Nkrasɛm ahorow
• Nsiesiei ahorow
• Di nkutaho

<ul adesuakuw = "nnuru" > 
  <li adesuakuw = "adwumayɛ" ><a href = "#" > Ofie </a></li>  
  <li><a href = "#" > Nsɛm a ɛfa ho </a></li> 
  <li><a href = "#" > Nkrasɛm </a></li> 
  <li><a href = "#" > Nsiesiei ahorow </a></li> 
  <li><a href = "#" > Nkitahodi </a></li> 
</ul>

Abodoo a wɔayam

Wɔde breadcrumb navigation di dwuma sɛ ɔkwan a wɔfa so kyerɛ wɔn a wɔde di dwuma no baabi a wɔwɔ wɔ app anaa wɛbsaet bi mu, nanso ɛnyɛ sɛ wɔde hwehwɛ akwantu titiriw.

• Fie

• Home / .
• Mfinimfini kratafa

• Home / .
• Mfinimfini kratafa / .
• Ɔfoforo nso

• Home / .
• Mfinimfini kratafa / .
• Ɔfoforo nso / .
• Wowɔ ha

<ul class = "abodoo a wɔayam" > 
  <li><a href = "#" > Fie </a> <span adesuakuw = "nkyekyɛmu" > / </span></li>   
  <li><a href = "#" > Mfinimfini krataafa </a> <span adesuakuw = "nkyekyɛmu" > / </span></li>   
  <li><a href = "#" > Ɔfoforo nso </a> <span class = "nkyekyɛmu" > / </span></li>   
  <li class = "active" > Wowɔ ha </li> 
</ul>

Nkratafa a wɔde kyerɛw nsɛm

Ultra simplistic na minimally styled pagination a Rdio na ɛde honhom kaa no. Block kɛse no yɛ den sɛ wobɛpa ho kyɛw, ɛnyɛ den sɛ wobɛsesa, na ɛma mmeae akɛse a wobɛbɔ.

<div adesuakuw = "kratafa" > 
  <ul> no
    <li class = "a wɔadi kan ayɛ adwuma" ><a href = "#" > ← Nea atwam </a></li>  
    <li adesuakuw = "adwumayɛ" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 3 </a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 4 ​​</a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 5 </a></li> na ɛwɔ hɔ 
    <li class = "nea edi hɔ" ><a href = "#" > Nea edi hɔ → </a></li> na ɛwɔ hɔ  
  </ul>
</div> no

Kɔkɔbɔ atitiriw

.alert-message

Nkrasɛm a ɛwɔ ɔfa biako a wɔde si adeyɛ bi huammɔdi, huammɔdi a ebetumi aba, anaa nkonimdi so dua. Mfaso wɔ so titiriw ma nkrataa ahorow.

Nya javascript no » .

Nhwɛso a ɛfa mmara ho

<div class = "kɔkɔbɔ-nkrasɛm kɔkɔbɔ" > 
  <a adesuakuw = "to" href = "#" > × </a>  
  <p><strong> Guacamole kronkron! </strong> Best check yo self, wo nnyɛ fɛ dodo. </p> no
</div> no

Siw nkrasɛm ano

.alert-message.block-message

Wɔ nkrasɛm a ɛhwehwɛ sɛ wɔkyerɛkyerɛ mu kakra no, yɛwɔ nkyekyɛm kwan so kɔkɔbɔ ahorow. Eyinom yɛ nea eye ma mfomso nkrasɛm atenten a wɔde bubbling, kɔkɔbɔ a wɔde bɔ obi a ɔde di dwuma wɔ adeyɛ bi a ɛda so ara wɔ hɔ ho, anaasɛ nsɛm a wɔde bɛma kɛkɛ de asi so dua kɛse wɔ kratafa no so.

Nya javascript no » .

Nhwɛso a ɛfa mmara ho

<div class = "alert-nkrasɛm block-nkrasɛm kɔkɔbɔ" > 
  <a adesuakuw = "to" href = "#" > × </a>  
  <p><strong> Guacamole kronkron! Eyi yɛ kɔkɔbɔ! </strong> Best check yo self, wo nnyɛ fɛ dodo. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so. Praesent commodo cursus magna, vel scelerisque nisl consectetur ne nea wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so. </p> no
  <div class = "kɔkɔbɔ-nneɛma" > 
    <a class = "btn ketewa" href = "#" > Yɛ adeyɛ yi </a> <a class = "btn ketewa" href = "#" > Anaasɛ yɛ eyi </a>     
  </div> no
</div> no

Modal ahorow a wɔde di dwuma

Modals —nkɔmmɔbɔ anaa hann nnaka —yɛ papa ma nsɛm a ɛfa ho nneyɛe wɔ tebea horow a ɛho hia sɛ wɔhwɛ akyi nsɛm a ɛfa ho no so.

Nya javascript no » .

Nnwinnade Ho Afotu

Twipsies yɛ super mfaso ma mmoa a ɔde di dwuma a n’adwene atu afra na ɛkyerɛ wɔn kwan pa.

Nya javascript no » .

Popovers a wɔde wɔn ho hyɛ mu

Fa popovers di dwuma fa nsɛm a ɛwɔ nsɛm ase no ma kratafa bi a ɛrenka nhyehyɛe no.

Nya javascript no » .

Sɛnea worefi ase

Javascript a wode bɛka Bootstrap nhomakorabea no ho no yɛ super easy. Ase hɔ no yɛkɔ mfitiaseɛ no so na yɛde plugins bi a ɛyɛ hu ma wo de hyɛ aseɛ!

Hwɛ javascript ho nkrataa »

Nea ɛka ho

Fa Bootstrap no afã atitiriw no bi ba nkwa mu denam custom plugins foforo a ɛne jQuery ne Ender yɛ adwuma so . Yɛhyɛ wo nkuran sɛ trɛw mu na yɛ nsakrae ma ɛne wo nkɔso ahiade pɔtee no nhyia.

So javascript ho hia?

Daabi! Wɔayɛ Bootstrap a edi kan ne nea ɛho hia sen biara sɛ ɛbɛyɛ CSS nhomakorabea. Saa javascript yi ma nkitahodi layer titiriw bi wɔ style ahorow a ɛka ho no atifi.

Nanso, wɔn a wohia javascript no, yɛde plugins a ɛwɔ atifi hɔ no ama wo sɛnea ɛbɛyɛ a wobɛte sɛnea wode Bootstrap ne javascript bɛka abom no ase na ama woanya ɔkwan a ɛyɛ ntɛm, a emu yɛ hare a wode bɛyɛ adwuma titiriw no ntɛm ara.

Sɛ wopɛ nsɛm pii na wopɛ sɛ wohu live demos bi a, yɛsrɛ wo hwɛ yɛn plugin documentation page .