Hejuru ya scafolding, ibice byibanze bya HTML byanditse kandi byongerewe imbaraga hamwe nibyiciro byagutse kugirango bitange isura nshya, ihamye kandi yumve.
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.
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.
| Ikintu | Ikoreshwa | Bihitamo |
|---|---|---|
<strong> |
Kubitsindagira agace k'inyandiko hamwe n'ingenzi | Nta na kimwe |
<em> |
Kubitsindagira agace k'inyandiko hamwe na stress | Nta na kimwe |
<abbr> |
Gupfunyika amagambo ahinnye n'amagambo ahinnye yerekana verisiyo yagutse kuri hover | Shyiramo .initialismibyiciro bigufi. |
<address> |
Kumakuru yamakuru kubakurambere bayo hafi cyangwa umubiri wose wakazi | Bika imiterere urangiza imirongo yose hamwe<br> |
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.
Dore ingero ebyiri z'uburyo <address>tagi ishobora gukoreshwa:
Amagambo ahinnye afite titleikiranga afite urumuri rudomo ruri munsi yumupaka hamwe nubufasha indanga kuri hover. Ibi biha abakoresha ibimenyetso byerekana ikintu kizerekanwa kuri hover.
Ongeraho initialismicyiciro mu magambo ahinnye kugirango wongere ubwanditsi bwimyandikire ubiha ubunini buke bwinyandiko.
HTML nikintu cyiza kuva gukata imigati.
Amagambo ahinnye yijambo ikiranga ni attr .
| Ikintu | Ikoreshwa | Bihitamo |
|---|---|---|
<blockquote> |
Hagarika urwego urwego rwo gusubiramo ibivuye ahandi | Ongeraho .pull-leftn'amasomo .pull-rightkumahitamo areremba |
<small> |
Ikintu kidahitamo cyo kongeramo umukoresha-ureba, mubisanzwe umwanditsi ufite umutwe wakazi | Shyira <cite>hafi yumutwe cyangwa izina ryinkomoko |
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Umutwe! Urutonde rwibisobanuro bitambitse bizagabanya amagambo maremare cyane kugirango ahuze ibumoso bwiburyo text-overflow. Mubyerekezo bigufi, bizahinduka muburyo busanzwe buteganijwe.
Kuzuza ibice bya kode hamwe <code>.
- Kurugero , <code> igice < / code > igomba gupfunyika nkumurongo .
Koresha <pre>imirongo myinshi ya code. Witondere guhunga inguni iyo ari yo yose muri kode 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.
Urashobora guhitamo kongeramo urwego .pre-scrollableruzashyiraho max-uburebure bwa 350px hanyuma utange y-axis umuzingo.
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.
| Tag | Ibisobanuro |
|---|---|
<table> |
Gupfunyika ibintu byo kwerekana amakuru muburyo bwa mbonerahamwe |
<thead> |
Ibikoresho birimo kumeza umutwe wumurongo ( <tr>) kugirango wandike imbonerahamwe yinkingi |
<tbody> |
Ibikoresho birimo kumeza kumurongo ( <tr>) mumubiri wameza |
<tr> |
Ibikoresho birimo ibice byameza ( <td>cyangwa <th>) bigaragara kumurongo umwe |
<td> |
Akazu gasanzwe |
<th> |
Ameza yihariye ya selile kumurongo (cyangwa umurongo, bitewe nurwego no gushyira) ibirango bigomba gukoreshwa muri a <thead> |
<caption> |
Ibisobanuro cyangwa incamake y'ibyo imbonerahamwe ifata, cyane cyane ingirakamaro kubasoma ecran |
- <table>
- <umutwe>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Izina | Icyiciro | Ibisobanuro |
|---|---|---|
| Mburabuzi | Nta na kimwe | Nta buryo, gusa inkingi n'imirongo |
| Shingiro | .table |
Gusa imirongo itambitse hagati yumurongo |
| Imipaka | .table-bordered |
Kuzenguruka inguni no kongeramo umupaka wo hanze |
| Zebra-umurongo | .table-striped |
Ongeraho ibara ryijimye ryijimye kumurongo udasanzwe (1, 3, 5, nibindi) |
| Byegeranye | .table-condensed |
Gabanya vertical padding mo kabiri, kuva 8px kugeza 4px, muri byose tdnibintuth |
Imbonerahamwe ihita yandikwa nimbibi nkeya kugirango yizere ko isomeka kandi ikomeze imiterere. Hamwe na 2.0, .tableicyiciro kirakenewe.
- <imbonerahamwe yimeza = " imbonerahamwe" >
- …
- </table>
| # | Izina | Izina ryanyuma | Izina ryukoresha |
|---|---|---|---|
| 1 | Ikimenyetso | Otto | @mdo |
| 2 | Yakobo | Thornton | @fat |
| 3 | Larry | Inyoni |
Shaka akantu gato hamwe nameza yawe wongeyeho zebra-striping - ongeraho .table-stripedishuri.
Icyitonderwa: Imbonerahamwe yanditswemo ikoresha :nth-childCSS itoranya kandi ntabwo iboneka muri IE7-IE8.
- <imbonerahamwe yimeza = " imbonerahamwe yimeza" >
- …
- </table>
| # | Izina | Izina ryanyuma | Izina ryukoresha |
|---|---|---|---|
| 1 | Ikimenyetso | Otto | @mdo |
| 2 | Yakobo | Thornton | @fat |
| 3 | Larry | Inyoni |
Ongeraho imipaka ikikije ameza yose hamwe nu mpande zegeranye kugirango ubone ibyiza.
- <imbonerahamwe yimeza = " imbonerahamwe yimbonerahamwe" >
- …
- </table>
| # | Izina | Izina ryanyuma | Izina ryukoresha |
|---|---|---|---|
| 1 | Ikimenyetso | Otto | @mdo |
| Ikimenyetso | Otto | @ibikoresho | |
| 2 | Yakobo | Thornton | @fat |
| 3 | Inyoni | ||
Kora ameza yawe arusheho kongeramo urwego .table-condensedrwo guca kumeza ya selile ya kabiri (kuva 8px kugeza 4px).
- <imbonerahamwe yimeza = " imbonerahamwe yimeza" >
- …
- </table>
| # | Izina | Izina ryanyuma | Izina ryukoresha |
|---|---|---|---|
| 1 | Ikimenyetso | Otto | @mdo |
| 2 | Yakobo | Thornton | @fat |
| 3 | Inyoni | ||
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>
| Izina ryuzuye | |||
|---|---|---|---|
| # | Izina | Izina ryanyuma | Izina ryukoresha |
| 1 | Ikimenyetso | Otto | @mdo |
| 2 | Yakobo | Thornton | @fat |
| 3 | Inyoni | ||
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.
Bootstrap izana inkunga yubwoko bune bwimiterere:
Ubwoko butandukanye bwimiterere isaba impinduka kugirango ushireho ikimenyetso, ariko igenzura ubwaryo rigumaho kandi ryitwara kimwe.
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.
Bootstrap itanga ibimenyetso byoroshye hamwe nuburyo bune bwuburyo rusange bwurubuga.
| Izina | Icyiciro | Ibisobanuro |
|---|---|---|
| Uhagaritse (isanzwe) | .form-vertical (ntibisabwa) |
Bishyizwe hamwe, ibumoso-buhujwe n'ibirango hejuru yubugenzuzi |
| Umurongo | .form-inline |
Ibumoso-buhujwe na label na inline-blok igenzura kuburyo bworoshye |
| Shakisha | .form-search |
Inyandiko-yuzuye yinyandiko yinjiza kubushakashatsi busanzwe bwiza |
| Uhagaritse | .form-horizontal |
Kureremba ibumoso, iburyo-buhujwe n'ibirango kumurongo umwe nkigenzura |
Ubwenge kandi bworoshye busanzwe nta marike yongeyeho.
- <form class = "neza" >
- <label> Izina ryikirango </label>
- <iyinjiza ubwoko = "inyandiko" urwego = "span3" umwanya = "Andika ikintu…" >
- <span class = "ubufasha-guhagarika" > Urugero rwo guhagarika urwego urwego rufasha inyandiko hano. </span>
- <label class = "agasanduku k'isanduku" >
- <iyinjiza ubwoko = "agasanduku" > Reba hanze
- </label>
- <buto ubwoko = "gutanga" urwego = "btn" > Tanga </button>
- </form>
Ongeraho .form-searchkumpapuro no .search-querykuri input.
- <form class = "neza form-shakisha" >
- <iyinjiza ubwoko = "inyandiko" urwego = "icyinjijwe-gishakisha-ikibazo" >
- <buto ubwoko = "gutanga" urwego = "btn" > Shakisha </button>
- </form>
Ongeraho .form-inlinekuri finesse guhuza vertical hamwe nintera yuburyo bugenzura.
- <form class = "neza form-inline" >
- <iyinjiza ubwoko = "inyandiko" urwego = "icyinjijwe-gito" umwanya = "Imeri" >
- <iyinjiza ubwoko = "ijambo ryibanga" urwego = "icyinjijwe-gito" umwanya = "Ijambobanga" >
- <label class = "agasanduku k'isanduku" >
- <iyinjiza ubwoko = "agasanduku k'isanduku" > Unyibuke
- </label>
- <buto ubwoko = "gutanga" urwego = "btn" > Injira </button>
- </form>
Yerekanwa iburyo nuburyo busanzwe bwo kugenzura dushyigikiye. Dore urutonde rwamasasu:
Urebye urugero rwimiterere yavuzwe haruguru, dore akamenyetso kajyanye no kwinjiza no kugenzura itsinda rya mbere. ,,, .control-groupNibyiciro .control-labelbyose .controlsbirakenewe muburyo bwo gutunganya.
- <form class = "form-horizontal" >
- <ikibanza>
- <legend> Inyandiko y'imigani </legend>
- <div class = "kugenzura-itsinda" >
- <label class = "kugenzura-label" ya = "kwinjiza01" > Inyandiko yanditswe </label>
- <div class = "igenzura" >
- <iyinjiza ubwoko = "inyandiko" urwego = "icyinjijwe-xlarge" id = "icyinjijwe01" >
- <p urwego = "ubufasha-guhagarika" > Gushyigikira inyandiko ifasha </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap iranga uburyo bwa mushakisha ushyigikiwe na disabledleta. Twakuyeho Webkit isanzwe outlinehanyuma dushyire a box-shadowmumwanya wabyo :focus.
Harimo kandi uburyo bwo kwemeza amakosa, kuburira, no gutsinda. Gukoresha, ongeramo amakosa yibyiciro bikikije .control-group.
- <Umwanya
- icyiciro = "kugenzura-itsinda ryamakosa" >
- …
- </fieldset>
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.
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.
Kugira ngo ukoreshe prepend cyangwa wongereho inyongeramusaruro muburyo bwa inline, menya neza ko ushira i .add-onno inputkumurongo umwe, nta mwanya.
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.
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.
Bootstrap ikoresha <i>tagi kumashusho yose, ariko ntabwo bafite urwego rwimanza-gusa rusangiwe. 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.
Umutwe! Mugihe ukoresheje kuruhande rwimirongo yinyandiko, nko muri buto cyangwa guhuza imiyoboro, menya neza ko usiga umwanya nyuma <i>yikimenyetso kugirango ubone umwanya ukwiye.
Udushushondanga nibyiza, ariko umuntu yakoresha he? Dore ibitekerezo bike:
Byibanze, ahantu hose ushobora gushyira <i>tagi, urashobora gushira agashusho.
Koresha muri buto, buto ya matsinda kubikoresho byabigenewe, kugendagenda, cyangwa ifishi yateguwe.