Լաստակների վերևում HTML-ի հիմնական տարրերը ոճավորվում և ընդլայնվում են ընդարձակվող դասերով՝ թարմ, հետևողական տեսք և զգացողություն ապահովելու համար:
Ամբողջ տպագրական ցանցը հիմնված է երկու Less փոփոխականների վրա մեր variables.less ֆայլում՝ @baseFontSizeև @baseLineHeight. Առաջինը բազային տառատեսակի չափն է, որն օգտագործվում է ամբողջ ընթացքում, իսկ երկրորդը՝ բազային տողի բարձրությունը:
Մենք օգտագործում ենք այդ փոփոխականները և որոշ մաթեմատիկա՝ ստեղծելու մեր բոլոր տեսակի լուսանցքները, լցոնումները և գծերի բարձրությունները և այլն:
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.
Պարբերությունն աչքի ընկնելով՝ ավելացնելով .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, դա ոչ կոմոդո Կասետային.
| Տարր | Օգտագործումը | Ընտրովի |
|---|---|---|
<strong> |
Տեքստի մի հատվածը կարևոր շեշտադրելու համար | Ոչ ոք |
<em> |
Տեքստի մի հատված շեշտադրման համար | Ոչ ոք |
<abbr> |
Փաթաթում է հապավումներն ու հապավումները՝ սավառնելիս ընդլայնված տարբերակը ցուցադրելու համար |
.initialismդասը մեծատառ հապավումների համար: |
<address> |
Իր մոտակա նախնիների կամ աշխատանքի ողջ մարմնի կոնտակտային տեղեկատվության համար | Պահպանեք ձևաչափումը` վերջացնելով բոլոր տողերը<br> |
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, a pharetra augue:
Նշում. Ազատորեն օգտագործեք <b>և <i>HTML5-ում, սակայն դրանց օգտագործումը մի փոքր փոխվել է: <b>նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ <i>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:
Ահա երկու օրինակ, թե ինչպես <address>կարելի է օգտագործել պիտակը.
Հատկանիշ ունեցող հապավումներն titleունեն թեթև կետավոր ներքևի եզրագիծ և օգնության կուրսորը սավառնելու վրա: Սա օգտատերերին լրացուցիչ նշում է տալիս, որ ինչ-որ բան կցուցադրվի սավառնելիս:
Ավելացրե՛ք initialismդասը հապավումին, որպեսզի ավելացնեք տպագրական ներդաշնակությունը՝ տալով մի փոքր ավելի փոքր տեքստի չափ:
HTML- ն ամենալավ բանն է կտրատած հացից հետո:
Հատկանիշ բառի հապավումը attr է :
| Տարր | Օգտագործումը | Ընտրովի |
|---|---|---|
<blockquote> |
Բլոկի մակարդակի տարր՝ մեկ այլ աղբյուրից բովանդակություն մեջբերելու համար | Ավելացրեք .pull-leftև .pull-rightդասեր լողացող տարբերակների համար |
<small> |
Ընտրովի տարր՝ օգտատերերին առնչվող մեջբերում ավելացնելու համար, որը սովորաբար ստեղծագործության վերնագրով հեղինակ է | Տեղադրեք <cite>աղբյուրի վերնագրի կամ անվան շուրջը |
<blockquote>Բլոկ մեջբերում ներառելու համար ցանկացած HTML- ի շուրջ փաթաթեք որպես մեջբերում: Ուղղակի չակերտների համար խորհուրդ ենք տալիս a <p>.
Ներառեք կամընտիր <small>տարր՝ ձեր աղբյուրը նշելու համար, և դուք կստանաք em գծիկ —դրա առաջ՝ ոճավորման նպատակով:
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ: </p>
- <small> Հայտնի մեկը </small>
- </blockquote>
Կանխադրված բլոկի մեջբերումները ձևավորվում են հետևյալ կերպ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ:
Ինչ-որ մեկը հայտնի Body of work- ում
Ձեր բլոկի մեջբերումը դեպի աջ տեղափոխելու համար ավելացրեք class="pull-right".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ:
Ինչ-որ մեկը հայտնի Body of work- ում
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Գլուխը վեր Հորիզոնական նկարագրության ցուցակները կկտրեն այն տերմինները, որոնք չափազանց երկար են ձախ սյունակի ամրագրման մեջ տեղավորվելու համար text-overflow: Ավելի նեղ տեսադաշտերում դրանք կվերածվեն լռելյայն կուտակված դասավորության:
Փաթեթավորեք կոդի ներդիր հատվածները <code>.
- Օրինակ , <code> բաժինը </ code > պետք է փաթաթված լինի որպես ներդիր :
Օգտագործեք <pre>կոդի բազմաթիվ տողերի համար: Համոզվեք, որ կոդի ցանկացած անկյունային փակագծերից խուսափելու համար ճիշտ մատուցման համար:
<p>Տեքստի նմուշ այստեղ...</p>
- <նախա>
- <p>Տեքստի նմուշ այստեղ...</p>
- </pre>
Նշում. Համոզվեք, որ կոդը պահեք <pre>պիտակների մեջ որքան հնարավոր է մոտ ձախ; այն կարտացոլի բոլոր ներդիրները:
Դուք կարող եք կամայականորեն ավելացնել .pre-scrollableդասը, որը կսահմանի 350px առավելագույն բարձրություն և կապահովի y առանցքի ոլորման տող:
Վերցրեք նույն <pre>տարրը և ավելացրեք երկու կամընտիր դասեր՝ ընդլայնված մատուցման համար:
- <p> Տեքստի նմուշ այստեղ... </p>
- <pre class = "գեղեցիկ
- սպիտակեղեն» >
- <p>Տեքստի նմուշ այստեղ...</p>
- </pre>
Ներբեռնեք google-code-prettify և դիտեք readme-ը, թե ինչպես օգտագործել:
| Նշել | Նկարագրություն |
|---|---|
<table> |
Փաթաթման տարր՝ տվյալների աղյուսակային ձևաչափով ցուցադրելու համար |
<thead> |
Սեղանի վերնագրի տողերի ( <tr>) տարր՝ աղյուսակի սյունակները պիտակավորելու համար |
<tbody> |
Սեղանի տողերի ( <tr>) տարր աղյուսակի մարմնում |
<tr> |
Կոնտեյներ տարր աղյուսակի բջիջների ( <td>կամ <th>) հավաքածուի համար, որը հայտնվում է մեկ տողում |
<td> |
Աղյուսակի կանխադրված բջիջ |
<th> |
Սյունակի (կամ տողի, կախված շրջանակից և տեղադրությունից) պիտակների համար աղյուսակի հատուկ բջիջ Պետք է օգտագործվի <thead> |
<caption> |
Աղյուսակի նկարագրությունը կամ ամփոփումը, հատկապես օգտակար էկրանի ընթերցողների համար |
- <աղյուսակ>
- <գլուխ>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Անուն | Դասարան | Նկարագրություն |
|---|---|---|
| Կանխադրված | Ոչ ոք | Ոչ մի ոճ, միայն սյունակներ և տողեր |
| Հիմնական | .table |
Միայն հորիզոնական գծեր տողերի միջև |
| Սահմանամերձ | .table-bordered |
Կլորացնում է անկյունները և ավելացնում արտաքին եզրագիծը |
| Զեբրա-շերտ | .table-striped |
Ավելացնում է բաց մոխրագույն ֆոնի գույնը կենտ տողերին (1, 3, 5 և այլն) |
| Խտացրած | .table-condensed |
Կտրում է ուղղահայաց լցոնումը կիսով չափ՝ 8px-ից մինչև 4px, բոլորի tdև thտարրերի մեջ |
Աղյուսակները ինքնաբերաբար ձևավորվում են միայն մի քանի եզրագծերով՝ ապահովելու ընթերցանությունը և պահպանելու կառուցվածքը: 2.0- .tableով դասը պարտադիր է։
- <table class = «աղյուսակ» >
- …
- </table>
| # | Անուն | Ազգանուն | Օգտագործողի անունը |
|---|---|---|---|
| 1 | նշագծել | Օտտո | @mdo |
| 2 | Յակոբ | Թորնթոն | @ճարպ |
| 3 | Լարի | թռչունը |
Մի փոքր շքեղ եղեք ձեր սեղանների հետ՝ ավելացնելով զեբրա գծեր. պարզապես ավելացրեք .table-stripedդասը:
Նշում․ գծավոր աղյուսակներն օգտագործում են :nth-childCSS ընտրիչ և հասանելի չէ IE7-IE8-ում։
- <table class = "sable table-striped" >
- …
- </table>
| # | Անուն | Ազգանուն | Օգտագործողի անունը |
|---|---|---|---|
| 1 | նշագծել | Օտտո | @mdo |
| 2 | Յակոբ | Թորնթոն | @ճարպ |
| 3 | Լարի | թռչունը |
Էսթետիկ նպատակներով ավելացրեք եզրագծեր ամբողջ սեղանի շուրջ և կլորացված անկյուններ:
- <table class = "sable table-bordered" >
- …
- </table>
| # | Անուն | Ազգանուն | Օգտագործողի անունը |
|---|---|---|---|
| 1 | նշագծել | Օտտո | @mdo |
| նշագծել | Օտտո | @getbootstrap | |
| 2 | Յակոբ | Թորնթոն | @ճարպ |
| 3 | Լարի թռչուն | ||
Դարձրեք ձեր աղյուսակները ավելի կոմպակտ՝ ավելացնելով .table-condensedդասակարգը՝ սեղանի բջիջների լցոնումը կիսով չափ կտրելու համար (8px-ից մինչև 4px):
- <table class = "sable table-condensed" >
- …
- </table>
| # | Անուն | Ազգանուն | Օգտագործողի անունը |
|---|---|---|---|
| 1 | նշագծել | Օտտո | @mdo |
| 2 | Յակոբ | Թորնթոն | @ճարպ |
| 3 | Լարի թռչուն | ||
Ազատ զգալ միավորել սեղանի դասերից որևէ մեկը՝ տարբեր տեսք ստանալու համար՝ օգտագործելով առկա դասերից որևէ մեկը:
- <table class = «սեղանի գծավոր սեղանի եզրագծով սեղան-խտացված» >
- ...
- </table>
| Ամբողջական անուն | |||
|---|---|---|---|
| # | Անուն | Ազգանուն | Օգտագործողի անունը |
| 1 | նշագծել | Օտտո | @mdo |
| 2 | Յակոբ | Թորնթոն | @ճարպ |
| 3 | Լարի թռչուն | ||
Bootstrap-ի ձևերի լավագույն մասն այն է, որ ձեր բոլոր մուտքերն ու վերահսկիչները հիանալի տեսք ունեն, անկախ նրանից, թե ինչպես եք դրանք կառուցում ձեր նշագրման մեջ: Ոչ մի ավելորդ HTML չի պահանջվում, բայց մենք տրամադրում ենք օրինաչափությունները նրանց համար, ովքեր դա պահանջում են:
Ավելի բարդ դասավորությունները գալիս են հակիրճ և մասշտաբային դասերով՝ հեշտ ոճավորելու և իրադարձությունների կապակցման համար, այնպես որ դուք ծածկված եք ամեն քայլափոխի:
Bootstrap-ը տրամադրվում է չորս տեսակի ձևերի դասավորության աջակցությամբ.
Ձևերի դասավորության տարբեր տեսակներ պահանջում են որոշակի փոփոխություններ նշագրման համար, բայց վերահսկիչները մնում են և նույնն են պահում:
Bootstrap-ի ձևերը ներառում են ոճեր բոլոր հիմնական ձևերի վերահսկման համար, ինչպիսիք են մուտքագրումը, տեքստային տարածքը և ձեր ակնկալած ընտրությունը: Բայց այն նաև գալիս է մի շարք հատուկ բաղադրիչներով, ինչպիսիք են կցված և նախապես տեղադրված մուտքերը և վանդակների ցուցակների աջակցությունը:
Սխալը, նախազգուշացումը և հաջողությունը ներառված են ձևերի վերահսկման յուրաքանչյուր տեսակի համար: Ներառված են նաև հաշմանդամ կառավարիչների ոճեր:
Bootstrap-ն ապահովում է պարզ նշումներ և ոճեր ընդհանուր վեբ ձևերի չորս ոճերի համար:
| Անուն | Դասարան | Նկարագրություն |
|---|---|---|
| Ուղղահայաց (կանխադրված) | .form-vertical (պարտադիր չէ) |
Վերահսկիչների վրա դրված, ձախից հավասարեցված պիտակներ |
| Inline | .form-inline |
Ձախ հավասարեցված պիտակի և ներկառուցված բլոկների կառավարներ կոմպակտ ոճի համար |
| Որոնում | .form-search |
Լրացուցիչ կլորացված տեքստի մուտքագրում տիպիկ որոնման գեղագիտության համար |
| Հորիզոնական | .form-horizontal |
Լողացրե՛ք ձախ, աջ-հավասարեցված պիտակները նույն տողում, ինչ հսկիչները |
Խելացի և թեթև լռելյայն առանց լրացուցիչ նշումների:
- <form class = «լավ» >
- <label> Պիտակի անունը </label>
- <input type = "text" class = "span3" placeholder = "Մուտքագրիր ինչ-որ բան…" >
- <span class = "help-block" > Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ: </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Ստուգեք ինձ
- </label>
- <button type = "submit" class = "btn" > Ներկայացնել </button>
- </form>
Ավելացնել .form-searchձևին .search-queryև input.
- <form class = «լավ ձևի որոնում» >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Որոնել </button>
- </form>
Հստակեցրեք .form-inlineձևերի վերահսկման ուղղահայաց հավասարեցումը և տարածությունը:
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > Հիշել ինձ
- </label>
- <button type = "submit" class = "btn" > Մուտք գործեք </button>
- </form>
Աջ կողմում ցուցադրված են բոլոր լռելյայն ձևի վերահսկիչները, որոնք մենք աջակցում ենք: Ահա պարբերակներով ցուցակը.
Հաշվի առնելով վերը նշված օրինակի ձևի դասավորությունը, ահա առաջին մուտքագրման և վերահսկման խմբի հետ կապված նշումը: , .control-group, .control-labelև .controlsդասերը բոլորն էլ անհրաժեշտ են ոճավորման համար:
- <form class = «ձև-հորիզոնական» >
- <fieldset>
- <legend> Լեգենդի տեքստ </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Տեքստի մուտքագրում </label>
- <div class = «վերահսկում» >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Աջակցող օգնության տեքստ </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap-ն առանձնացնում է բրաուզերի կողմից աջակցվող կենտրոնացված և disabledվիճակների ոճեր: Մենք հեռացնում ենք լռելյայն Webkit- ը և դրա փոխարեն outlineկիրառում ենք a- ն :box-shadow:focus
Այն նաև ներառում է սխալների, նախազգուշացումների և հաջողության վավերացման ոճեր: Օգտագործելու համար ավելացրեք սխալի դասը շրջակա միջավայրին .control-group:
- <դաշտերի հավաքածու
- class = "control-group error" >
- …
- </fieldset>
Ներածման խմբերը` կցված կամ նախապես ամրացված տեքստով, հեշտ միջոց են տրամադրում ձեր մուտքագրման համար ավելի շատ համատեքստ տալու համար: Հիանալի օրինակները ներառում են @ նշանը Twitter-ի օգտանունների համար կամ $ ֆինանսների համար:
Մինչև v1.4, Bootstrap-ը պահանջում էր լրացուցիչ նշագրում վանդակների և ռադիոկայանների շուրջ՝ դրանք կուտակելու համար: Հիմա պարզ խնդիր է կրկնել այն <label class="checkbox">, որը փաթաթում է <input type="checkbox">.
Ներկառուցված վանդակները և ռադիոները նույնպես ապահովված են: Պարզապես ավելացրեք .inlineորևէ մեկին .checkboxկամ .radio, և դուք պատրաստ եք:
Ներածված ձևով մուտքագրումներն օգտագործելու կամ ավելացնելու համար համոզվեք, որ տեղադրեք .add-onև input-ը նույն տողում, առանց բացատների:
Ձեր ձևի մուտքագրման համար օգնության տեքստ ավելացնելու համար ներառեք ներդիր օգնության տեքստ <span class="help-inline">կամ օգնության տեքստի բլոկ <p class="help-block">՝ մուտքագրման տարրից հետո:
Յուրաքանչյուր պատկերակ հավելյալ խնդրանք դարձնելու փոխարեն, մենք դրանք կազմեցինք sprite-ի մեջ՝ պատկերների մի փունջ մեկ ֆայլում, որն օգտագործում է CSS՝ պատկերները տեղադրելու համար background-position: Սա նույն մեթոդն է, որը մենք օգտագործում ենք Twitter.com-ում, և այն լավ է աշխատել մեզ մոտ:
Բոլոր սրբապատկերների դասերը նախածանցով են .icon-՝ համապատասխան անունների տարածության և շրջանակի համար, ինչպես մեր մյուս բաղադրիչները: Սա կօգնի խուսափել այլ գործիքների հետ կոնֆլիկտներից:
Glyphicons- ը մեզ թույլ է տվել օգտագործել Halflings-ի հավաքածուն մեր բաց կոդով գործիքակազմում այնքան ժամանակ, քանի դեռ մենք տրամադրում ենք հղում և վարկավորում այստեղ՝ փաստաթղթերում: Խնդրում եմ, մտածեք նույնն անել ձեր նախագծերում:
Bootstrap-ն օգտագործում է <i>պիտակ բոլոր սրբապատկերների համար, բայց նրանք չունեն պատյանների դասակարգ՝ միայն ընդհանուր նախածանց: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում.
- <i class = "icon-search" ></i>
Կան նաև շրջված (սպիտակ) պատկերակների ոճեր, որոնք պատրաստված են մեկ լրացուցիչ դասի հետ.
- <i class = "icon-search icon-white" ></i>
Կան 140 դասեր, որոնցից կարող եք ընտրել ձեր պատկերակների համար: Պարզապես ավելացրեք համապատասխան <i>դասերի պիտակ, և դուք պատրաստ եք: Ամբողջական ցանկը կարող եք գտնել sprites.less-ում կամ հենց այստեղ՝ այս փաստաթղթում:
Գլուխը վեր Տեքստի տողերի կողքին օգտագործելիս, ինչպես կոճակների կամ նավարկության հղումներում, համոզվեք, որ <i>պիտակից հետո բացատ թողեք՝ համապատասխան տարածության համար:
Սրբապատկերները հիանալի են, բայց որտեղ կարելի է օգտագործել դրանք: Ահա մի քանի գաղափարներ.
Ըստ էության, ցանկացած վայրում, որտեղ դուք կարող եք տեղադրել <i>պիտակ, կարող եք տեղադրել պատկերակ:
Օգտագործեք դրանք կոճակներում, կոճակների խմբերում՝ գործիքագոտու, նավիգացիայի կամ նախապես տեղադրված ձևի մուտքագրման համար: