Mga pananglitan sa dali nga pagsugod

Nagkinahanglan ug dali nga mga template? Tan-awa kining mga batakang pananglitan nga among gihiusa:

Default nga grid

Ang default grid system nga gihatag isip kabahin sa Bootstrap kay 940px ang gilapdon nga 16-column grid. Kini usa ka lami sa sikat nga 960 grid system, apan walay dugang nga margin/padding sa wala ug tuo nga kilid.

Pananglitan sa grid markup

Sama sa gipakita dinhi, ang usa ka sukaranan nga layout mahimong mahimo nga adunay duha ka "kolum," ang matag usa naglangkob sa usa ka gidaghanon sa 16 nga mga kolum nga pundasyon nga among gipasabut ingon bahin sa among sistema sa grid. Tan-awa ang mga pananglitan sa ubos alang sa dugang nga mga kalainan.

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

Mga kolum nga nagsalag

Ibutang ang imong sulod kung kinahanglan nimo pinaagi sa paghimo og .rowsulod sa usa ka kasamtangan nga kolum.

Pananglitan sa mga nested column

<div class = "row" > 
  <div class = "span12" > 
    Level 1 sa kolum
    <div class = "row" > 
      <div class = "span6" > 
        Level 2
      </div>
      <div class = "span6" > 
        Level 2
      </div>
    </div>
  </div>
</div>

Paligira ang imong kaugalingon nga grid

Gitukod sa Bootstrap ang pipila ka mga variable alang sa pag-customize sa default nga 940px grid system. Uban sa gamay nga pag-customize, mahimo nimong usbon ang gidak-on sa mga kolum, ilang mga kanal, ug ang sudlanan nga ilang gipuy-an.

Sulod sa grid

Ang mga variable nga gikinahanglan aron mabag-o ang sistema sa grid nga karon tanan nagpuyo sa preboot.less.

Karon aron ipasadya

Ang pagbag-o sa grid nagpasabut sa pagbag-o sa tulo ka @grid-*mga variable ug pag-recompile sa Gamay nga mga file.

Ang Bootstrap nasangkapan sa pagdumala sa usa ka grid system nga adunay hangtod sa 24 ka kolum; ang default kay 16 ra. Ania kung unsa ang hitsura sa imong mga variable sa grid nga gipahiangay sa usa ka 24-kolum nga grid.

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

Kung ma-compile na usab, mabutang ka na!

Naayo nga layout

Ang default ug yano nga 940px-wide, nakasentro nga layout alang sa bisan unsang website o panid nga gihatag sa usa ka <div.container>.

<lawas>
  <div class = "sudlanan" > 
    ...
  </div>
</body>

Layout sa likido

Usa ka alternatibo, flexible fluid page structure nga adunay min- ug max-widths ug usa ka left-hand sidebar. Maayo alang sa mga app ug docs.

<lawas>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "sulod" > 
      ...
    </div>
  </div>
</body>

Mga ulohan ug kopya

Usa ka sagad nga typographic hierarchy alang sa pag-istruktura sa imong mga webpage.

Ang tibuok typographic grid gibase sa duha ka Less variables sa among preboot.less file: @basefontug @baseline. Ang una mao ang base nga gidak-on sa font nga gigamit sa tibuok ug ang ikaduha mao ang base-line-gitas-on.

Gigamit namo kadtong mga baryable, ug pipila ka matematika, sa paghimo sa mga margin, paddings, ug line-heights sa tanan namong tipo ug uban pa.

h1. Ulohan 1

h2. Ulohan 2

h3. Ulohan 3

h4. Ulohan 4

h5. Ulohan 5

h6. Ulohan 6

Pananglitan nga parapo

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

Pananglitan nga ulohan Adunay sub-ulohan…

Misc. mga elemento

Gamit ang emphasis, adres, ug abbreviation

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

Kanus-a gamiton

Ang emphasis tags ( <strong>ug <em>) kinahanglang gamiton sa pagpaila sa dugang importansya o empasis sa usa ka pulong o prase nga may kalabotan sa naglibot nga kopya niini. Gamita <strong>para sa importansya ug <em>para sa stress empasis.

Pagpasiugda sa usa ka parapo

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Nulla vitae elit libero, usa ka pharetra augue.

Mubo nga sulat: Okay ra gihapon ang paggamit <b>ug <i>mga tag sa HTML5 ug dili kinahanglan nga i-istilo nga bold ug italic, matag usa (bisan kung adunay mas semantiko nga elemento, gamita kini). <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya, samtang <i>kasagaran alang sa tingog, teknikal nga mga termino, ug uban pa.

Mga adres

Ang <address>elemento gigamit alang sa impormasyon sa pagkontak alang sa iyang labing duol nga katigulangan, o sa tibuok nga pundok sa trabaho. Ania ang duha ka pananglitan kung giunsa kini magamit:

Mubo nga sulat: Ang matag linya sa usa <address>kinahanglan matapos sa usa ka line-break ( <br />) o maputos sa usa ka block-level tag (pananglitan, <p>) aron sa hustong pagkahan-ay sa sulod.

Mga minubo

Para sa mga abbreviation ug acronym, gamita ang <abbr>tag ( <acronym>wala na gamita sa HTML5 ). Ibutang ang shorthand nga porma sulod sa tag ug magbutang ug titulo para sa kompletong ngalan.

Blockquotes

<blockquote> <p> <small>

Unsaon pag quote

Aron maapil ang usa ka blockquote, pagputos ug <blockquote>mga tag. Gamita ang elemento sa pagkutlo sa imong tinubdan ug makakuha ka og em dash sa wala pa kini.<p><small><small>&mdash;

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

Wala ma-order<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ug masa
• Facilisis sa pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Espesye sa tanom nga bulak ang Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ug
• Faucibus porta lacus fringilla vel
• Aenean naglingkod amet erat nunc
• Eget porttitor lorem

Dili istilo<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ug masa
• Facilisis sa pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Espesye sa tanom nga bulak ang Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ug
• Faucibus porta lacus fringilla vel
• Aenean naglingkod amet erat nunc
• Eget porttitor lorem

Nagmando<ol>

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

Deskripsyondl

Mga lista sa paghulagway

Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.

Euismod

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

Donec id elit non mi porta gravida ug eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Pimp ang imong code sa istilo nga adunay duha ka yano nga mga tag. Alang sa labi pa nga katingad-an pinaagi sa javascript, ihulog ang code sa Google prettify library ug andam ka na.

Pagpresentar sa code

Ang code, mga bloke sa o mga snippet lang nga inline, mahimong ipakita nga adunay istilo pinaagi lang sa pagputos sa husto nga tag. Alang sa mga bloke sa code nga nagsangkap sa daghang linya, gamita ang <pre>elemento. Alang sa inline nga code, gamita ang <code>elemento.

<div>
  <h1>Ulohan</h1>
  <p>Usa ka butang dinhi...</p>
</div>

<div> <h1> Ulohan </h1> <p> Usa ka butang dinhi mismo... </p> </div>
  
  

Inline nga mga label

<span class="label">

Tawga ang atensyon o i-flag ang bisan unsang hugpong sa mga pulong sa imong teksto sa lawas.

Label bisan unsa

Kanunay nanginahanglan usa sa mga nindot nga Bag-o! o Importante nga mga bandila sa pagsulat sa code? Aw, karon naa na nimo sila. Ania ang gilakip sa default:

Media grid

Ipakita ang mga thumbnail nga lainlain ang gidak-on sa mga panid nga adunay gamay nga HTML footprint ug gamay nga istilo.

Pananglitan nga mga thumbnail

Ang mga thumbnail sa .media-gridmahimong bisan unsa nga gidak-on, apan kini labing maayo kung kini mapa direkta sa built-in nga Bootstrap grid system. Ang mga gilapdon sa imahe sama sa 90, 210, ug 330 naghiusa sa pipila ka mga pixel sa padding nga katumbas sa .span2, .span4, ug .span6mga gidak-on sa kolum.

Dako

Medium

Gamay

Pag-coding kanila

Ang mga media grids dali gamiton ug yano ra sa markup nga bahin. Ang ilang mga sukod pulos gibase sa gidak-on sa mga hulagway nga gilakip.

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

Pagtukod og mga lamesa

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

Nindot ang mga lamesa—alang sa daghang butang. Ang maayo nga mga lamesa, bisan pa, nanginahanglan gamay nga gugma sa markup aron mahimong mapuslanon, mabag-o, ug mabasa (sa lebel sa code). Ania ang pipila ka mga tip aron makatabang.

Kanunay ibutang ang imong mga ulohan sa kolum sa <thead>ingon nga hierarchy mao ang <thead>> <tr>> <th>.

Sama sa mga ulohan sa kolum, ang tanan nga sulud sa lawas sa imong lamesa kinahanglan nga giputos sa usa <tbody>aron ang imong hierarchy mao ang <tbody>> <tr>> <td>.

Pananglitan: Default nga mga estilo sa lamesa

Ang tanan nga mga lamesa awtomatikong i-istilo nga adunay hinungdanon nga mga utlanan aron masiguro ang pagkabasa ug pagpadayon sa istruktura. Dili kinahanglan nga magdugang dugang nga mga klase o mga hiyas.

<lamesa>
  ...
</table>

Pananglitan: Zebra-striped

Paglingaw og gamay sa imong mga lamesa pinaagi sa pagdugang og zebra-striping—idugang lang ang .zebra-stripedklase.

Mubo nga sulat: Ang zebra-striping usa ka progresibong pagpaayo nga dili magamit alang sa mga tigulang nga browser sama sa IE8 ug sa ubos.

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

Pananglitan: Zebra-striped w/ TableSorter.js

Pagkuha sa miaging pananglitan, among gipauswag ang kapuslanan sa among mga lamesa pinaagi sa paghatag ug paghan-ay nga gamit pinaagi sa jQuery ug ang Tablesorter plugin. Pag-klik sa bisan unsang ulohan sa kolum aron usbon ang klase.

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

Default nga mga estilo

Ang tanan nga mga porma gihatagan ug default nga mga istilo aron ipakita kini sa usa ka mabasa ug masukod nga paagi. Gihatag ang mga istilo alang sa mga input sa teksto, pagpili sa mga lista, mga lugar sa teksto, mga buton sa radyo ug mga checkbox, ug mga buton.

Mga porma nga gitapok

Idugang .form-stackedsa HTML sa imong porma ug aduna kay mga label sa ibabaw sa ilang mga field imbes sa ilang wala. Maayo kini kung ang imong mga porma mubo o ikaw adunay duha ka kolum sa mga input alang sa mas bug-at nga mga porma.

Porma nga mga gidak-on sa field

Ipasibo ang bisan unsang porma input, select, o textareagilapdon pinaagi sa pagdugang ug pipila lang ka klase sa imong markup.

Sa v1.3.0, among gidugang ang grid-based sizing classes para sa mga elemento sa porma. Palihug gamita kini sa mga naglungtad nga .mini, .small, etc nga mga klase.

Mga butones

Ingon usa ka kombensiyon, ang mga buton gigamit alang sa mga aksyon samtang ang mga link gigamit alang sa mga butang. Pananglitan, ang "Pag-download" mahimong usa ka buton ug ang "bag-o nga kalihokan" mahimo nga usa ka link.

Ang tanan nga mga buton default sa usa ka light gray nga istilo, apan daghang mga klase nga magamit ang mahimong magamit alang sa lainlaing mga istilo sa kolor. Kini nga mga klase naglakip sa usa ka asul .primarynga klase, usa ka light-blue .infonga klase, usa ka berde nga .successklase, ug usa ka pula nga .dangerklase.

Pananglitan nga mga buton

Ang mga istilo sa buton mahimong magamit sa bisan unsang butang nga adunay .btngipadapat. Kasagaran gusto nimo nga gamiton kini sa <a>, <button>, ug pilia <input>nga mga elemento. Ania ang hitsura niini:

Alternatibo nga mga gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Himoa kini!

Baldado nga estado

Alang sa mga buton nga dili aktibo o gibabagan sa app tungod sa usa ka hinungdan o lain, gamita ang kahimtang nga adunay kapansanan. Kana .disabledalang sa mga link ug :disabledalang sa <button>mga elemento.

Mga link

Mga butones

Unsa ni

Ang among topbar usa ka pirmi nga bar nga nagbutang sa logo o ngalan sa usa ka website, panguna nga nabigasyon, ug porma sa pagpangita.

Mapasibo

Ang tanan nga mga elemento sa sulod, ug ang tibuuk nga topbar usab, opsyonal. Mahimo nimong pilion nga ilakip ang usa ka logo/ngalan, nav, pagpangita, ug usa ka ikaduha nga nav—o bisan unsang kombinasyon niana.

Gilakip ang mga dropdown

Isip kabahin sa nag-unang nabigasyon, among gilakip ang abilidad alang kanimo sa pagdugang sa mga dropdown sa imong nav. Tan-awa ang ikaduha nga nav sa ibabaw (gi-align sa tuo) aron makita kung giunsa kini nahimo. liAng mga tag sa dropdown nagsuporta usab .activesa pagpakita sa karon nga pagpili sa panid.

Mga tab ug pills

Paghimo og yano nga sekondaryang nabigasyon nga adunay <ul>. Pagbayloay tali sa mga tab o pildoras pinaagi sa pagdugang sa angay nga klase.

Maayo alang sa mga sub-seksyon sa sulud sama sa among mga panid sa setting sa account ug mga timeline sa gumagamit alang sa pag-toggling tali sa mga panid sa parehas nga sulud. Anaa sa mga estilo sa tabbed o pildoras.

• Balay
• Profile
• Mga mensahe
• Mga setting
• Kontaka
• Dropdown
  • Ikaduha nga link
  • Laing butang dinhi
  • Laing sumpay

<ul class = "mga tab" > 
  <li class = "aktibo" ><a href = "#" > Panimalay </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Mga Mensahe </a></li> 
  <li><a href = "#" > Mga Setting </a></li> 
  <li><a href = "#" > Kontaka </a></li> 
</ul>

