Igipimo cyimyandikire

Imashini yimyandikire yose ishingiye kubintu bibiri bito bihinduka mubihinduka.nta dosiye: @baseFontSizena @baseLineHeight. Iya mbere ni ishingiro ryimyandikire-nini ikoreshwa mugihe cyose naho icya kabiri ni umurongo-muremure.

Dukoresha izo mpinduka, hamwe nimibare imwe, kugirango dukore marge, padi, hamwe numurongo-muremure wubwoko bwacu nibindi byinshi.

Urugero inyandiko yumubiri

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Ukoresheje gushimangira

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

Icyitonderwa: Wumve neza ko ukoresha <b>no <i>muri HTML5, ariko imikoreshereze yabo yarahindutse gato. <b>igamije kwerekana amagambo cyangwa interuro uterekanye akamaro kiyongereye mugihe <i>ahanini ari ijwi, amagambo ya tekiniki, nibindi.

Urugero rwa aderesi

Dore ingero ebyiri z'uburyo <address>tagi ishobora gukoreshwa:

Urugero mu magambo ahinnye

Amagambo ahinnye yanditseho inyuguti nkuru hamwe n'umucyo utudomo two hepfo. Bafite kandi infashanyo indanga kuri hover kugirango abakoresha bafite ibimenyetso byerekana ikintu kizerekanwa kuri hover.

HTML nikintu cyiza kuva gukata imigati.

Amagambo ahinnye yijambo ikiranga ni attr .

Kugirango ushiremo blocote, <blockquote>uzenguruke HTML iyo ari yo yose . Kubisobanuro bitomoye turasaba a <p>.

Shyiramo ikintu kidahinduka <small>kugirango utange inkomoko yawe hanyuma uzabona em dash —mbere yacyo kugirango ikoreshwe.

<blockquote>
  <p> Lorem ipsum dolor icara amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  <small> Umuntu uzwi </small>
</blockquote>

Ibisanzwe byahagaritswe byanditse nkibi:

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.

Umuntu uzwi mumubiri wakazi

Kureremba blokquote yawe iburyo, ongeraho class="pull-right":

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.

Umuntu uzwi mumubiri wakazi

Urutonde

<ul>

• Lorem ipsum dolor icara amet
• Consectetur adipiscing elit
• Integer molestie lorem kuri massa
• Facilisis muri pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kuri
• Faucibus porta lacus fringilla vel
• Aenean bicara amet erat nunc
• Eget porttitor lorem

Unstyled

<ul class="unstyled">

• Lorem ipsum dolor icara amet
• Consectetur adipiscing elit
• Integer molestie lorem kuri massa
• Facilisis muri pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kuri
• Faucibus porta lacus fringilla vel
• Aenean bicara amet erat nunc
• Eget porttitor lorem

Rutegetse

<ol>

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

Ibisobanuro

<dl>

Urutonde rwibisobanuro

Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.

Euismod

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

Donec id elit non mi porta gravida kuri eget metus.

Malesuada porta

Etiam porta sem maleuada magna mollis euismod.

Umurongo

Kuzuza ibice bya kode hamwe <code>.

Kurugero , <code> igice < / code > igomba gupfunyika nkumurongo .  

Inzitizi y'ibanze

Koresha <pre>imirongo myinshi ya code. Wemeze guhindura amakarito yose mumyandikire yabo ya unicode kugirango itangwe neza.

<p> Icyitegererezo hano ... </p>

<pre>
  & lt; p & gt; Inyandiko y'icyitegererezo hano ... & lt; / p & gt;
</pre>

Icyitonderwa: Witondere kubika code muri <pre>tagi hafi ibumoso bushoboka; Bizatanga ibisobanuro byose.

Google Yerekana neza

Fata ikintu kimwe <pre>hanyuma wongereho ibyiciro bibiri bidahwitse kugirango uzamure neza.

<p> Icyitegererezo hano ... </p>

<pre class = "prettyprint 
imyenda      "
  & lt; p & gt; Inyandiko y'icyitegererezo hano ... & lt; / p & gt;
</pre>

Kuramo google-code- yerekana neza hanyuma urebe ibisobanuro byuburyo bwo gukoresha.

<table>
  <umutwe>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Imbonerahamwe ihita yandikwa nimbibi nkeya kugirango yizere ko isomeka kandi ikomeze imiterere. Hamwe na 2.0, .tableicyiciro kirakenewe.

<imbonerahamwe yimeza = " imbonerahamwe" > 
  …
</table>

Shaka akantu gato hamwe nameza yawe wongeyeho zebra-striping - ongeraho .table-stripedishuri.

Icyitonderwa: Imbonerahamwe yamenetse ikoresha :nth-childCSS itoranya kandi ntabwo iboneka muri IE7-IE8.

<imbonerahamwe yimeza = " imbonerahamwe yimeza" > 
  …
</table>

Ongeraho imipaka ikikije ameza yose hamwe nu mpande zegeranye kugirango ubone ibyiza.

<imbonerahamwe yimeza = " imbonerahamwe yimbonerahamwe" > 
  …
</table>

Kora ameza yawe arusheho kongeramo urwego .table-condensedrwo guca kumeza ya selile ya kabiri (kuva 8px kugeza 4px).

<imbonerahamwe yimeza = " imbonerahamwe yimeza" > 
  …
</table>

Wumve neza ko uhuza icyiciro icyo aricyo cyose cyameza kugirango ugere kubintu bitandukanye ukoresheje amasomo aboneka.

<imbonerahamwe yimeza = " imbonerahamwe yimeza-yameza-imbonerahamwe ihujwe nimbonerahamwe" > 
  ...
</table>

Ihinduka rya HTML na CSS

Igice cyiza kijyanye na forme muri Bootstrap nuko ibyo winjiza byose hamwe nubugenzuzi bisa neza nubwo waba ubyubaka gute. Nta HTML irenze urugero isabwa, ariko turatanga icyitegererezo kubabikeneye.

Imiterere igoye cyane izana ibyiciro byoroheje kandi byapimwe kuburyo bworoshye bwo gutunganya no guhuza ibyabaye, bityo urapfundikirwa kuri buri ntambwe.

Imiterere ine irimo

Bootstrap izana inkunga yubwoko bune bwimiterere:

• Uhagaritse (isanzwe)
• Shakisha
• Umurongo
• Uhagaritse

Ubwoko butandukanye bwimiterere isaba impinduka kugirango ushireho ikimenyetso, ariko igenzura ubwaryo rigumaho kandi ryitwara kimwe.

Kugenzura leta nibindi byinshi

Ifishi ya Bootstrap ikubiyemo imiterere yuburyo bwose bwibanze bugenzura nko kwinjiza, textarea, no guhitamo wakwitega. Ariko kandi izanye numubare wibikoresho byihariye byongeweho kandi byateguwe mbere yinyongera hamwe ninkunga ya lisiti yisanduku.

Ibihugu nkikosa, kuburira, nubutsinzi birimo kuri buri bwoko bwubugenzuzi. Harimo kandi nuburyo bwo kugenzura abamugaye.

Hamwe na v2.0, dufite urumuri rworoshye kandi rworoshye muburyo bwimiterere. Nta kimenyetso cyiyongereye, gusa fomu igenzura.

Kugaragaza imiterere isanzwe ya WebKit, ongeraho gusa .form-searchkubushakashatsi bwimbitse.

Iyinjiza ni urwego rwo gutangira. Kuri .form-inlinena .form-horizontal, dukoresha umurongo-uhagarika.

Harimo iki

Yerekanwa ibumoso nuburyo busanzwe bwo kugenzura dushyigikiye. Dore urutonde rwamasasu:

• inyandiko zanditse (inyandiko, ijambo ryibanga, imeri, nibindi)
• agasanduku
• radiyo
• hitamo
• hitamo byinshi
• dosiye
• textarea

Ibisanzwe bishya hamwe na v2.0

Kugera kuri v1.4, Imiterere ya Bootstrap yuburyo busanzwe yakoresheje imiterere itambitse. Hamwe na Bootstrap 2, twakuyeho izo mbogamizi kugirango tugire ubwenge, burenze urugero muburyo busanzwe.

Kongera gushushanya mushakisha

Bootstrap iranga uburyo bwa mushakisha ushyigikiwe na disabledleta. Twakuyeho Webkit isanzwe outlinehanyuma dushyireho a box-shadowni umwanya wa :focus.

Kwemeza ifishi

Harimo kandi uburyo bwo kwemeza amakosa, kuburira, no gutsinda. Gukoresha, ongeramo amakosa yibyiciro bikikije .control-group.

<Umwanya
  icyiciro = "kugenzura-itsinda ryamakosa" >
  …
</fieldset>

Tegura & ongeraho inyongeramusaruro

Amatsinda yinjiza - hamwe ninyandiko yongeweho cyangwa yateguwe - itanga inzira yoroshye yo gutanga ibisobanuro byinshi kubyo winjije. Ingero zikomeye zirimo @ ikimenyetso cyamazina ya Twitter cyangwa $ kumafaranga.

Agasanduku na radiyo

Kugera kuri v1.4, Bootstrap isaba marike yinyongera hafi yisanduku na radio kugirango ubishyire hamwe. Noneho, nikintu cyoroshye cyo gusubiramo <label class="checkbox">ipfunyika i <input type="checkbox">.

Kugenzura agasanduku na radiyo nabyo birashyigikiwe. Gusa ongeraho icyaricyo .inlinecyose .checkboxcyangwa .radiourangije.

Shira kumurongo hanyuma wongere / witegure

Kugira ngo ukoreshe prepend cyangwa wongereho inyongeramusaruro muburyo bwa inline, menya neza ko ushira i .add-onno inputkumurongo umwe, nta mwanya.

Shiraho inyandiko ifasha

Kugirango wongere inyandiko ifasha kumpapuro zinjiza, shyiramo umurongo ufasha inyandiko hamwe <span class="help-inline">cyangwa inyandiko ifasha guhagarika hamwe <p class="help-block">nyuma yibintu byinjijwe.

Utubuto kubikorwa

Nkibisanzwe, buto igomba gukoreshwa gusa mubikorwa mugihe hyperlinks igomba gukoreshwa kubintu. Kurugero, "Gukuramo" bigomba kuba buto mugihe "ibikorwa bya vuba" bigomba kuba umurongo.

Kuri inanga

Imisusire ya buto irashobora gukoreshwa kubintu byose hamwe .btnnibisabwa. Ariko, mubisanzwe uzashaka kubishyira mubikorwa gusa <a>nibintu <button>.

Icyitonderwa: Utubuto twose tugomba gushyiramo urwego .btn. Imisusire ya buto igomba gukoreshwa <button>hamwe <a>nibintu byo guhuzagurika.

Ingano nyinshi

Ibyiza binini cyangwa bito? Mugire!

Igikorwa cyibanze Igikorwa

Igikorwa cyibanze Igikorwa

Leta yamugaye

Kuri buto yamugaye, koresha .btn-disabledamahuza nibintu.:disabled<button>

Igikorwa cyibanze Igikorwa

Igikorwa cyibanze Igikorwa

Guhuza amashakiro

Muri IE9, tumanura gradient kuri buto zose kugirango dushyigikire inguni zegeranye kuko IE9 idatera ibihingwa byimbere kuri mfuruka.

Bifitanye isano, IE9 ihindura buttonibintu byamugaye, ihindura inyandiko imvi hamwe nigicucu kibi-igicucu - birababaje ntidushobora gukosora ibi.

Yubatswe nka spite

Aho kugirango buri gishushanyo kibe icyifuzo cyinyongera, twakusanyije muri sprite - agashusho k'amashusho muri dosiye imwe ikoresha CSS kugirango ushireho amashusho hamwe background-position. Ubu ni bwo buryo bumwe dukoresha kuri Twitter.com kandi bwadukoreye neza.

Udushushondanga twose ibyiciro byashyizwe hamwe hamwe nizina .icon-ryiza hamwe na scoping, nkibindi bice byacu. Ibi bizafasha kwirinda amakimbirane nibindi bikoresho.

Glyphicons yaduhaye gukoresha Halflings yashyizwe mubikoresho byacu bifungura isoko mugihe cyose dutanze umurongo ninguzanyo hano muri doc. Nyamuneka tekereza gukora kimwe mumishinga yawe.

Uburyo bwo gukoresha

Hamwe na v2.0.0, twahisemo gukoresha <i>tagi kumashusho yacu yose, ariko ntabwo bafite urwego rwimanza-gusa dusangiye prefix. Gukoresha, shyira kode ikurikira hafi aho ariho hose:

<i urwego = "igishushanyo-shakisha" > </i> 

Hariho kandi uburyo buboneka kumashusho ahindagurika (yera), yakozwe hamwe nicyiciro kimwe cyinyongera:

<i urwego = "igishushanyo-shakisha igishushanyo-cyera" > </i> 

Hano hari ibyiciro 120 byo guhitamo kubishushanyo byawe. Gusa ongeraho <i>tagi hamwe namasomo akwiye kandi washyizweho. Urashobora kubona urutonde rwuzuye muri sprites.nta cyangwa hano hano muriyi nyandiko.

Koresha imanza

Udushushondanga nibyiza, ariko umuntu yakoresha he? Dore ibitekerezo bike:

• Nka mashusho yo kuruhande rwawe
• Kubishushanyo gusa
• Kuri buto kugirango ifashe kwerekana ibisobanuro byigikorwa
• Hamwe nu murongo wo gusangira imiterere aho umukoresha yerekeza

Byibanze, ahantu hose ushobora gushyira <i>tagi, urashobora gushira agashusho.

Ongera Kugenzura Siba

Igitekerezo Igenamiterere Andi Makuru