Zitsanzo zoyambira mwachangu

Mukufuna ma tempulo ofulumira? Onani zitsanzo zoyambira izi zomwe taphatikiza:

Gridi yofikira

Makina osasinthika a gridi omwe amaperekedwa ngati gawo la Bootstrap ndi grid ya 940px wide 16-column grid. Ndikokoma kwa makina odziwika bwino a gridi ya 960, koma opanda malire / padding kumanzere ndi kumanja.

Chitsanzo cha grid markup

Monga tawonera apa, mawonekedwe oyambira atha kupangidwa ndi "mizere" iwiri, iliyonse ikatenga magawo 16 oyambira omwe tafotokoza ngati gawo la gridi yathu. Onani zitsanzo pansipa kuti mumve zambiri.

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

Mizati ya zisa

Nenani zomwe muli nazo ngati mukuyenera kupanga zomwe zili .rowmkati mwazambiri zomwe zilipo.

Chitsanzo cha mizati ya zisa

<div class = "mzere" > 
  <div class = "span12" > 
    Gawo 1 la gawo
    <div class = "mzere" > 
      <div class = "span6" > 
        Gawo 2
      </div>
      <div class = "span6" > 
        Gawo 2
      </div>
    </div>
  </div>
</div>

Sungani gridi yanu

Omangidwa mu Bootstrap ndi mitundu ingapo yosinthira makonda a 940px grid system. Ndi makonda pang'ono, mutha kusintha kukula kwa zipilala, ma gutters awo, ndi chidebe chomwe amakhalamo.

Mkati mwa grid

Zosintha zomwe zimafunikira kusintha ma gridi pakali pano zonse zili mu variables.less.

Tsopano kuti musinthe mwamakonda anu

Kusintha gridi kumatanthauza kusintha mitundu itatu @grid-*ndikubwezeretsanso mafayilo Ochepa.

Bootstrap imakhala ndi zida zogwiritsira ntchito gridi yokhala ndi mpaka 24; kusakhulupirika ndi 16 basi. Umu ndi momwe ma gridi anu osinthika angawonekere makonda kukhala 24-column grid.

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

Mukakonzedwanso, mudzakhazikitsidwa!

Masanjidwe okhazikika

Zosasintha komanso zosavuta 940px-wide, masanjidwe apakati pafupifupi patsamba lililonse kapena tsamba loperekedwa ndi <div.container>.

<thupi>
  <div class = "chotengera" > 
    ...
  </div>
</ thupi>

Kapangidwe kamadzimadzi

Njira ina, mawonekedwe amasamba osinthika amadzimadzi okhala ndi min- ndi max-widths ndi kabar lakumanzere. Zabwino kwa mapulogalamu ndi zolemba.

<thupi>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</ thupi>

Mitu & kukopera

Mndandanda wokhazikika wa typographic pakukonza masamba anu.

Gulu lonse la typographic grid limachokera pamitundu iwiri Yocheperako mufayilo yathu yosinthika.less: @basefontndi @baseline. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira.

Timagwiritsa ntchito masinthidwe amenewo, ndi masamu ena, kupanga m'mphepete, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri.

h1 ndi. Mutu 1

h2 ndi. Mutu 2

h3 ndi. Mutu 3

h4 ndi. Mutu 4

h5 ndi. Mutu 5

h6 ndi. Mutu 6

Chitsanzo ndime

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.

Mutu wachitsanzo uli ndi mutu waung'ono...

Zina. zinthu

Pogwiritsa ntchito kutsindika, maadiresi, ndi mawu achidule

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

Nthawi yoti mugwiritse ntchito

Ma tag otsindika ( <strong>ndi <em>) ayenera kugwiritsidwa ntchito kusonyeza kufunikira kowonjezera kapena kutsindika kwa liwu kapena chiganizo chogwirizana ndi mawu ozungulira. Gwiritsani <strong>ntchito kufunikira komanso <em>kutsindika kupsinjika .

Kutsindika m'ndime

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

Zindikirani: Zili bwino kugwiritsa ntchito <b>ndi <i>ma tag mu HTML5 ndipo sayenera kulembedwa molimba mtima komanso mopendekera, motsatana (ngakhale ngati pali chinthu chowonjezera, chigwiritseni ntchito). <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kupereka zofunikira zowonjezera, pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina zambiri.

Maadiresi

Chigawocho <address>chimagwiritsidwa ntchito pazolumikizana ndi makolo ake apafupi, kapena gulu lonse lantchito. Nazi zitsanzo ziwiri za momwe angagwiritsire ntchito:

Zindikirani: Mzere uliwonse mumzere <address>uyenera kutha ndi kuthyola mzere ( <br />) kapena kukulungidwa ndi tag ya block-level (mwachitsanzo, <p>) kuti mukonzekere bwino zomwe zili.

Chidule cha mawu

Pachidule ndi ma acronyms, gwiritsani ntchito <abbr>tag ( <acronym>yatsitsidwa mu HTML5 ). Ikani mawonekedwe achidule mkati mwa tag ndikuyika mutu wa dzina lathunthu.

Mawu a blockquotes

<blockquote> <p> <small>

Momwe mungatchulire

Kuti muphatikizepo blockquote, <blockquote>zungulirani <p>ndi ma tag <small>. Gwiritsani ntchito <small>chinthucho kuti mutchule gwero lanu ndipo mupeza dash —isanachitike.

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>
  <kamng'ono> Dr. Julius Hibbert </small>
</blockquote>

Osalamulidwa<ul>

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

Osatchulidwa<ul.unstyled>

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

Adalamulidwa<ol>

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

Kufotokozeradl

Mndandanda wamafotokozedwe

Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.

Euismod

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

Donec id ili si mi porta gravida ndi eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kodi

<code> <pre>

Pimp code yanu mumayendedwe ndi ma tag awiri osavuta. Kuti musangalale kwambiri kudzera mu javascript, tsitsani laibulale yokongola ya Google ndipo mwakonzeka.

Kupereka kodi

Khodi, midadada kapena mawu ochepa chabe pamzere, amatha kuwonetsedwa ndi masitayilo pongokulunga pa tag yoyenera. Pama block a code okhala ndi mizere ingapo, gwiritsani ntchito <pre>chinthucho. Kuti mugwiritse ntchito inline code, gwiritsani ntchito <code>chinthucho.

<div>
  <h1>Mutu</h1>
  <p>Chinachake pomwepa...</p>
</div>

<div> <h1> Mutu </h1> <p> Chinachake pomwepa... </p> </div>
  
  

Zolemba zapaintaneti

<span class="label">

Yang'anani kapena kuyika chizindikiro pa mawu aliwonse pamutu wanu.

Lembani chilichonse

Ndidasowapo chimodzi mwazosangalatsa Zatsopano! kapena mbendera zofunika polemba ma code? Chabwino, tsopano muli nawo. Nazi zomwe zikuphatikizidwa ndi kusakhazikika:

Media grid

Onetsani tizithunzi tosiyanasiyana pamasamba okhala ndi HTML yotsika komanso masitayelo ochepa.

Chitsanzo tizithunzi

Tizithunzi tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono ta .media-gridBootstrap. M'lifupi mwazithunzi ngati 90, 210, ndi 330 kuphatikiza ndi ma pixel angapo a padding kuti afanane ndi .span2, .span4, ndi .span6makulidwe a magawo.

Chachikulu

Wapakati

Wamng'ono

Kulemba iwo

Ma gridi ochezera ndi osavuta kugwiritsa ntchito komanso osavuta kumbali yamakapu. Miyeso yawo imatengera kukula kwa zithunzi zomwe zikuphatikizidwa.

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

Kumanga matebulo

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

Matebulo ndi abwino - pazinthu zambiri. Magome abwino, komabe, amafunikira chikondi chocheperako kuti chikhale chothandiza, chokhazikika, komanso chowerengeka (pamlingo wamakhodi). Nawa malangizo angapo othandiza.

Mangirirani mitu yanu nthawi <thead>zonse kuti utsogoleri ndi <thead>> <tr>> <th>.

Mofanana ndi mitu yazagawo, zonse zomwe zili patebulo lanu ziyenera kukulungidwa <tbody>kuti utsogoleri wanu ukhale <tbody>> <tr>> <td>.

Chitsanzo: Masitayelo a tebulo

Matebulo onse azisinthidwa okha ndi malire ofunikira kuti awonetsetse kuti awerengeka komanso kukonza bwino. Palibe chifukwa chowonjezera makalasi owonjezera kapena mawonekedwe.

<tebulo>
  ...
</table>

Chitsanzo: Gome lofupikitsidwa

Pamagome omwe amafunikira zambiri m'malo ocheperako, gwiritsani ntchito kukoma kofupikitsa komwe kumadula pakati. Itha kugwiritsidwanso ntchito molumikizana ndi malire ndi mikwingwirima, monga masitayilo a tebulo.

Chitsanzo: Gome lamalire

Pangani matebulo anu kuti aziwoneka ocheperako pozungulira ngodya zawo ndikuwonjezera malire mbali zonse.

<table kalasi = "tebulo-m'malire" > 
  ...
</table>

Chitsanzo: Zamizeremizere Mbidzi

Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .zebra-stripedkalasi.

Zindikirani: Zebra-striping ndi njira yopititsira patsogolo yosapezeka kwa asakatuli akale monga IE8 ndi pansipa.

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

Chitsanzo: Mizere ya Mbidzi w/ TableSorter.js

Kutengera chitsanzo cham'mbuyomu, timawongolera magwiridwe antchito a matebulo athu popereka magwiridwe antchito kudzera pa jQuery ndi pulogalamu yowonjezera ya Tablesorter . Dinani mutu wagawo lililonse kuti musinthe mtundu.

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

Masitayilo ofikira

Mafomu onse amapatsidwa masitayelo osasinthika kuti awawonetse m'njira yowerengeka komanso yowonjezereka. Masitayilo amaperekedwa pazolowetsa mawu, sankhani ndandanda, zolemba, mabatani a wailesi ndi mabokosi otsimikizira, ndi mabatani.

mafomu osanjikizidwa

Onjezani .form-stackedku HTML ya fomu yanu ndipo mudzakhala ndi zilembo pamwamba pamasamba awo m'malo mwa kumanzere kwawo. Izi zimagwira ntchito bwino ngati mafomu anu ali aafupi kapena muli ndi magawo awiri olowera mafomu olemera.

Kupanga kukula kwamunda

Sinthani mwamakonda anu mawonekedwe aliwonse input, selectkapena textaream'lifupi mwa kuwonjezera makalasi owerengeka pazolemba zanu.

Pofika pa v1.3.0, tawonjeza makalasi otengera ma gridi pazinthu zamawonekedwe. Chonde gwiritsani ntchito izi pamakalasi omwe alipo .mini, .smallndi zina.

Mabatani

Monga msonkhano, mabatani amagwiritsidwa ntchito pochita zinthu pomwe maulalo amagwiritsidwa ntchito pazinthu. Mwachitsanzo, "Kutsitsa" kungakhale batani ndipo "zochitika zaposachedwa" zitha kukhala ulalo.

Mabatani onse amasinthidwa kukhala mtundu wotuwa wopepuka, koma magulu angapo ogwira ntchito atha kugwiritsidwa ntchito pamitundu yosiyanasiyana. Maphunzirowa akuphatikizapo kalasi ya buluu .primary, kalasi ya buluu yowala, .infokalasi yobiriwira .success, ndi kalasi yofiira .danger.

Mwachitsanzo mabatani

Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btnchikugwiritsidwa ntchito. Nthawi zambiri mudzafuna kugwiritsa ntchito izi pazokha <a>, <button>, ndikusankha <input>zinthu. Umu ndi momwe zimawonekera:

Kukula kosinthika

Mukufuna mabatani akulu kapena ang'onoang'ono? Khalani nazo!

Dziko olumala

Kwa mabatani omwe sakugwira ntchito kapena oyimitsidwa ndi pulogalamuyi pazifukwa zina, gwiritsani ntchito malo olumala. Ndiwo .disabledmaulalo ndi :disabledzinthu <button>.

Maulalo

Mabatani

Ndi chiyani

Topbar yathu ndi bala yokhazikika yomwe imakhala ndi logo kapena dzina la webusayiti, mayendedwe oyambira, ndi mawonekedwe osakira.

Customizable

Zinthu zonse mkati, ndi topbar yonse, ndizosankha. Mutha kusankha kuphatikiza logo/dzina, nav, kusaka, ndi nav yachiwiri-kapena kuphatikiza kulikonse.

Zotsitsa zikuphatikizidwa

Monga gawo lalikulu lakusakatula, taphatikizanso kuthekera kwakuti muwonjezere zotsikira ku nav yanu. Onani nav yachiwiri pamwambapa (yolumikizidwa kumanja) kuti muwone momwe zimachitikira. Ma tag otsitsa liamathandiziranso .activekuwonetsa masamba omwe asankhidwa.

Ma tabu ndi mapiritsi

Pangani navigation yosavuta yachiwiri ndi <ul>. Sinthani pakati pa ma tabo kapena mapiritsi powonjezera kalasi yoyenera.

Zabwino kwambiri pamagawo ang'onoang'ono monga masamba ochunira akaunti yathu komanso nthawi ya ogwiritsa ntchito kuti asinthe pakati pamasamba omwe ali ngati. Amapezeka mumitundu yama tabbed kapena mapiritsi.

Basic tabu chitsanzo

Ma tabu atha kugwiritsidwa ntchito ngati kusakatula pafupipafupi (kukweza masamba akunja mu tabu yomweyi) kapena ngati madera omwe atha kusinthidwa posinthana ndi zomwe zili. Tili ndi tabu yowonjezera yomwe ingagwiritsidwe ntchito kuphatikiza zomaliza.

• Kunyumba
• Mbiri
• Mauthenga
• Zokonda
• Contact
• Tsitsa m'munsi
  • Ulalo wachiwiri
  • Chinachake apa
  • Ulalo wina

<ul class = "ma tabu" > 
  <li class = "active" > <a href = "#"> Kwawo </a></li>  
  <li><a href = "#"> Mbiri </a> </li> 
  <li><a href = "#"> Mauthenga </a> </li> 
  <li><a href = "#"> Zokonda </a> </li> 
  <li><a href = "#"> Lumikizanani </a> </li> 
</ul>

Mapiritsi oyambirira chitsanzo

• Kunyumba
• Mbiri
• Mauthenga
• Zokonda
• Contact

<ul class = "mapiritsi" > 
  <li class = "active" > <a href = "#"> Kwawo </a></li>  
  <li><a href = "#"> Mbiri </a> </li> 
  <li><a href = "#"> Mauthenga </a> </li> 
  <li><a href = "#"> Zokonda </a> </li> 
  <li><a href = "#"> Lumikizanani </a> </li> 
</ul>

Zinyenyeswazi za mkate

Breadcrumb navigation imagwiritsidwa ntchito ngati njira yowonetsera ogwiritsa ntchito komwe ali mkati mwa pulogalamu kapena tsamba, koma osati pakusaka koyamba.

• Kunyumba

• Kunyumba /
• Tsamba lapakati

• Kunyumba /
• Tsamba lapakati /
• Winanso

• Kunyumba /
• Tsamba lapakati /
• Enanso /
• Muli pano

<ul class = "breadcrumb" > 
  <li><a href = "#" > Kwawo </a> <span class = "divider" > / </span></li>   
  <li><a href = "#"> Tsamba lapakati </a> < span class = "divider" > / </span></li>   
  <li><a href = "#" > Wina </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Muli pano </li> 
</ul>

Pagination

Ultra mophweka komanso kalembedwe pang'ono pagination wouziridwa ndi Rdio. Chotchinga chachikulu ndi chovuta kuphonya, chiwonjezeke mosavuta, ndipo chimapereka malo akulu odina.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Zam'mbuyo </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 = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Zidziwitso zoyambira

.alert-message

Mauthenga a mzere umodzi wowunikira kulephera, kulephera kotheka, kapena kupambana kwa chinthu. Zothandiza makamaka mafomu.

Pezani javascript »

Chitsanzo kodi

<div class = "chenjezo lauthenga" > 
  <a class = "close" href = "#"> × </a> _  
  <p><strong> Guacamole yoyera! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri. </p>
</div>

Letsani mauthenga

.alert-message.block-message

Pamauthenga omwe amafunikira kufotokozera pang'ono, tili ndi zidziwitso za mawonekedwe a ndime. Izi ndi zabwino potulutsa mauthenga olakwika ataliatali, kuchenjeza wogwiritsa ntchito zomwe akuyembekezera, kapena kungopereka chidziwitso kuti mutsindike kwambiri patsamba.

Pezani javascript »

Chitsanzo kodi

<div class = "chenjezo la uthenga wochenjeza" > 
  <a class = "close" href = "#"> × </a> _  
  <p><strong> Guacamole yoyera! Ili ndi chenjezo! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri. 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 = "#"> Chitani izi </a> <a class = "btn small" href = "#" > Kapena chitani izi </a>     
  </div>
</div>

Makhalidwe

Ma modals—ma dialogs kapena lightboxes—ndiabwino pa zochitika zapanthawi yomwe kuli kofunika kuti nkhani yakumbuyo isungidwe.

Pezani javascript »

Malangizo

Ma Twipsies ndi othandiza kwambiri pothandizira wogwiritsa ntchito wosokonezeka ndikuwalozera njira yoyenera.

Pezani javascript »

Popovers

Gwiritsani ntchito popovers kuti mupereke zambiri pamasamba osakhudza masanjidwe.

Pezani javascript »

Kuyambapo

Kuphatikiza javascript ndi laibulale ya Bootstrap ndikosavuta. Pansipa tikupitilira zoyambira ndikukupatsirani mapulagini odabwitsa kuti muyambe!

Onani zolemba za javascript »

Zomwe zikuphatikizidwa

Bweretsani zina mwazinthu zazikulu za Bootstrap ndi mapulagini atsopano omwe amagwira ntchito ndi jQuery ndi Ender . Tikukulimbikitsani kuti muwonjezere ndikusintha kuti zigwirizane ndi zosowa zanu zachitukuko.

Kodi javascript ndiyofunika?

Ayi! Bootstrap idapangidwa poyamba kuti ikhale laibulale ya CSS. Javascript iyi imapereka gawo loyambira lolumikizana pamwamba pa masitaelo omwe akuphatikizidwa.

Komabe, kwa iwo omwe amafunikira javascript, tapereka mapulagini pamwambapa kuti akuthandizeni kumvetsetsa momwe mungaphatikizire Bootstrap ndi javascript ndikukupatsani njira yachangu, yopepuka pamachitidwe oyambira nthawi yomweyo.

Kuti mumve zambiri komanso kuti muwone ma demo amoyo, chonde onani tsamba lathu lolemba zolemba .