Kurumidza-kutanga mienzaniso

Unoda mamwe matemplate anokurumidza? Tarisa iyi mienzaniso yakakosha yatakaisa pamwechete:

Default grid

Iyo yakasarudzika grid system yakapihwa sechikamu cheBootstrap ndeye 940px yakafara 16-column grid. Iko kuravira kweiyo yakakurumbira 960 grid system, asi isina yekuwedzera margin / padding kuruboshwe nekurudyi mativi.

Muenzaniso grid markup

Sezvinoratidzwa pano, hurongwa hwekutanga hunogona kugadzirwa ne "makoroni" maviri, imwe neimwe inotora nhamba yezvikamu gumi nematanhatu zvekutanga zvatakatsanangura sechikamu chegridi yedu. Ona mienzaniso iri pasi apa kuti uwane mamwe misiyano.

<div kirasi = "mutsara" > 
  <div class = "span6" > 
    ...
  </ div>
  <div class = "span10" > 
    ...
  </ div>
</ div>

Nesting columns

Nest zvirimo zvako kana uchifanirwa nekugadzira .rowmukati meiyo column iripo.

Mienzaniso yemakoramu anested

<div kirasi = "mutsara" > 
  <div class = "span12" > 
    Chikamu 1 chechikamu
    <div kirasi = "mutsara" > 
      <div class = "span6" > 
        Level 2
      </ div>
      <div class = "span6" > 
        Level 2
      </ div>
    </ div>
  </ div>
</ div>

Gadzirisa grid yako wega

Yakavakwa muBootstrap mashoma mashoma ekugadzirisa iyo default 940px grid system. Nekamwe kagadziriso, unogona kugadzirisa saizi yemakoramu, magita avo, uye mudziyo wavanogara.

Mukati megridi

Iwo akasiyana anodiwa kugadzirisa grid system parizvino ese anogara mu preboot.less.

Iye zvino kugadzirisa

Kugadzirisa grid kunoreva kushandura matatu @grid-*akasiyana uye kudzoreredza Madiki mafaera.

Bootstrap inouya yakashongedzerwa kubata grid system inosvika makumi maviri nemana makoramu; iyo default ingori 16. Heano maitiro egridi yako inotaridzika yakasarudzika kune 24-column grid.

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

Kana yangodzokororwa, iwe unenge wagadzirirwa!

Fixed layout

Iyo yakasarudzika uye yakapusa 940px-yakafara, yakatarisana dhizaini yeinongoita chero webhusaiti kana peji rinopihwa neamwechete <div.container>.

<muviri>
  <div kirasi = "mudziyo" > 
    ...
  </ div>
</ body>

Fluid marongerwo

Imwe nzira, inochinjika yemvura peji chimiro chine min- uye max-hupamhi uye kuruboshwe-kuruboshwe. Yakanakira maapplication uye zvinyorwa.

<muviri>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div kirasi = "zviri mukati" > 
      ...
    </ div>
  </ div>
</ body>

Misoro & kopi

Yakajairika typographic hierarchy yekugadzira mapeji ako ewebhu.

Iyo yese typographic grid yakavakirwa pane maviri Madiki akasiyana mune yedu preboot.less faira: @basefontuye @baseline. Yekutanga ndiyo base font-saizi inoshandiswa mukati mese uye yechipiri ndiyo base mutsetse-urefu.

Isu tinoshandisa izvo zvinosiyanisa, uye mamwe masvomhu, kugadzira miganho, padding, uye mutsara-urefu hwemhando yedu yese nezvimwe.

h1. Musoro 1

h2. Musoro 2

h3. Musoro 3

h4. Musoro wechi4

h5. Musoro 5

h6. Musoro 6

Muenzaniso ndima

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

Musoro wemuenzaniso Une kamusoro-diki...

Misc. zvinhu

Kushandisa kusimbisa, kero, uye zvipfupiso

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

Nguva yekushandisa

Mategi ekusimbisa ( <strong>uye <em>) anofanira kushandiswa kuratidza kukosha kwakawedzerwa kana kusimbisa kweshoko kana chirevo maererano nekopi yakaripoteredza. Shandisa <strong>kukosha uye <em>kusimbisa kusimbisa .

Kusimbisa mundima

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, pharetra augue.

Ongorora: Zvichiri zvakanaka kushandisa <b>uye <i>ma tag muHTML5 uye havafanirwe kunyorwa zvakashinga uye iticic, zvichiteerana (kunyangwe paine imwe semantic element, ishandise). <b>inoitirwa kuratidza mazwi kana mitsara pasina kuwedzera kukosha, asi <i>kazhinji ndeyeizwi, tekinoroji mazwi, nezvimwe.

Kero

Icho <address>chinhu chinoshandiswa kune ruzivo rwekusangana kune tateguru waro wepedyo, kana boka rese rebasa. Heino mienzaniso miviri yekuti ingashandiswa sei:

Cherechedzo: Mutsetse wega wega mumutsara <address>unofanirwa kupera nemutsara-kutyora ( <br />) kana kuputirwa mu block-level tag (eg, <p>) kuronga zvakanaka zvirimo.

Madimburiko

Pamapfupiso nemaacronyms, shandisa iyo <abbr>tag ( <acronym>yakadzikiswa muHTML5 ). Isa iyo shorthand fomu mukati me tag uye isa zita rezita rakazara.

Blockquotes

<blockquote> <p> <small>

Nzira yekutaura sei

Kusanganisira blockquote, peta <blockquote>kumativi <p>uye <small>ma tag. Shandisa <small>chinhu kutaura kwaunobva uye iwe uchawana em dash —pamberi payo.

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

Dr. Julius Hibbert

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

Zvisina kurairwa<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis mu pretium nisl aliquet
• 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
• Facilisis mu pretium nisl aliquet
• 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

Ordered<ol>

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

Tsanangudzodl

Tsanangudzo mazita

Rondedzero yerondedzero yakakwana pakutsanangura mazwi.

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.

Code

<code> <pre>

Pimp kodhi yako muchimiro nematagi maviri akareruka. Kuti uwedzere kushamisa kuburikidza nejavascript, donhedza muGoogle kodhi prettify raibhurari uye wagadzirira.

Tichipa kodhi

Kodhi, zvidhinha kana zvimedu zviri mukati, zvinogona kuratidzwa nemaitiro nekuputira mune chaiyo tag. Kune mabhuraki ekodhi inotenderera mitsetse yakawanda, shandisa <pre>chinhu. Kune inline kodhi, shandisa <code>chinhu.

<div>
  <h1>Musoro</h1>
  <p>Chimwe chinhu pano...</p>
</ div>

<div> <h1> Musoro </h1> <p> Chimwe chinhu pano... </p> </div>
  
  

Inline labels

<span class="label">

Shevedzera kutarisisa kana kumisa chero mutsara mune zvinyorwa zvemuviri wako.

Nyora chero chinhu

Kumboda imwe yeaya anoyevedza Nyowani ! kana Mireza yakakosha paunenge uchinyora kodhi? Zvakanaka, ikozvino wava navo. Hezvino izvo zvinosanganisirwa neiyo default:

Media grid

Ratidza zvigunwe zvehukuru hwakasiyana pamapeji ane yakaderera HTML tsoka uye zvitaera zvidiki.

Muenzaniso zvigunwe

Thumbnails muiyo .media-gridinogona kuve chero saizi, asi inoshanda zvakanyanya kana yakamepurwa yakananga kune yakavakirwa-mukati Bootstrap grid system. Mifananidzo yakafara se90, 210, uye 330 inosanganiswa nemapikisi mashoma epadding kuti aenzane ne .span2, .span4, uye .span6makoramu saizi.

Zvikuru

Pakati

Diki

Coding them

Media grids ari nyore kushandisa uye zviri nyore padivi remakapu. Kukura kwavo kunoenderana nehukuru hwemifananidzo inosanganisirwa.

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

Kuvaka matafura

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

Matafura akanaka-kune zvinhu zvakawanda. Matafura makuru, zvisinei, anoda chidimbu cherudo rwemarkup kuti rubatsire, scalable, uye kuverenga (padanho rekodhi). Heano mazano mashoma ekubatsira.

Gara uchiputira makoramu misoro yako mune <thead>yakadaro iyo hierarchy iri <thead>> <tr>> <th>.

Zvakafanana nemusoro wembiru, zvese zvemuviri wetafura yako zvinofanirwa kuputirwa mukuti hutongi hwako <tbody>huve <tbody>> <tr>> <td>.

Muenzaniso: Default table styles

Matafura ese anozoitwa otomatiki aine miganhu yakakosha chete kuve nechokwadi chekuverenga uye kuchengetedza chimiro. Hapana chikonzero chekuwedzera mamwe makirasi kana hunhu.

<tafura>
  ...
</ table>

Muenzaniso: Mbizi ine mitsetse

Wana shoo shoma nematafura ako nekuwedzera mbizi-striping-ingowedzera .zebra-stripedkirasi.

Cherechedzo: Zebra-striping inoenderera mberi isingawanikwe kumabhurawuza echikuru seIE8 uye pazasi.

<tafura yekirasi = "mbizi-mitsetse" > 
...
</ table>

Muenzaniso: Zebra-striped w/ TableSorter.js

Tichitora muenzaniso wekare, tinovandudza kukosha kwematafura edu nekupa mashandiro ekugadzirisa kuburikidza nejQuery neTablesorter plugin . Dzvanya musoro wechero chikamu kuti uchinje rudzi.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( basa () { 
    $ ( "tafura#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<tafura yekirasi = "mbizi-mitsetse" > 
  ...
</ table>

Default styles

Mafomu ese anopihwa zvitaera zvekusarudzika kuti azviratidze nenzira inoverengeka uye inorema. Zvitaera zvinopihwa zvekupinza zvinyorwa, sarudza zvinyorwa, zvinyorwa, mabhatani eredhiyo uye mabhokisi ekutarisa, uye mabhatani.

Akaturikidzana mafomu

Wedzera .form-stackedkune fomu yako HTML uye iwe unenge uine mavara pamusoro peminda yavo pane kuruboshwe kwavo. Izvi zvinoshanda zvakanaka kana mafomu ako ari mapfupi kana uine makoramu maviri ezvekupinza mafomu anorema.

Gadzira saizi yemunda

Gadzirisa chero fomu,, inputkana selecthupamhi textareanekuwedzera makirasi mashoma kune yako markup.

Kubva pav1.3.0, isu takawedzera iyo grid-based sizing makirasi emafomu zvinhu. Ndokumbira ushandise aya pamusoro pearipo .mini, .small, nezvimwe makirasi.

Mabhatani

Semusangano, mabhatani anoshandiswa kuita zviito nepo zvinongedzo zvichishandiswa kuzvinhu. Semuyenzaniso, "Kudhaunirodha" rinogona kunge riri bhatani uye "zvichangobva kuitika" rinogona kunge riri chinongedzo.

Ese mabhatani anogara kune yakareruka grey maitiro, asi akati wandei makirasi anoshanda anogona kuiswa kune akasiyana mavara masitaera. Aya makirasi anosanganisira kirasi yebhuruu .primary, kirasi yebhuruu-chiedza .info, kirasi yegirini .success, uye kirasi tsvuku .danger.

Mabhatani emuenzaniso

Mabhatani masitayera anogona kuiswa kune chero chinhu chine .btnyakaiswa. Kazhinji iwe unozoda kushandisa izvi kune chete <a>, <button>, uye sarudza <input>zvinhu. Heino maitiro azvinotaridzika:

Alternate sizes

Unoda mabhatani makuru kana madiki? Iva nazvo!

Disabled state

Kune mabhatani asiri kushanda kana akadzimwa neapp nechikonzero chimwe kana chimwe, shandisa yakaremara nyika. Ndiko .disabledkune zvinongedzo uye :disabledzvezvinhu <button>.

Links

Mabhatani

Chii

Yedu yepamusoro bhaa yakamiswa inogara logo yewebhusaiti kana zita, yekutanga navigation, uye fomu yekutsvaga.

Customizable

Zvese zvinhu mukati, uye iyo topbar yese zvakare, ndeye sarudzo. Iwe unogona kusarudza kuisa logo/zita, nav, kutsvaga, uye yechipiri nav-kana chero musanganiswa weizvozvo.

Dropdowns inosanganisirwa

Sechikamu chekufambisa kukuru, takabatanidza kugona kwako kuwedzera zvinodonhedza kune yako nav. Tarisa uone yechipiri nav pamusoro (yakatarisana kurudyi) kuti uone kuti zvinoitwa sei. Dropdown litags inotsigirawo .activekuratidza sarudzo yepeji iripo.

Tabs nemapiritsi

Gadzira yakapusa yechipiri navigation ne <ul>. Chinjana pakati pematabhu kana mapiritsi nekuwedzera kirasi yakakodzera.

Yakanakira zvikamu zvidiki zvemukati senge mapeji eakaundi yedu yekuseta uye nguva dzevashandisi dzekushandura pakati pemapeji ezvakafanana. Inowanikwa mune tabbed kana mapiritsi maitiro.

• Kumba
• Profile
• Mharidzo
• Settings
• Contact
• Dropdown
  • Secondary link
  • Chimwe chinhu pano
  • Imwe link

<ul class = "tabs" > 
  <li class = "active" ><a href = "#"> Kumba </a></li >  
  <li><a href = "#"> Profile </a> </li> 
  <li><a href = "#" > Mharidzo </a></li> 
  <li><a href = "#" > Zvirongwa </a></li> 
  <li><a href = "#"> Contact </a> </li> 
</ul>

• Kumba
• Profile
• Mharidzo
• Settings
• Contact

<ul class = "mapiritsi" > 
  <li class = "active" ><a href = "#"> Kumba </a></li >  
  <li><a href = "#"> Profile </a> </li> 
  <li><a href = "#" > Mharidzo </a></li> 
  <li><a href = "#" > Zvirongwa </a></li> 
  <li><a href = "#"> Contact </a> </li> 
</ul>

Zvimedu zvechingwa

Breadcrumb navigation inoshandiswa senzira yekuratidza vashandisi pavanenge vari mukati meapp kana saiti, asi kwete yekutanga navigation.

• Kumba

• Kumba /
• Peji yepakati

• Kumba /
• Peji yepakati /
• Imwe zvekare

• Kumba /
• Peji yepakati /
• Mumwe /
• Iwe uri pano

<ul class = "breadcrumb" > 
  <li><a href = "#" > Kumba </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Peji yepakati </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Imwezve </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Uri pano </li> 
</ul>

Pagination

Ultra yakapfava uye yakashongedzerwa pagination yakafemerwa neRdio. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Yakapfuura </a> < /li>  
    <li class = "active" ><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 = "inotevera" ><a href = "#" > Inotevera → </a></li>  
  </ul>
</ div>

Basic alerts

.alert-message

One-line meseji yekujekesa kutadza, kutadza kukwanisika, kana kubudirira kwechiito. Kunyanya kubatsira kune mafomu.

Tora javascript »

Muenzaniso kodhi

<div kirasi = "yambiro-yambiro" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Tsvene guacamole! </strong> Best check yo self, hausi kunyanyonaka. </ p>
</ div>

Vhara mameseji

.alert-message.block-message

Kune meseji inoda tsananguro yakati wandei, tine ziviso yemaitiro endima. Aya akanakira kubhuroka mameseji ezvikanganiso akareba, kunyevera mushandisi nezvechiito chakamirira, kana kungopa ruzivo rwekusimbisa zvakanyanya pane peji.

Tora javascript »

Muenzaniso kodhi

<div kirasi = "alert-message block-message yambiro" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Tsvene guacamole! Iyi inyevero! </strong> Best check yo self, hausi kunyanyonaka. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </ p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Tora chiito ichi </a> <a class = "btn small" href = "#" > Kana kuti ita izvi </a>     
  </ div>
</ div>

Modals

Modals-dialogs kana lightboxes-akanaka kune zviito zvemukati mumamiriro ezvinhu apo zvakakosha kuti mamiriro ekumashure achengetwe.

Tora javascript »

Tooltips

Twipsies inonyanya kubatsira kubatsira mushandisi akavhiringidzika uye kuvanongedzera munzira kwayo.

Tora javascript »

Popover

Shandisa mapopovers kupa subtextual ruzivo kune peji pasina kukanganisa marongero.

Tora javascript »

Kutanga

Kubatanidza javascript neBootstrap raibhurari iri nyore kwazvo. Pazasi isu tinoenda pamusoro pezvakakosha uye tinokupa iwe anotyisa plugins kuti iwe utange!

Ona javascript docs »

Chii chinosanganisirwa

Hunza zvimwe zveBootstrap zvinonyanya kukosha kuhupenyu nemapulagi matsva anoshanda nejQuery uye Ender . Tinokukurudzira kuti uwedzere uye uzvigadzirise kuti zvienderane nezvinodiwa zvako zvekusimudzira.

Javascript inofanirwa here?

Kwete! Bootstrap yakagadzirwa kutanga uye zvakanyanya kuve raibhurari yeCSS. Iyi javascript inopa yakakosha yekudyidzana layer pamusoro peakasanganisirwa masitaera.

Nekudaro, kune avo vanoda javascript, isu takapa maplugins ari pamusoro kuti akubatsire iwe kunzwisisa maitiro ekubatanidza Bootstrap nejavascript uye kukupa iwe nekukurumidza, kuremerwa sarudzo yebasa rekutanga ipapo.

Kuti uwane rumwe ruzivo uye kuona mamwe mhenyu demos, ndapota tarisa kune yedu plugin zvinyorwa peji peji .