• Balay
• Profile
• Mga mensahe
• Mga setting
• Kontaka

<ul class = "pildoras" > 
  <li class = "aktibo" ><a href = "#" > Panimalay </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Mga Mensahe </a></li> 
  <li><a href = "#" > Mga Setting </a></li> 
  <li><a href = "#" > Kontaka </a></li> 
</ul>

Mga mumho sa pan

Ang Breadcrumb navigation gigamit isip usa ka paagi sa pagpakita sa mga tiggamit kung asa sila sulod sa usa ka app o usa ka site, apan dili alang sa nag-unang nabigasyon.

• Balay

• Panimalay /
• Tunga nga panid

• Panimalay /
• Tunga nga panid /
• Usa pa

• Panimalay /
• Tunga nga panid /
• Usa pa /
• Naa ka diri

<ul class = "breadcrumb" > 
  <li><a href = "#" > Panimalay </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Tunga nga panid </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Usa pa </a> <span class = "divider" > / </span></li>   
  <li class = "aktibo" > Ania ka </li> 
</ul>

Pagination

Ultra simplistic ug minimally styled pagination dinasig sa Rdio. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Kaniadto </a></li>  
    <li class = "aktibo" ><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 = "sunod" ><a href = "#" > Sunod → </a></li>  
  </ul>
</div>

Panguna nga mga alerto

.alert-message

Usa ka linya nga mga mensahe alang sa pagpasiugda sa kapakyasan, posible nga kapakyasan, o kalampusan sa usa ka aksyon. Ilabi na mapuslanon alang sa mga porma.

Kuhaa ang javascript »

Ehemplo nga code

<div class = "alerto-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Balaan nga guacamole! </strong> Labing maayo nga susiha ang imong kaugalingon, dili ka kaayo maayo. </p>
</div>

I-block ang mga mensahe

.alert-message.block-message

Alang sa mga mensahe nga nanginahanglan gamay nga katin-awan, kami adunay mga alerto sa istilo sa parapo. Perpekto kini alang sa pagpamulak sa mas taas nga mga mensahe sa sayup, pagpahimangno sa usa ka tiggamit sa usa ka pending nga aksyon, o pagpresentar lang sa impormasyon alang sa dugang nga pagpasiugda sa panid.

Kuhaa ang javascript »

Ehemplo nga code

<div class = "alerto-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Balaan nga guacamole! Kini usa ka pasidaan! </strong> Labing maayo nga susiha ang imong kaugalingon, dili ka kaayo maayo. Nulla vitae elit libero, usa ka pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "mga aksyon nga alerto" > 
    <a class = "btn small" href = "#" > Himoa kini nga aksyon </a> <a class = "btn small" href = "#" > O buhata kini </a>     
  </div>
</div>

Modal

Ang mga modala—mga diyalogo o mga lightbox—maayo alang sa konteksto nga mga aksyon sa mga sitwasyon diin importante nga ang background nga konteksto mamentinar.

Kuhaa ang javascript »

Mga tooltip

Ang mga Twipsies labi ka mapuslanon alang sa pagtabang sa usa ka naglibog nga tiggamit ug pagtudlo kanila sa husto nga direksyon.

Kuhaa ang javascript »

Mga Popover

Gamita ang mga popover para maghatag ug subtextual nga impormasyon sa usa ka panid nga dili makaapekto sa layout.

Kuhaa ang javascript »

Pagsugod

Ang pag-integrate sa javascript sa Bootstrap library kay sayon ​​ra kaayo. Sa ubos among hisgotan ang mga sukaranan ug hatagan ka ug pipila ka katingad-an nga mga plugins aron makasugod ka!

Tan-awa ang javascript docs »

Unsa ang gilakip

Dad-a ang pipila sa mga nag-unang sangkap sa Bootstrap sa kinabuhi uban sa bag-ong custom plugins nga nagtrabaho uban sa jQuery ug Ender . Kami nag-awhag kanimo sa pagpalapad ug pag-usab niini aron mohaum sa imong piho nga panginahanglan sa pag-uswag.

Kinahanglan ba ang javascript?

Dili! Ang Bootstrap gidesinyo una ug labaw sa tanan aron mahimong CSS library. Kini nga javascript naghatag usa ka sukaranan nga interactive layer sa ibabaw sa gilakip nga mga istilo.

Bisan pa, alang sa mga nanginahanglan og javascript, among gihatag ang mga plugins sa taas aron matabangan ka nga masabtan kung giunsa ang pag-integrate sa Bootstrap sa javascript ug aron mahatagan ka usa ka dali, gaan nga kapilian alang sa sukaranan nga pagpaandar dayon.

Alang sa dugang nga kasayuran ug aron makita ang pipila ka mga live demo, palihug tan-awa ang among panid sa dokumentasyon sa plugin .