Mînakên zû-destpêk

Hin şablonên bilez hewce ne? Van mînakên bingehîn ên ku me berhev kirine binêrin:

Tora xwerû

Pergala torê ya xwerû ya ku wekî beşek Bootstrap tê peyda kirin tora 16-stûnî ya fireh a 940px e. Ew tama pergala tevna populer a 960-ê ye, lê bêyî marjînal / pêvek zêde li aliyên çep û rast.

Mînak nîşankirina torê

Wekî ku li vir tê xuyang kirin, sêwirana bingehîn dikare bi du "stûnan" were afirandin, ku her yek hejmarek ji 16 stûnên bingehîn ên ku me wekî beşek ji pergala xweya torê destnîşan kirine vedihewîne. Ji bo guhertoyên bêtir mînakên jêrîn bibînin.

<div class = "rêz" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Stûnên nesting

.rowHeke hûn hewce ne ku hûn di nav stûnek heyî de çêbikin naveroka xwe hêlîn bikin.

Mînak stûnên hêlînkirî

<div class = "rêz" > 
  <div class = "span12" > 
    Asta 1 ya stûnê
    <div class = "rêz" > 
      <div class = "span6" > 
        Asta 2
      </div>
      <div class = "span6" > 
        Asta 2
      </div>
    </div>
  </div>
</div>

Tora xwe bizivirînin

Di Bootstrap-ê de hatî çêkirin çend guhêrbar hene ku ji bo xweşkirina pergala torê ya xwerû ya 940px. Bi piçek xwerûkirinê, hûn dikarin mezinahiya stûnan, kelûpelên wan û konteynera ku ew tê de dimînin biguhezînin.

Di hundurê torê de

Guherbarên ku ji bo guheztina pergala torê hewce ne ku niha hemî di nav de variables.lessne.

Niha ji bo kesanekirinê

Guhertina torê tê wateya guhertina sê @grid-*guherbaran û ji nû ve berhevkirina pelên Less.

Bootstrap ji bo birêvebirina pergalek torê ya bi heya 24 stûnan tê saz kirin; birêkûpêk tenê 16 e. Li vir çawa guhêrbarên tora we dê li gorî tora 24-stûnî xwerû xuya bikin.

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

Dema ku ji nû ve hatî berhev kirin, hûn ê werin saz kirin!

layout Fixed

Plansaziya xwerû û hêsan a 940px-berfireh, navend ji bo hema hema her malper an rûpelek ku ji hêla yek ve hatî peyda kirin <div.container>.

<beden>
  <div class = "konteyner" > 
    ...
  </div>
</body>

Fluid layout

Strukturek rûpela şilavê ya alternatîf, maqûl bi min- û herî zêde û milê çepê. Ji bo sepan û belgeyan mezin e.

<beden>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "naveroka" > 
      ...
    </div>
  </div>
</body>

Sernav & kopî

Hiyerarşiyek tîpografî ya standard ji bo avakirina malperên we.

Tevahiya tora tîpografî li ser du guhêrbarên Kêmtir di pelê meya guhêrbar.less de ye: @basefontû @baseline. Ya yekem mezinahiya tîpên bingehîn e ku li seranserê tê bikar anîn û ya duyemîn jî rêzika bingehîn e.

Em wan guherbaran, û hin matematîkê bikar tînin, da ku marjînal, peldank, û bilindahiyên rêzê yên hemî celeb û hêj bêtir biafirînin.

h1. Sernav 1

h2. Sernav 2

h3. Sernav 3

h4. Sernav 4

h5. Sernav 5

h6. Sernav 6

Mînak paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Sernavê Mînak Sernavê jêrîn heye…

Misc. hêmanên

Bikaranîna balkişandin, navnîşan, û kurtenivîsan

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

Dema ku bikar bînin

Divê etîketên lêhûrbûnê ( <strong>û <em>) bêne bikar anîn da ku girîngî an giraniya peyvek an hevokê li gorî kopiya derdora wê nîşan bide. Ji <strong>bo girîngî û <em>ji bo giraniya stresê bikar bînin .

Di paragrafekê de tekez kirin

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.

Nîşe: Hîn jî baş e ku meriv di HTML5-ê de bikar bîne <b>û <i>etîketan bike û ne hewce ye ku ew bi rêzê bi stûr û îtalîk bêne stîl kirin (her çend heke hêmanek semantîktir hebe, wê bikar bînin). <b>tê wateya ronîkirina peyvan an hevokan bêyî gihandina girîngiyek zêde, di heman demê <i>de bi piranî ji bo deng, peyvên teknîkî, hwd.

Navnîşan

Hêman <address>ji bo agahdariya pêwendiyê ji bo bav û kalê xwe yê herî nêzîk, an tevahiya laşê xebatê tê bikar anîn. Li vir du nimûne hene ku ew çawa dikare were bikar anîn:

Nîşe: Her rêzek di navokê de <address>divê bi xêzek ( <br />) biqede an jî di tagek asta blokê de were pêçandin (mînak, <p>) da ku naverokê bi rêkûpêk ava bike.

Kurtenivîsandin

Ji bo kurtenivîs û kurtenivîsan, etîketê bikar bînin <abbr>( <acronym>di HTML5 -ê de jêbirin ). Forma kurtenivîsê têxin hundurê tagê û ji bo navê tevahî sernavek saz bikin.

Blockquotes

<blockquote> <p> <small>

Meriv çawa vedibêje

Ji bo tevlêkirina blokê, li <blockquote>dora xwe bipêçin <p>û <small>etîketan bikin. Hêmanê bikar bînin <small>da ku çavkaniya xwe binav bikin û hûn ê —berî wê xêzek em bistînin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Jimarên bêkêmasî yên ku ji berê ve têne xuyang kirin têne xuyang kirin.

Julius Hibbert Dr

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Jimarên bêkêmasî yên ku ji berê ve têne xuyang kirin têne xuyang kirin. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Unordered<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Hêsankirin di aliquet pretium nisl
• 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 sit amet erat nunc
• Eget porttitor lorem

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Hêsankirin di aliquet pretium nisl
• 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 sit amet erat nunc
• Eget porttitor lorem

Ferman kirin<ol>

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

Terîfdl

Navnîşan lîsteyên

Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Navê dizî

<code> <pre>

Bi du etîketên sade koda xwe bi şêwazê bişopînin. Ji bo ku di nav javascriptê de hê bêtir bi heybet bin, li pirtûkxaneya pêşkeftî ya koda Google davêjin û hûn amade ne.

Pêşkêşkirina kodê

Kod, blokên an tenê perçeyên di hundurê de, dikarin bi şêwazê tenê bi pêçandina di taga rastê de werin xuyang kirin. Ji bo blokên kodê yên ku pir rêzan vedigirin, <pre>hêmanê bikar bînin. Ji bo koda hundurîn, <code>hêmanê bikar bînin.

<div>
  <h1> Sernav</h1>
  <p>Tiştek li vir heye...</p>
</div>

<div> <h1> Sernav </h1> <p> Li vir tiştek heye... </p> </div>
  
  

Etîketên xêzkirî

<span class="label">

Di nivîsa laşê xwe de balê bikişînin ser hevokek an ala xwe bidin.

Labelê her tiştî

Qet pêdiviya yek ji wan Nûveya xweşik heye ! an alayên girîng dema kodê dinivîsin? Erê, niha hûn wan hene. Li vir tiştê ku ji hêla xwerû ve tê de heye:

Tora medyayê

Li ser rûpelên bi şopa HTML-ê ya kêm û şêwazên hindiktirîn nîgarên bi pîvanên cihêreng nîşan bidin.

Mînakên piçûk

Piçûçikên di nav de .media-griddikarin her mezinahî bin, lê gava ku rasterast bi pergala tora Bootstrap-ê ya çêkirî ve têne nexşandin çêtirîn dixebitin. Berfirehiyên wêneyê mîna 90, 210, û 330 bi çend pîxelên peldankê re tevdigerin ku mezinahiya .span2, .span4, û .span6stûnê wekhev bikin.

Mezin

Medya

Biçûk

Kodkirina wan

Tûrên medyayê hêsan têne bikar anîn û ji hêla nîşankirinê ve pir hêsan in. Pîvana wan bi tenê li gorî mezinahiya wêneyên tê de ne.

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

Avakirina maseyên

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

Tabloyên mezin in - ji bo gelek tiştan. Lêbelê, tabloyên mezin, hewceyê piçek hezkirina nîşankirinê hewce ne ku bikêr, berbelav û xwendin (di asta kodê de) bin. Li vir çend serişteyên alîkariyê hene.

Her tim sernavên stûnên xwe bi awakî <thead>wisa bipêçin ku hiyerarşiya <thead>> <tr>> <th>be.

Mîna sernavên stûnê, divê hemî naveroka laşê tabloya we bi rengekî were pêçandin <tbody>da ku hiyerarşiya we <tbody>> <tr>> <td>be.

Mînak: Şêweyên tabloya xwerû

Hemî tablo dê bixweber bi tenê bi sînorên bingehîn ve werin şêwaz kirin da ku xwendin û strukturê biparêzin. Ne hewce ye ku çîn an taybetmendiyên zêde zêde bikin.

<table>
  ...
</table>

Nimûne: Tabloya hevgirtî

Ji bo tabloyên ku di cîhên tengtir de bêtir daneyê hewce dikin, tama berhevkirî ya ku peldankê di nîvî de qut dike bikar bînin. Di heman demê de, ew dikare bi sînor û zebra-şiyan re, mîna şêwazên tabloya xwerû, were bikar anîn.

Mînak: Tabloya sînorkirî

Bi dorpêkirina goşeyê wan û lê zêdekirina sînoran ji her alî ve maseyên xwe hinekî xweştir xuya bikin.

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

Nimûne: Zebra-xêrî

Bi lêzêdekirina zebra-striping bi tabloyên xwe piçek xweşiktir bibin - tenê .zebra-stripedpolê zêde bikin.

Nîşe: Zebra-striping pêşkeftinek pêşkeftî ye ku ji bo gerokên kevn ên mîna IE8 û jêrîn peyda nabe.

<table class = "zebra-striped" > 
  ...
</table>

Mînak: Zebra-striped w/ TableSorter.js

Mînaka berê digirin, em bi peydakirina fonksiyonên cûrbecûr bi jQuery û pêveka Tablesorter re bikêrhatina tabloyên xwe baştir dikin . Sernivîsa her stûnekê bikirtînin da ku cûreyê biguherînin.

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

Şêweyên xwerû

Hemî formên xwerû şêwazên xwerû têne dayîn da ku wan bi rengek xwendin û pîvandinê pêşkêş bikin. Ji bo têketina nivîsê, navnîşên hilbijartî, deverên tekstê, bişkokên radyoyê û qutiyên kontrolê, û bişkokan şêwaz têne peyda kirin.

Formên stacked

Li HTML .form-stacked-a forma xwe zêde bikin û hûn ê li ser qadên wan etîketan li şûna yên çepê hebin. Ger formên we kurt bin an jî du stûnên we ji bo formên giran hebin ev pir baş dixebite.

Mezinahiyên zeviyê çêbikin

Bi lê zêdekirina çend çînên li nîşankirina xwe, her form input, selectan textareafirehiyê xweş bikin.

Ji v1.3.0-ê pê ve, me ji bo hêmanên formê dersên mezinbûnê yên li ser torê zêde kirine. Ji kerema xwe van li ser çînên heyî .mini, .small, hwd bikar bînin.

Buttons

Wekî peymanek, bişkok ji bo çalakiyan têne bikar anîn dema ku girêdan ji bo tiştan têne bikar anîn. Mînakî, "Daxistin" dikare bişkokek be û "çalakiya dawî" dikare bibe girêdanek.

