Լաստակների վերևում 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 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.
Տարր | Օգտագործումը | Ընտրովի |
---|---|---|
<strong> |
Տեքստի մի հատվածը կարևոր շեշտադրելու համար | Ոչ ոք |
<em> |
Տեքստի մի հատված շեշտադրման համար | Ոչ ոք |
<abbr> |
Փաթաթում է հապավումներն ու հապավումները՝ սավառնելիս ընդլայնված տարբերակը ցուցադրելու համար | title Ընդլայնված տեքստի համար ներառել ընտրովի |
<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>
կարելի է օգտագործել պիտակը.
Հապավումները ձևավորված են մեծատառ տեքստով և թեթև կետավոր ներքևի եզրագծով: Նրանք նաև ունեն օգնության կուրսորը սավառնելու վրա, որպեսզի օգտվողներն ունենան լրացուցիչ ցուցում, որ ինչ-որ բան կցուցադրվի սավառնելիս:
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>
Փաթեթավորեք կոդի ներդիր հատվածները <code>
.
Օրինակ, <code>բաժինը</code> պետք է փաթաթված լինի որպես ներդիր:
Օգտագործեք <pre>
կոդի բազմաթիվ տողերի համար: Համոզվեք, որ կոդի ցանկացած անկյունային փակագծերից խուսափելու համար ճիշտ մատուցման համար:
<p>Տեքստի նմուշ այստեղ...</p>
<նախա> <p>Տեքստի նմուշ այստեղ...</p> </pre>
Նշում. Համոզվեք, որ կոդը պահեք <pre>
պիտակների մեջ որքան հնարավոր է մոտ ձախ; այն կարտացոլի բոլոր ներդիրները:
Դուք կարող եք կամայականորեն ավելացնել .pre-scrollable
դասը, որը կսահմանի 350px առավելագույն բարձրություն և կապահովի y առանցքի ոլորման տող:
Վերցրեք նույն <pre>
տարրը և ավելացրեք երկու կամընտիր դասեր՝ ընդլայնված մատուցման համար:
<p>Տեքստի նմուշ այստեղ...</p>
<pre class="prettyprint սպիտակեղեններ»> <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"> … </table>
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | նշագծել | Օտտո | CSS |
2 | Յակոբ | Թորնթոն | Javascript |
3 | Ստյու | Դենտ | HTML |
Մի փոքր շքեղ եղեք ձեր սեղանների հետ՝ ավելացնելով զեբրա գծեր. պարզապես ավելացրեք .table-striped
դասը:
Նշում․ գծավոր աղյուսակներն օգտագործում են :nth-child
CSS ընտրիչ և հասանելի չէ IE7-IE8-ում։
<table class="table table-striped"> … </table>
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | նշագծել | Օտտո | CSS |
2 | Յակոբ | Թորնթոն | Javascript |
3 | Ստյու | Դենտ | HTML |
Էսթետիկ նպատակներով ավելացրեք եզրագծեր ամբողջ սեղանի շուրջ և կլորացված անկյուններ:
<table class="table table-bordered"> … </table>
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | Մարկ Օտտո | CSS | |
2 | Յակոբ | Թորնթոն | Javascript |
3 | Ստյու | Դենտ | |
3 | Բրոսեֆ | Ստալին | HTML |
Դարձրեք ձեր աղյուսակները ավելի կոմպակտ՝ ավելացնելով .table-condensed
դասակարգը՝ սեղանի բջիջների լցոնումը կիսով չափ կտրելու համար (8px-ից մինչև 4px):
<table class="table table-condensed"> … </table>
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | նշագծել | Օտտո | CSS |
2 | Յակոբ | Թորնթոն | Javascript |
3 | Ստյու | Դենտ | HTML |
Ազատ զգալ միավորել սեղանի դասերից որևէ մեկը՝ տարբեր տեսք ստանալու համար՝ օգտագործելով առկա դասերից որևէ մեկը:
<table class="table table-striped table-bordered table-condensed"> ... </table>
# | Անուն | Ազգանուն | Լեզու |
---|---|---|---|
1 | նշագծել | Օտտո | CSS |
2 | Յակոբ | Թորնթոն | Javascript |
3 | Ստյու | Դենտ | HTML |
4 | Բրոսեֆ | Ստալին | HTML |
Bootstrap-ի ձևերի լավագույն մասն այն է, որ ձեր բոլոր մուտքերն ու վերահսկիչները հիանալի տեսք ունեն, անկախ նրանից, թե ինչպես եք դրանք կառուցում ձեր նշագրման մեջ: Ոչ մի ավելորդ HTML չի պահանջվում, բայց մենք տրամադրում ենք օրինաչափությունները նրանց համար, ովքեր դա պահանջում են:
Ավելի բարդ դասավորությունները գալիս են հակիրճ և մասշտաբային դասերով՝ հեշտ ոճավորելու և իրադարձությունների կապակցման համար, այնպես որ դուք ծածկված եք ամեն քայլափոխի:
Bootstrap-ը տրամադրվում է չորս տեսակի ձևերի դասավորության աջակցությամբ.
Ձևերի դասավորության տարբեր տեսակներ պահանջում են որոշակի փոփոխություններ նշագրման համար, բայց վերահսկիչները մնում են և նույնն են պահում:
Bootstrap-ի ձևերը ներառում են ոճեր բոլոր հիմնական ձևերի վերահսկման համար, ինչպիսիք են մուտքագրումը, տեքստային տարածքը և ձեր ակնկալած ընտրությունը: Բայց այն նաև գալիս է մի շարք հատուկ բաղադրիչներով, ինչպիսիք են կցված և նախապես տեղադրված մուտքերը և վանդակների ցուցակների աջակցությունը:
Սխալը, նախազգուշացումը և հաջողությունը ներառված են ձևերի վերահսկման յուրաքանչյուր տեսակի համար: Ներառված են նաև հաշմանդամ կառավարիչների ոճեր:
Bootstrap-ն ապահովում է պարզ նշումներ և ոճեր ընդհանուր վեբ ձևերի չորս ոճերի համար:
Անուն | Դասարան | Նկարագրություն |
---|---|---|
Ուղղահայաց (կանխադրված) | .form-vertical (պարտադիր չէ) |
Վերահսկիչների վրա դրված, ձախից հավասարեցված պիտակներ |
Inline | .form-inline |
Ձախ հավասարեցված պիտակի և ներկառուցված բլոկների կառավարներ կոմպակտ ոճի համար |
Որոնում | .form-search |
Լրացուցիչ կլորացված տեքստի մուտքագրում տիպիկ որոնման գեղագիտության համար |
Հորիզոնական | .form-horizontal |
Լողացրե՛ք ձախ, աջ-հավասարեցված պիտակները նույն տողում, ինչ հսկիչները |
v2.0-ով մենք ունենք ավելի թեթև և խելացի լռելյայն ձևերի ոճերի համար: Ոչ մի լրացուցիչ նշում, պարզապես ձևավորեք հսկիչները:
<form class="well"> <label>Պիտակի անուն</label> <input type="text" class="span3" placeholder="Մուտքագրեք ինչ-որ բան…"> <span class="help-inline">Համատեղ օգնության տեքստ:</span> <label class="checkbox"> <input type="checkbox"> Ստուգեք ինձ </label> <button type="submit" class="btn">Ներկայացրեք</button> </form>
Արտացոլելով WebKit-ի լռելյայն ոճերը, պարզապես ավելացրեք .form-search
լրացուցիչ կլորացված որոնման դաշտերը:
<form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Որոնում</button> </form>
Սկսելու համար մուտքերը բլոկի մակարդակ են: և .form-inline
- .form-horizontal
ի համար մենք օգտագործում ենք inline-block:
<form class="well form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="գաղտնաբառ"> <button type="submit" class="btn">Գնալ</button> </form>
Հաշվի առնելով վերը նշված օրինակի ձևի դասավորությունը, ահա առաջին մուտքագրման և վերահսկման խմբի հետ կապված նշումը: , .control-group
, .control-label
և .controls
դասերը բոլորն էլ անհրաժեշտ են ոճավորման համար:
<form class="form-horizontal"> <fieldset> <legend>Լեգենդի տեքստ</legend> <div class="control-group"> <label class="control-label" for="input01">Տեքստի մուտքագրում</label> <div class="controls"> <input type="text" class="input-xlarge" id="input01"> <p class="help-block">Օգնության տեքստ</p> </div> </div> </fieldset> </form>
Ձախ կողմում ցուցադրված են բոլոր լռելյայն ձևի վերահսկիչները, որոնք մենք աջակցում ենք: Ահա պարբերակներով ցուցակը.
Մինչև v1.4, Bootstrap-ի լռելյայն ձևի ոճերը օգտագործում էին հորիզոնական դասավորությունը: Bootstrap 2-ի միջոցով մենք հանեցինք այդ սահմանափակումը՝ ցանկացած ձևի համար ավելի խելացի, ավելի լայնածավալ լռելյայններ ունենալու համար:
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">
՝ մուտքագրման տարրից հետո:
:after
: Փաստաթղթերում մենք ցույց ենք տալիս բաց կարմիր ֆոնի գույնը սավառնելիս՝ ընդգծելու պատկերակի չափը:
Յուրաքանչյուր պատկերակ հավելյալ խնդրանք դարձնելու փոխարեն, մենք դրանք կազմեցինք sprite-ի մեջ՝ պատկերների մի փունջ մեկ ֆայլում, որն օգտագործում է CSS՝ պատկերները տեղադրելու համար background-position
: Սա նույն մեթոդն է, որը մենք օգտագործում ենք Twitter.com-ում, և այն լավ է աշխատել մեզ մոտ:
Բոլոր սրբապատկերների դասերը նախածանցով են .icon-
՝ համապատասխան անունների տարածության և շրջանակի համար, ինչպես մեր մյուս բաղադրիչները: Սա կօգնի խուսափել այլ գործիքների հետ կոնֆլիկտներից:
Glyphicons- ը մեզ թույլ է տվել օգտագործել Halflings-ի հավաքածուն մեր բաց կոդով գործիքակազմում այնքան ժամանակ, քանի դեռ մենք տրամադրում ենք հղում և վարկավորում այստեղ՝ փաստաթղթերում: Խնդրում եմ, մտածեք նույնն անել ձեր նախագծերում:
v2.0.1-ով մենք ընտրել ենք <i>
պիտակ մեր բոլոր պատկերակների համար, բայց դրանք չունեն մեծատառերի դաս՝ միայն ընդհանուր նախածանց: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում.
<i class="icon-search"></i>
Կան նաև շրջված (սպիտակ) պատկերակների ոճեր, որոնք պատրաստված են մեկ լրացուցիչ դասի հետ.
<i class="icon-search icon-white"></i>
Կան 120 դասեր, որոնցից կարող եք ընտրել ձեր պատկերակները: Պարզապես ավելացրեք համապատասխան <i>
դասերի պիտակ, և դուք պատրաստ եք: Ամբողջական ցանկը կարող եք գտնել sprites.less-ում կամ հենց այստեղ՝ այս փաստաթղթում:
Սրբապատկերները հիանալի են, բայց որտեղ կարելի է օգտագործել դրանք: Ահա մի քանի գաղափարներ.
Ըստ էության, ցանկացած վայրում, որտեղ դուք կարող եք տեղադրել <i>
պիտակ, կարող եք տեղադրել պատկերակ:
Օգտագործեք դրանք կոճակներում, կոճակների խմբերում՝ գործիքագոտու, նավիգացիայի կամ նախապես տեղադրված ձևի մուտքագրման համար: