Samhlaidhean tòiseachaidh luath

A bheil feum agad air teamplaidean sgiobalta? Thoir sùil air na h-eisimpleirean bunaiteach seo a chuir sinn ri chèile:

Grid bunaiteach

Is e an siostam clèithe bunaiteach a tha air a thoirt seachad mar phàirt de Bootstrap cliath 16-colbh de leud 940px. Is e blas a th’ ann den t-siostam clèithe 960 mòr-chòrdte, ach às aonais an iomall / pleadhag a bharrachd air na taobhan clì is deas.

Eisimpleir grid comharrachadh

Mar a chithear an seo, faodar cruth bunaiteach a chruthachadh le dà “cholbh,” gach fear a’ spangachadh grunn de na 16 colbhan bunaiteach a mhìnich sinn mar phàirt den t-siostam clèithe againn. Faic na h-eisimpleirean gu h-ìosal airson barrachd atharrachaidhean.

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

Colbhan neadachaidh

Nead do shusbaint ma dh'fheumas tu le bhith a 'cruthachadh .rowtaobh a-staigh colbh a tha ann mar-thà.

Eisimpleir de cholbhan neadachaidh

<div class = "sreath" > 
  <div class = "span12" > 
    Ìre 1 den cholbh
    <div class = "sreath" > 
      <div class = "span6" > 
        Ìre 2
      </div>
      <div class = "span6" > 
        Ìre 2
      </div>
    </div>
  </div>
</div>

Rol do chliath fhèin

Air an togail a-steach do Bootstrap tha dòrlach de chaochladairean airson an siostam clèithe 940px bunaiteach a ghnàthachadh. Le beagan gnàthachaidh, faodaidh tu meud nan colbhan, na cutairean aca, agus an soitheach anns a bheil iad a’ fuireach atharrachadh.

Taobh a-staigh a 'ghriod

Tha na caochladairean a dh’ fheumar gus an siostam clèithe atharrachadh aig an àm seo uile a’ fuireach ann am faidhle preboot.less.

A-nis airson a ghnàthachadh

Tha atharrachadh a’ ghriod a’ ciallachadh na trì @grid-*caochladairean atharrachadh agus na Nas lugha de fhaidhlichean ath-chruinneachadh.

Bidh Bootstrap a ’tighinn uidheamaichte gus siostam clèithe a làimhseachadh le suas ri 24 colbhan; 'S e dìreach 16 a th' anns a' bhunait. Seo mar a bhiodh na caochladairean clèithe agad a' coimhead gnàthaichte ri cliath 24-colbh.

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

Aon uair ‘s gu bheil thu air ath-chruinneachadh, bidh thu deiseil!

Cruth stèidhichte

An cruth bunaiteach agus sìmplidh 940px-leathann, sa mheadhan airson dìreach làrach-lìn no duilleag sam bith air a thoirt seachad le aon fhaidhle <div.container>.

<corp>
  <div class = "container" > 
    ...
  </div>
</corp>

Cruth fluid

Structar duilleag sùbailte sùbailte eile le leudan as ìsle agus as àirde agus bàr-taoibh chlì. Fìor mhath airson aplacaidean agus sgrìobhainnean.

<corp>
  <div class = "container-fluid" > 
    <div class = "bar-taoibh" > 
      ...
    </div>
    <div class = "susbaint" > 
      ...
    </div>
  </div>
</corp>

Cinn & leth-bhreac

Rangachd clò-sgrìobhaidh àbhaisteach airson do dhuilleagan-lìn a structaradh.

Tha a’ ghriod clò-sgrìobhaidh gu lèir stèidhichte air dà Nas lugha caochladair anns an fhaidhle preboot.less againn: @basefontagus @baseline. Is e a’ chiad fhear am meud cruth-clò bunaiteach a thathar a’ cleachdadh air feadh agus is e an dàrna fear an àirde bun-loidhne.

Bidh sinn a’ cleachdadh na caochladairean sin, agus cuid de matamataigs, gus na h-iomaill, pleadhagan, agus àirdean loidhne de gach seòrsa againn agus barrachd a chruthachadh.

h1. Ceann-uidhe 1

h2. Ceann-uidhe 2

h3. Ceann-uidhe 3

h4. Ceann-uidhe 4

h5. Ceann-uidhe 5

h6. Ceann 6

Eisimpleir paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Ceann- eisimpleir Tha fo-cheannard air…

Measg. eileamaidean

A’ cleachdadh cuideam, seòlaidhean, & giorrachaidhean

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

Nuair a chleachdadh

Bu chòir tagaichean cuideam ( <strong>agus <em>) a chleachdadh gus cuideam no cuideam a bharrachd de fhacal no abairt a nochdadh an coimeas ris an leth-bhreac mun cuairt air. Cleachd airson <strong>cuideam agus cuideam cuideam.<em>

Cuideam ann am paragraf

Fusce dapibus , tellus ac cursus comodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: Tha e fhathast ceart gu leòr a bhith a’ cleachdadh <b>agus <i>tagaichean ann an HTML5 agus chan fheum iad a bhith air an stoidhleachadh trom agus clò eadailteach, fa leth (ged ma tha eileamaid nas semantach ann, cleachd e). <b>thathar an dùil faclan no abairtean a shoilleireachadh gun a bhith a’ toirt cuideam a bharrachd, fhad ‘s <i>a tha e gu ìre mhòr airson guth, teirmean teicnigeach, msaa.

Seòlaidhean

Tha an <address>eileamaid air a chleachdadh airson fiosrachadh conaltraidh airson an sinnsear as fhaisge, no am buidheann obrach gu lèir. Seo dà eisimpleir air mar a ghabhadh a chleachdadh:

Nota: Feumaidh gach loidhne ann an loidhne <address>crìochnachadh le briseadh loidhne ( <br />) no a bhith air a phasgadh ann an tag ìre bloc (me, <p>) gus an susbaint a structaradh gu ceart.

Giorrachaidhean

Airson giorrachaidhean agus geàrr-chunntasan, cleachd an <abbr>taga ( <acronym>chan eil e air a mholadh ann an HTML5 ). Cuir am foirm làmh-ghoirid taobh a-staigh an taga agus suidhich tiotal airson an ainm iomlan.

Blockquotes

<blockquote> <p> <small>

Mar a nì thu luaidh

Gus blockquote a ghabhail a-steach, cuir <blockquote>timcheall <p>agus <small>tagaichean. Cleachd an <small>eileamaid gus an tobar agad ainmeachadh agus gheibh thu em dash —roimhe.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat agus ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat agus ante venenatis dapibus posuere velit aliquet. </p>
  <small> An Dotair Julius Hibbert </small>
</blockquote>

Gun òrdugh<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem aig massa
• Facilisis ann am pretium nisl aliquet
• Gun a bhith a 'dol a-mach à bith
  • Phasellus iaculis saor an asgaidh
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat aig
• Faucibus porta lacus fringilla no
• Aenean sit amet erat nunc
• Luchdaich a-nuas porttitor lorem

Gun stoidhle<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem aig massa
• Facilisis ann am pretium nisl aliquet
• Gun a bhith a 'dol a-mach à bith
  • Phasellus iaculis saor an asgaidh
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat aig
• Faucibus porta lacus fringilla no
• Aenean sit amet erat nunc
• Luchdaich a-nuas porttitor lorem

Dh'òrdaich<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem aig massa
4. Facilisis ann am pretium nisl aliquet
5. Gun a bhith a 'dol a-mach à bith
6. Faucibus porta lacus fringilla no
7. Aenean sit amet erat nunc
8. Luchdaich a-nuas porttitor lorem

Tuairisgeuldl

Liostaichean tuairisgeul

Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.

Eusmod

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

Donec id elit non mi porta gravida agus eget metus.

Port-adhair Malesuada

Etiam porta sem malesuada magna mollis euismod.

Còd

<code> <pre>

Pimp do chòd ann an stoidhle le dà tag sìmplidh. Airson eadhon barrachd uamhasachd tro javascript, leig a-steach ann an leabharlann prettify còd Google agus tha thu deiseil.

Còd taisbeanadh

Faodar còd, blocaichean de no dìreach criomagan a-staigh, a thaisbeanadh le stoidhle dìreach le bhith a’ pasgadh a-steach don taga cheart. Airson blocaichean de chòd thairis air grunn loidhnichean, cleachd an <pre>eileamaid. Airson còd in-loidhne, cleachd an <code>eileamaid.

<div>
  <h1>Ceann</h1>
  <p>Rudeigin an-seo...</p>
</div>

<div> <h1> Ceann < /h1> <p> Rudeigin ceart an seo... </p> </div>
  
  

Leubail in-loidhne

<span class="label">

Thoir aire no comharraich abairt sam bith anns an teacsa bodhaig agad.

Label rud sam bith

Bha feum a-riamh air fear de na rudan ùra snasail sin! no Brataichean cudromach nuair a thathar a’ sgrìobhadh còd? Uill, a-nis tha iad agad. Seo na tha air a ghabhail a-steach gu bunaiteach:

Grid nam meadhanan

Seall òrdagan de dhiofar mheudan air duilleagan le lorg-coise HTML ìosal agus glè bheag de stoidhlichean.

Eisimpleirean òrdagan

Faodaidh mion .media-grid-dhealbhan a bhith de mheud sam bith, ach obraichidh iad as fheàrr nuair a thèid am mapadh gu dìreach gu siostam clèithe Bootstrap a tha a-staigh. Bidh leudan ìomhaighean mar 90, 210, agus 330 a’ tighinn còmhla le beagan piogsail de phlugadh gus a bhith co-ionann ri meudan .span2, .span4, agus .span6colbhan.

Mòr

Meadhanach

Beag

A’ còdadh orra

Tha cliathan meadhanan furasta an cleachdadh agus caran sìmplidh air an taobh comharrachaidh. Tha na tomhasan aca dìreach stèidhichte air meud nan ìomhaighean a tha air an toirt a-steach.

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

Togail bùird

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

Tha clàran math - airson tòrr rudan. Feumaidh bùird sgoinneil, ge-tà, beagan de ghaol comharrachaidh gus a bhith feumail, scalable, agus furasta a leughadh (aig ìre còd). Seo beagan mholaidhean airson cuideachadh.

Paisg na cinn-cinn colbh agad an-còmhnaidh gus am bi <thead>rangachd <thead>>> <tr>.<th>

Coltach ri cinn nan colbhan, bu chòir susbaint bodhaig a’ bhùird agad gu lèir a phasgadh a-steach gus am bi an <tbody>rangachd agad <tbody>>> <tr>.<td>

Eisimpleir: Stoidhlichean bùird bunaiteach

Bidh na bùird uile air an stialladh gu fèin-ghluasadach le dìreach na crìochan riatanach gus dèanamh cinnteach gum bi e furasta a leughadh agus structar a chumail suas. Chan eil feum air clasaichean no buadhan a bharrachd a chur ris.

<clàr>
  ...
</clàr>

Eisimpleir: Zebra-striped

Faigh beagan tlachd leis na bùird agad le bhith a’ cur stiallan zebra ris - dìreach cuir ris a’ .zebra-stripedchlas.

Nota: Tha Zebra-striping na àrdachadh adhartach nach eil ri fhaighinn airson brobhsairean nas sine mar IE8 agus gu h-ìosal.

<table class = "stiallach seabra" > 
...
</clàr>

Eisimpleir: Zebra-striped w/ TableSorter.js