Hemî bişkok bi şêwazek gewr ronahiyê xwemalî dikin, lê çend dersên fonksiyonel dikarin ji bo şêwazên rengên cihê werin sepandin. Di van dersan de çînek şîn .primary, çînek şîn-ronahî .info, çînek kesk .success, û .dangerpola sor heye.

Bişkokên Mînak

Şêweyên bişkokê dikarin bi serîlêdanê re li ser her tiştî bêne .btnsepandin. Bi gelemperî hûn dixwazin van tenê li <a>, <button>, û <input>hêmanan hilbijêrin. Li vir çawa xuya dike:

Mezinahiyên Alternatîf

Bişkokên mezintir an piçûktir dixwazin? Hay jê hebe!

Dewlet seqet

Ji bo bişkokên ku ne çalak in an ji ber sedemek din ji hêla sepanê ve têne asteng kirin, dewleta neçalak bikar bînin. Ew ji .disabledbo girêdan û :disabledji bo <button>hêmanan e.

Girêdanên

Buttons

Çiye

Topbara me barek sabît e ku logo an navê malperek, navîgasyon bingehîn, û forma lêgerînê vedihewîne.

Customizable

Hemî hêmanên hundur, û tevahiya topbarê jî, vebijarkî ne. Hûn dikarin hilbijêrin ku logo / navek, nav, lêgerîn û navokek duyemîn-an jî têkeliyek ji wê hebe.

Dropdowns di nav de

Wekî beşek ji navîgasyona sereke, me kapasîteya ku hûn dakêşan li nav xwe zêde bikin vekiriye. Navika navîn a li jor (rast rêzkirî) binihêrin da ku bibînin ka ew çawa pêk tê. Etîketên Dropdowns lijî ji .activebo nîşandana hilbijartina rûpela heyî piştgirî dikin.

Tabs û hebên

Navîgasyonek navîn a hêsan bi a <ul>. Bi lêzêdekirina çîna guncan di navbera tab an heban de biguhezînin.

Ji bo jêr-beşên naverokê yên mîna rûpelên mîhengên hesabê me û rêzikên bikarhêneran ên ji bo veguheztina di navbera rûpelên naverokê yên mîna de mezin e. Di şêwazên tabî an heb de peyda dibe.

Mînaka tabloyên bingehîn

Tabs dikarin wekî navîgasyonek birêkûpêk (barkirina rûpelên derveyî di heman tabloyê de) an jî wekî deverên naveroka tabloyê ji bo guheztina pelên naverokê werin bikar anîn. Me pêvekek tabloyan heye ku dikare were bikar anîn da ku ya paşîn yek bike.

• Xane
• Tengal
• Messages
• Settings
• Têkelî
• Dropdown
  • Girêdana duyemîn
  • Tiştek din li vir
  • Girêdana din

<ul class = "tabs" > 
  <li class = "çalak" ><a href = "#" > Mal </a></li>  
  <li><a href = "#" > Profîl </a></li> 
  <li><a href = "#" > Peyam </a></li> 
  <li><a href = "#" > Mîhengan </a></li> 
  <li><a href = "#" > Têkilî </a></li> 
</ul>

Mînaka hebên bingehîn

• Xane
• Tengal
• Messages
• Settings
• Têkelî

<ul class = "heb" > 
  <li class = "çalak" ><a href = "#" > Mal </a></li>  
  <li><a href = "#" > Profîl </a></li> 
  <li><a href = "#" > Peyam </a></li> 
  <li><a href = "#" > Mîhengan </a></li> 
  <li><a href = "#" > Têkilî </a></li> 
</ul>

Breadcrumbs

Navîgasyon Breadcrumb wekî rêyek tê bikar anîn ku nîşan bide bikarhêneran ku ew di hundurê serîlêdanek an malperek de ne, lê ne ji bo navîgasyonek bingehîn.

• Xane

• Mal /
• Rûpelê navîn

• Mal /
• Rûpelê navîn /
• Yeka din

• Mal /
• Rûpelê navîn /
• Yekî din /
• Tu li vir î

<ul class = "nanpêj" > 
  <li><a href = "#" > Malper </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Rûpelê navîn </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Yeka din </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Tu li vir î </li> 
</ul>

Pagination

Rûpelek pir hêsan û hindik bi şêwazê ku ji hêla Rdio ve hatî îlhama kirin. Bloka mezin zehmet e ku meriv ji bîr neke, bi hêsanî tê pîvandin, û deverên klîk ên mezin peyda dike.

<div class = "rûpelkirin" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Berê </a></li>  
    <li class = "çalak" ><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 = "#" > Piştre → </a></li>  
  </ul>
</div>

alerts bingehîn

.alert-message

Peyamên yek-xêz ji bo ronîkirina têkçûn, têkçûna gengaz, an serfiraziya çalakiyek. Bi taybetî ji bo formên kêrhatî.

Javascriptê bistînin »

Nimûne kod

<div class = "hişyariya peyama hişyar" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole pîroz! </strong> Ji xwe herî baş kontrol bikin, hûn pir baş xuya nakin. </p>
</div>

Mesajên asteng bikin

.alert-message.block-message

Ji bo peyamên ku hinekî ravekirinê hewce dikin, me hişyariyên şêwaza paragrafê hene. Vana ji bo guheztina peyamên xeletiyê yên dirêjtir, hişyarkirina bikarhênerek ji çalakiyek li bendê, an tenê pêşkêşkirina agahdariya ji bo hûrguliya bêtir li ser rûpelê bêkêmasî ne.

Javascriptê bistînin »

Nimûne kod

<div class = "hişyariya bloka-peyamê hişyar-peyam" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole pîroz! Ev hişyariyek e! </strong> Ji xwe herî baş kontrol bikin, hûn pir baş xuya nakin. Nulla vitae elit libero, a pharetra augue. Pêşkêşiya commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "hişyar-çalakiyên" > 
    <a class = "btn small" href = "#" > Vê çalakiyê bike </a> <a class = "btn small" href = "#" > An jî vê bike </a>     
  </div>
</div>

Modals

Modal - dîalog an qutiyên sivik - ji bo çalakiyên konteksî di rewşên ku girîng e ku çarçoveyek paşerojê were domandin de mezin in.

Javascriptê bistînin »

Tooltips

Twipsies ji bo arîkariya bikarhênerek tevlihev û nîşankirina wan di riya rast de pir bikêr in.

Javascriptê bistînin »

Popovers

Popoveran bikar bînin da ku agahdariya binetekstûalî pêşkêşî rûpelek bikin bêyî ku bandorê li sêwiranê bikin.

Javascriptê bistînin »

Destpêkirin

Yekkirina javascript bi pirtûkxaneya Bootstrap re pir hêsan e. Li jêr em diçin ser bingehên bingehîn û ji we re hin pêvekên hêja peyda dikin da ku hûn dest pê bikin!

Belgeyên javascript bibînin »

Çi tê de ye

Bi pêvekên xwerû yên nû yên ku bi jQuery û Ender re dixebitin hin hêmanên bingehîn ên Bootstrap bijîn . Em ji we re teşwîq dikin ku hûn wan dirêj bikin û biguhezînin da ku li gorî hewcedariyên pêşkeftina weya taybetî bicîh bibin.

Ma javascript hewce ye?

Na! Bootstrap berî her tiştî hatiye sêwirandin ku bibe pirtûkxaneyek CSS. Ev javascript li ser şêwazên tê de qatek înteraktîf a bingehîn peyda dike.

Lêbelê, ji bo kesên ku hewcedariya wan bi javascriptê heye, me pêvekên li jor peyda kirine da ku ji we re bibin alîkar ku hûn fêm bikin ka meriv çawa Bootstrap bi javascript re yek dike û ji bo fonksiyona bingehîn tavilê vebijarkek bilez û sivik bide we.

Ji bo bêtir agahdarî û ji bo dîtina hin demoyên zindî, ji kerema xwe serî li rûpela belgekirina pêvekê bidin .