A’ gabhail na h-eisimpleir a bh’ ann roimhe, leasaichidh sinn cho feumail sa tha na bùird againn le bhith a’ toirt seachad comas seòrsachaidh tro jQuery agus am plugan Tablesorter . Cliog air bann-cinn colbh sam bith gus an seòrsa atharrachadh.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( gnìomh () { 
    $ ( "clàr#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "stiallach seabra" > 
  ...
</clàr>

Stoidhlichean bunaiteach

Tha stoidhlichean bunaiteach aig gach foirm gus an taisbeanadh ann an dòigh a ghabhas leughadh agus a ghabhas scalladh. Tha stoidhlichean air an toirt seachad airson cuir a-steach teacsa, liostaichean taghte, raointean teacsa, putanan rèidio agus bogsaichean sgrùdaidh, agus putanan.

Foirmean cruaidh

Cuir .form-stackedri HTML an fhoirm agad agus bidh bileagan agad air mullach nan raointean aca seach air an taobh chlì. Bidh seo ag obair glè mhath ma tha na foirmean agad goirid no ma tha dà cholbh cuir a-steach agad airson foirmean nas truime.

Foirm meud raointean

Gnàthaich foirm sam bith input, select, notextarea leud sam bith le bhith a’ cur dìreach beagan chlasaichean ris a’ chomharradh agad.

Mar v1.3.0, tha sinn air na clasaichean meudachaidh stèidhichte air cliath airson eileamaidean cruth a chuir ris. Feuch an cleachd thu iad seo thairis air na clasaichean .mini, .small, msaa a th’ ann mar-thà.

Putanan

Mar ghnàthachas, thathas a’ cleachdadh putanan airson gnìomhan fhad ‘s a thathas a’ cleachdadh cheanglaichean airson nithean. Mar eisimpleir, dh’ fhaodadh “Luchdaich sìos” a bhith na phutan agus dh’ fhaodadh “gnìomh o chionn ghoirid” a bhith na cheangal.

Bidh na putanan uile gu bunaiteach ann an stoidhle liath aotrom, ach faodar grunn chlasaichean gnìomh a chuir an sàs airson diofar stoidhlichean dath. Am measg nan clasaichean sin tha clas gorm .primary, clas aotrom-gorm .info, clas uaine .success, agus clas dearg .danger.

Eisimpleir putanan

Faodar stoidhlichean putan a chuir an sàs ann an rud sam bith leis an .btntagradh. Mar as trice bidh thu airson an cur an sàs ann an eileamaidean <a>, <button>, agus tagh a-mhàin. <input>Seo mar a tha e coltach:

Meudan eile

A bheil thu ag iarraidh putanan nas motha no nas lugha? Thoir air!

Stàite ciorramach

Airson putanan nach eil gnìomhach no a tha ciorramach leis an aplacaid airson adhbhar air choireigin, cleachd an stàit ciorramach. Tha sin .disabledairson ceanglaichean agus :disabledairson <button>eileamaidean.

Ceanglaichean

Putanan

Dè th 'ann

Tha am bàr-mullaich againn na bhàr stèidhichte anns a bheil suaicheantas no ainm làrach-lìn, prìomh sheòladh, agus foirm sgrùdaidh.

Customizable

Tha a h-uile eileamaid a-staigh, agus am bàr-mullaich gu lèir cuideachd, roghainneil. Faodaidh tu roghnachadh suaicheantas / ainm, seòladh, sgrùdadh agus seòladh àrd-sgoile a ghabhail a-steach - no measgachadh sam bith de sin.

Dropdowns air an toirt a-steach

Mar phàirt den phrìomh sheòladh, tha sinn air comas a thoirt dhut dropdowns a chur ris do nav. Thoir sùil air an nav àrd-sgoile gu h-àrd (co-thaobhadh deas) gus faicinn mar a tha e air a dhèanamh. liBidh tagaichean dropdowns cuideachd a’ toirt taic .activedo bhith a’ sealltainn taghadh dhuilleagan gnàthach.

Tabaichean agus pills

Cruthaich seòladh àrd-sgoile sìmplidh le faidhle <ul>. Dèan iomlaid eadar tabaichean no pills le bhith a’ cur a’ chlas iomchaidh ris.

Fìor mhath airson fo-roinnean de shusbaint leithid na duilleagan roghainnean cunntais againn agus loidhnichean-tìm luchd-cleachdaidh airson gluasad eadar duilleagan de shusbaint coltach ris. Ri fhaighinn ann an stoidhlichean tabbed no pill.

• Dhachaigh
• Pròifil
• Teachdaireachdan
• Suidhichidhean
• Cuir fios
• Droch-dhiol
  • Ceangal àrd-sgoile
  • Rud eile an seo
  • Ceangal eile

<ul class = "tabs" > 
  <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
  <li><a href = "#"> Pròifil </a> </li> 
  <li><a href="#"> Teachdaireachdan </a> < /li > 
  <li><a href="#"> Roghainnean </a> < /li > 
  <li><a href = "#"> Cuir fios </a></li> 
</ul>

• Dhachaigh
• Pròifil
• Teachdaireachdan
• Suidhichidhean
• Cuir fios

<ul class = "pills" > 
  <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
  <li><a href = "#"> Pròifil </a> </li> 
  <li><a href="#"> Teachdaireachdan </a> < /li > 
  <li><a href="#"> Roghainnean </a> < /li > 
  <li><a href = "#"> Cuir fios </a></li> 
</ul>

Briosgaidean

Bithear a’ cleachdadh seòladh Breadcrumb mar dhòigh air sealltainn do luchd-cleachdaidh far a bheil iad taobh a-staigh app no ​​làrach, ach chan ann airson prìomh sheòladh.

• Dhachaigh

• Dachaigh /
• Duilleag meadhan

• Dachaigh /
• Duilleag mheadhanach /
• Fear eile

• Dachaigh /
• Duilleag mheadhanach /
• Fear eile /
• Tha thu an seo

<ul class = "breadcrumb" > 
  <li><a href="#"> Dachaigh </a> < span class = " divider " > / </span></li>   
  <li><a href="#"> Duilleag mheadhanach </a> < span class = " divider" > / </span></li>   
  <li><a href="#"> Fear eile </a> < span class = " divider" > / </span></li>   
  <li class = "active" > Tha thu an-seo </li> 
</ul>

Duilleagadh

Duilleagan ultra simplidh agus le glè bheag de stoidhle air a bhrosnachadh le Rdio. Tha am bloc mòr duilich a chall, furasta a scalladh, agus a’ toirt seachad raointean cliog mòr.

<div class = "duilleag" > 
  <ul>
    <li class = "air a chur à comas" > <a href = "#"> ← Roimhe </a></li>  
    <li class = "gnìomhach" ><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 = "ath" > <a href = "#"> An ath → </a></li>  
  </ul>
</div>

Rabhaidhean bunaiteach

.alert-message

Teachdaireachdan aon-loidhne airson a bhith a’ soilleireachadh fàilligeadh, fàilligeadh a dh’ fhaodadh a bhith ann, no soirbheachas gnìomh. Gu sònraichte feumail airson foirmean.

faigh javascript»

Còd eisimpleir

<div class = "rabhadh teachdaireachd-rabhaidh" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Guacamole naomh! </strong> Feuch an dèan thu fhèin thu fhèin, chan eil thu a 'coimhead ro mhath. </p>
</div>

Cuir casg air teachdaireachdan

.alert-message.block-message

Airson teachdaireachdan a dh’ fheumas beagan mìneachaidh, tha rabhaidhean stoidhle paragraf againn. Tha iad sin foirfe airson teachdaireachdan mearachd nas fhaide a sgaoileadh, rabhadh a thoirt do neach-cleachdaidh mu ghnìomhachd a tha ri thighinn, no dìreach airson fiosrachadh a thaisbeanadh airson barrachd cuideam air an duilleag.

faigh javascript»

Còd eisimpleir

<div class = "rabhadh teachdaireachd bloc-teachdaireachd rabhaidh" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Guacamole naomh! Seo rabhadh! </strong> Feuch an dèan thu fhèin thu fhèin, chan eil thu a 'coimhead ro mhath. Nulla vitae elit libero, a pharetra augue. Bidh iad a’ moladh cursus magna, no scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class="btn small" href="#"> Dèan an gnìomh seo </a> <a class="btn small" href="#"> No dèan seo </a> _ _ _     
  </div>
</div>

Modailean

Tha modalan - còmhradh no bogsaichean-solais - air leth math airson gnìomhan co-theacsail ann an suidheachaidhean far a bheil e cudromach gun tèid an cùl-fhiosrachadh a chumail suas.

faigh javascript»

Molaidhean innealan

Tha Twipsies air leth feumail airson a bhith a’ toirt taic do neach-cleachdaidh troimh-chèile agus gan comharrachadh san t-slighe cheart.

faigh javascript»

Popovers

Cleachd popovers gus fiosrachadh fo-theacsa a thoirt do dhuilleag gun a bhith a’ toirt buaidh air cruth.

faigh javascript»

A 'tòiseachadh

Tha e air leth furasta javascript a cheangal ri leabharlann Bootstrap. Gu h-ìosal thèid sinn thairis air na bunaitean agus bheir sinn dhut cuid de plugins uamhasach airson do thòiseachadh!

Seall docaichean javascript »

Dè tha air a ghabhail a-steach

Thoir beò cuid de phrìomh phàirtean Bootstrap le plugins gnàthaichte ùra a bhios ag obair le jQuery agus Ender . Tha sinn gad bhrosnachadh gus an leudachadh agus an atharrachadh gus freagairt air na feumalachdan leasachaidh sònraichte agad.

A bheil feum air javascript?

Chan eil! Tha Bootstrap air a dhealbhadh gu sònraichte airson a bhith na leabharlann CSS. Tha an javascript seo a 'toirt seachad sreath bunaiteach eadar-ghnìomhach a bharrachd air na stoidhlichean a tha air an gabhail a-steach.

Ach, dhaibhsan aig a bheil feum air javascript, tha sinn air na plugins gu h-àrd a thoirt seachad gus do chuideachadh le bhith a’ tuigsinn mar as urrainn dhut Bootstrap fhilleadh a-steach le javascript agus gus roghainn sgiobalta, aotrom a thoirt dhut airson a’ ghnìomhachd bunaiteach sa bhad.

Airson tuilleadh fiosrachaidh agus gus cuid de demos beò fhaicinn, thoir sùil air an duilleag sgrìobhainnean plugan againn .