Բազային CSS

Լաստակների վերևում 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, դա ոչ կոմոդո Կասետային.

հ1. Վերնագիր 1

h2. Վերնագիր 2

h3. Վերնագիր 3

h4. Վերնագիր 4

h5. Վերնագիր 5
h6. Վերնագիր 6

Շեշտը, հասցեն և հապավումը

Տարր Օգտագործումը Ընտրովի
<strong> Տեքստի մի հատվածը կարևոր շեշտադրելու համար Ոչ ոք
<em> Տեքստի մի հատված շեշտադրման համար Ոչ ոք
<abbr> Փաթաթում է հապավումներն ու հապավումները՝ սավառնելիս ընդլայնված տարբերակը ցուցադրելու համար

titleԸնդլայնված տեքստի համար ներառեք կամընտիր հատկանիշ

Օգտագործեք .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>կարելի է օգտագործել պիտակը.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ամբողջական անուն
[email protected]

Օրինակների հապավումներ

Հատկանիշ ունեցող հապավումներն titleունեն թեթև կետավոր ներքևի եզրագիծ և օգնության կուրսորը սավառնելու վրա: Սա օգտատերերին լրացուցիչ նշում է տալիս, որ ինչ-որ բան կցուցադրվի սավառնելիս:

Ավելացրե՛ք initialismդասը հապավումին, որպեսզի ավելացնեք տպագրական ներդաշնակությունը՝ տալով մի փոքր ավելի փոքր տեքստի չափ:

HTML- ն ամենալավ բանն է կտրատած հացից հետո:

Հատկանիշ բառի հապավումը attr է :

Արգելափակման մեջբերումներ

Տարր Օգտագործումը Ընտրովի
<blockquote> Բլոկի մակարդակի տարր՝ մեկ այլ աղբյուրից բովանդակություն մեջբերելու համար

Ավելացրեք citeհատկանիշ աղբյուրի URL-ի համար

Օգտագործում .pull-leftև .pull-rightդասեր լողացող տարբերակների համար
<small> Ընտրովի տարր՝ օգտատերերին առնչվող մեջբերում ավելացնելու համար, որը սովորաբար ստեղծագործության վերնագրով հեղինակ է Տեղադրեք <cite>աղբյուրի վերնագրի կամ անվան շուրջը

<blockquote>Բլոկ մեջբերում ներառելու համար ցանկացած HTML- ի շուրջ փաթաթեք որպես մեջբերում: Ուղղակի չակերտների համար խորհուրդ ենք տալիս a <p>.

Ներառեք կամընտիր <small>տարր՝ ձեր աղբյուրը նշելու համար, և դուք կստանաք em գծիկ &mdash;դրա առաջ՝ ոճավորման նպատակով:

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ: </p>
  3. <small> Հայտնի մեկը </small>
  4. </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>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ամբողջական մոլեստի լորեմ և մասսա
  • Հեշտացում պրետիում նիսլ ալիքում
  • Նալլա volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Էնեան նստել ամետ էրատ նունց
  • Eget porttitor lorem

Ոչ ոճավորված

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ամբողջական մոլեստի լորեմ և մասսա
  • Հեշտացում պրետիում նիսլ ալիքում
  • Նալլա volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Էնեան նստել ամետ էրատ նունց
  • Eget porttitor lorem

Պատվիրել է

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Ամբողջական մոլեստի լորեմ և մասսա
  4. Հեշտացում պրետիում նիսլ ալիքում
  5. Նալլա volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Էնեան նստել ամետ էրատ նունց
  8. Eget porttitor lorem

Նկարագրություն

<dl>

Նկարագրության ցուցակներ
Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Հորիզոնական նկարագրություն

<dl class="dl-horizontal">

Նկարագրության ցուցակներ
Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus:

Գլուխը վեր Հորիզոնական նկարագրության ցուցակները կկտրեն այն տերմինները, որոնք չափազանց երկար են ձախ սյունակի ամրագրման մեջ տեղավորվելու համար text-overflow: Ավելի նեղ տեսադաշտերում դրանք կվերածվեն լռելյայն կուտակված դասավորության:

Inline

Փաթեթավորեք կոդի ներդիր հատվածները <code>.

  1. Օրինակ , <code> բաժինը </ code > պետք է փաթաթված լինի որպես ներդիր :

Հիմնական բլոկ

Օգտագործեք <pre>կոդի բազմաթիվ տողերի համար: Համոզվեք, որ կոդի ցանկացած անկյունային փակագծերից խուսափելու համար ճիշտ մատուցման համար:

<p>Տեքստի նմուշ այստեղ...</p>
  1. <նախա>
  2. <p>Տեքստի նմուշ այստեղ...</p>
  3. </pre>

Նշում. Համոզվեք, որ կոդը պահեք <pre>պիտակների մեջ որքան հնարավոր է մոտ ձախ; այն կարտացոլի բոլոր ներդիրները:

Դուք կարող եք կամայականորեն ավելացնել .pre-scrollableդասը, որը կսահմանի 350px առավելագույն բարձրություն և կապահովի y առանցքի ոլորման տող:

Google Prettify

Վերցրեք նույն <pre>տարրը և ավելացրեք երկու կամընտիր դասեր՝ ընդլայնված մատուցման համար:

  1. <p> Տեքստի նմուշ այստեղ... </p>
  1. <pre class = "գեղեցիկ
  2. սպիտակեղեն» >
  3. <p>Տեքստի նմուշ այստեղ...</p>
  4. </pre>

Ներբեռնեք google-code-prettify և դիտեք readme-ը, թե ինչպես օգտագործել:

Սեղանի նշում

Նշել Նկարագրություն
<table> Փաթաթման տարր՝ տվյալների աղյուսակային ձևաչափով ցուցադրելու համար
<thead> Սեղանի վերնագրի տողերի ( <tr>) տարր՝ աղյուսակի սյունակները պիտակավորելու համար
<tbody> Սեղանի տողերի ( <tr>) տարր աղյուսակի մարմնում
<tr> Կոնտեյներ տարր աղյուսակի բջիջների ( <td>կամ <th>) հավաքածուի համար, որը հայտնվում է մեկ տողում
<td> Աղյուսակի կանխադրված բջիջ
<th> Սյունակի (կամ տողի, կախված շրջանակից և տեղադրությունից) պիտակների համար աղյուսակի հատուկ բջիջ
Պետք է օգտագործվի<thead>
<caption> Աղյուսակի նկարագրությունը կամ ամփոփումը, հատկապես օգտակար էկրանի ընթերցողների համար
  1. <աղյուսակ>
  2. <գլուխ>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Սեղանի ընտրանքներ

Անուն Դասարան Նկարագրություն
Կանխադրված Ոչ ոք Ոչ մի ոճ, միայն սյունակներ և տողեր
Հիմնական .table Միայն հորիզոնական գծեր տողերի միջև
Սահմանամերձ .table-bordered Կլորացնում է անկյունները և ավելացնում արտաքին եզրագիծը
Զեբրա-շերտ .table-striped Ավելացնում է բաց մոխրագույն ֆոնի գույնը կենտ տողերին (1, 3, 5 և այլն)
Խտացրած .table-condensed Կտրում է ուղղահայաց լցոնումը կիսով չափ՝ 8px-ից մինչև 4px, բոլորի tdև thտարրերի մեջ

Օրինակ աղյուսակներ

1. Նախնական սեղանի ոճերը

Աղյուսակները ինքնաբերաբար ձևավորվում են միայն մի քանի եզրագծերով՝ ապահովելու ընթերցանությունը և պահպանելու կառուցվածքը: 2.0- .tableով դասը պարտադիր է։

  1. <table class = «աղյուսակ» >
  2. </table>
# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչունը @twitter

2. Գծավոր սեղան

Մի փոքր շքեղ եղեք ձեր սեղանների հետ՝ ավելացնելով զեբրա գծեր. պարզապես ավելացրեք .table-stripedդասը:

Նշում․ գծավոր աղյուսակներն օգտագործում են :nth-childCSS ընտրիչ և հասանելի չէ IE7-IE8-ում։

  1. <table class = "sable table-striped" >
  2. </table>
# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչունը @twitter

3. Եզրափակված սեղան

Էսթետիկ նպատակներով ավելացրեք եզրագծեր ամբողջ սեղանի շուրջ և կլորացված անկյուններ:

  1. <table class = "sable table-bordered" >
  2. </table>
# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
նշագծել Օտտո @getbootstrap
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter

4. Խտացրած սեղան

Դարձրեք ձեր աղյուսակները ավելի կոմպակտ՝ ավելացնելով .table-condensedդասակարգը՝ սեղանի բջիջների լցոնումը կիսով չափ կտրելու համար (8px-ից մինչև 4px):

  1. <table class = "sable table-condensed" >
  2. </table>
# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter

5. Միավորե՛ք բոլորը:

Ազատ զգալ միավորել սեղանի դասերից որևէ մեկը՝ տարբեր տեսք ստանալու համար՝ օգտագործելով առկա դասերից որևէ մեկը:

  1. <table class = «սեղանի գծավոր սեղանի եզրագծով սեղան-խտացված» >
  2. ...
  3. </table>
Ամբողջական անուն
# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter

Ճկուն HTML և CSS

Bootstrap-ի ձևերի լավագույն մասն այն է, որ ձեր բոլոր մուտքերն ու վերահսկիչները հիանալի տեսք ունեն, անկախ նրանից, թե ինչպես եք դրանք կառուցում ձեր նշագրման մեջ: Ոչ մի ավելորդ HTML չի պահանջվում, բայց մենք տրամադրում ենք օրինաչափությունները նրանց համար, ովքեր դա պահանջում են:

Ավելի բարդ դասավորությունները գալիս են հակիրճ և մասշտաբային դասերով՝ հեշտ ոճավորելու և իրադարձությունների կապակցման համար, այնպես որ դուք ծածկված եք ամեն քայլափոխի:

Ներառված է չորս դասավորություն

Bootstrap-ը տրամադրվում է չորս տեսակի ձևերի դասավորության աջակցությամբ.

  • Ուղղահայաց (կանխադրված)
  • Որոնում
  • Inline
  • Հորիզոնական

Ձևերի դասավորության տարբեր տեսակներ պահանջում են որոշակի փոփոխություններ նշագրման համար, բայց վերահսկիչները մնում են և նույնն են պահում:

Վերահսկեք պետությունները և ավելին

Bootstrap-ի ձևերը ներառում են ոճեր բոլոր հիմնական ձևերի վերահսկման համար, ինչպիսիք են մուտքագրումը, տեքստային տարածքը և ձեր ակնկալած ընտրությունը: Բայց այն նաև գալիս է մի շարք հատուկ բաղադրիչներով, ինչպիսիք են կցված և նախապես տեղադրված մուտքերը և վանդակների ցուցակների աջակցությունը:

Սխալը, նախազգուշացումը և հաջողությունը ներառված են ձևերի վերահսկման յուրաքանչյուր տեսակի համար: Ներառված են նաև հաշմանդամ կառավարիչների ոճեր:

Չորս տեսակի ձևեր

Bootstrap-ն ապահովում է պարզ նշումներ և ոճեր ընդհանուր վեբ ձևերի չորս ոճերի համար:

Անուն Դասարան Նկարագրություն
Ուղղահայաց (կանխադրված) .form-vertical (պարտադիր չէ) Վերահսկիչների վրա դրված, ձախից հավասարեցված պիտակներ
Inline .form-inline Ձախ հավասարեցված պիտակի և ներկառուցված բլոկների կառավարներ կոմպակտ ոճի համար
Որոնում .form-search Լրացուցիչ կլորացված տեքստի մուտքագրում տիպիկ որոնման գեղագիտության համար
Հորիզոնական .form-horizontal Լողացրե՛ք ձախ, աջ-հավասարեցված պիտակները նույն տողում, ինչ հսկիչները

Ձևաթղթերի օրինակներ ՝ օգտագործելով միայն ձևի վերահսկիչները, առանց լրացուցիչ նշումների

Հիմնական ձև

Խելացի և թեթև լռելյայն առանց լրացուցիչ նշումների:

Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ:

  1. <form class = «լավ» >
  2. <label> Պիտակի անունը </label>
  3. <input type = "text" class = "span3" placeholder = "Մուտքագրիր ինչ-որ բան…" >
  4. <span class = "help-block" > Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ: </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Ստուգեք ինձ
  7. </label>
  8. <button type = "submit" class = "btn" > Ներկայացնել </button>
  9. </form>

Որոնման ձև

Ավելացնել .form-searchձևին .search-queryև input.

  1. <form class = «լավ ձևի որոնում» >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Որոնել </button>
  4. </form>

Ներդիր ձև

Հստակեցրեք .form-inlineձևերի վերահսկման ուղղահայաց հավասարեցումը և տարածությունը:

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Հիշել ինձ
  6. </label>
  7. <button type = "submit" class = "btn" > Մուտք գործեք </button>
  8. </form>

Հորիզոնական ձևեր

Աջ կողմում ցուցադրված են բոլոր լռելյայն ձևի վերահսկիչները, որոնք մենք աջակցում ենք: Ահա պարբերակներով ցուցակը.

  • տեքստային մուտքագրումներ (տեքստ, գաղտնաբառ, էլ.փոստ և այլն)
  • վանդակը
  • ռադիո
  • ընտրել
  • բազմակի ընտրություն
  • ֆայլի մուտքագրում
  • textarea

Ազատ ձևի տեքստից բացի, HTML5 տեքստի վրա հիմնված ցանկացած մուտքագրում նման է թվում:

Նշման օրինակ

Հաշվի առնելով վերը նշված օրինակի ձևի դասավորությունը, ահա առաջին մուտքագրման և վերահսկման խմբի հետ կապված նշումը: , .control-group, .control-labelև .controlsդասերը բոլորն էլ անհրաժեշտ են ոճավորման համար:

  1. <form class = «ձև-հորիզոնական» >
  2. <fieldset>
  3. <legend> Լեգենդի տեքստ </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Տեքստի մուտքագրում </label>
  6. <div class = «վերահսկում» >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Աջակցող օգնության տեքստ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Ձևերի վերահսկման վիճակներ

Bootstrap-ն առանձնացնում է բրաուզերի կողմից աջակցվող կենտրոնացված և disabledվիճակների ոճեր: Մենք հեռացնում ենք լռելյայն Webkit- ը և դրա փոխարեն outlineկիրառում ենք a- ն :box-shadow:focus


Ձևի վավերացում

Այն նաև ներառում է սխալների, նախազգուշացումների և հաջողության վավերացման ոճեր: Օգտագործելու համար ավելացրեք սխալի դասը շրջակա միջավայրին .control-group:

  1. <դաշտերի հավաքածու
  2. class = "control-group error" >
  3. </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">՝ մուտքագրման տարրից հետո:

Օգտագործեք նույն .span*դասերը ցանցային համակարգից մուտքային չափերի համար:

Կարող եք նաև օգտագործել ստատիկ դասեր, որոնք չեն քարտեզագրվում ցանցին, չեն հարմարվում արձագանքող CSS ոճերին կամ հաշվի չեն առնում տարբեր տեսակի վերահսկում (օրինակ՝ inputընդդեմ select):

@

Ահա մի քանի օգնության տեքստ

.00
Ահա ավելի շատ օգնության տեքստ
$ .00

Նշում․ պիտակները շրջապատում են բոլոր ընտրանքները շատ ավելի մեծ սեղմումների տարածքների և ավելի օգտագործելի ձևի համար:

Կոճակ դասի = "" Նկարագրություն
btn Ստանդարտ մոխրագույն կոճակ՝ գրադիենտով
btn btn-primary Ապահովում է լրացուցիչ տեսողական քաշ և բացահայտում է հիմնական գործողությունը կոճակների մի շարքում
btn btn-info Օգտագործվում է որպես լռելյայն ոճերի այլընտրանք
btn btn-success Ցույց է տալիս հաջող կամ դրական գործողություն
btn btn-warning Նշում է, որ այս գործողությունը պետք է զգույշ լինի
btn btn-danger Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն
btn btn-inverse Այլընտրանքային մուգ մոխրագույն կոճակ, որը կապված չէ իմաստային գործողության կամ օգտագործման հետ

Գործողությունների կոճակներ

Որպես կանոն, կոճակները պետք է օգտագործվեն միայն գործողությունների համար, մինչդեռ հիպերհղումները պետք է օգտագործվեն օբյեկտների համար: Օրինակ, «Ներբեռնումը» պետք է լինի կոճակ, իսկ «վերջին գործունեությունը» պետք է լինի հղում:

Կոճակների ոճերը կարող են կիրառվել ցանկացած բանի վրա, երբ .btnկիրառվում է դասը: Այնուամենայնիվ, սովորաբար դուք կցանկանաք կիրառել դրանք միայն <a>և <button>տարրերի վրա:

Խաչաձև բրաուզերի համատեղելիություն

IE9-ը չի կտրում ֆոնային գրադիենտները կլորացված անկյուններում, ուստի մենք այն հեռացնում ենք: Նմանապես, IE9-ը ջնջում է հաշմանդամ buttonտարրերը՝ տեքստը մոխրագույն դարձնելով տհաճ տեքստի ստվերով, որը մենք չենք կարող ուղղել:

Բազմաթիվ չափսեր

Ցանկանում եք ավելի մեծ կամ փոքր կոճակներ: Ավելացրեք .btn-large, .btn-smallկամ .btn-miniերկու լրացուցիչ չափերի համար:


Հաշմանդամ վիճակ

Անջատված կոճակների համար ավելացրեք .disabledդասը հղումներին և disabledհատկանիշը <button>տարրերի համար:

Առաջնային հղում Հղում

Գլուխը վեր Մենք .disabledայստեղ օգտագործում ենք որպես օգտակար դաս, որը նման է սովորական .activeդասին, ուստի նախածանց չի պահանջվում:

Մեկ դաս, բազմաթիվ պիտակներ

Օգտագործեք .btnդասը <a>, <button>, կամ <input>տարրի վրա:

Հղում
  1. <a class = "btn" href = "" > Հղում </a>
  2. <button class = "btn" type = "submit" >
  3. Կոճակ
  4. </button>
  5. <input class = "btn" type = "button"
  6. արժեք = «Մուտք» >
  7. <input class = "btn" type = "submit"
  8. value = "Ներկայացնել" >

Որպես լավագույն պրակտիկա, փորձեք համապատասխանեցնել տարրը ձեր համատեքստին, որպեսզի ապահովեք համապատասխան բրաուզերի ցուցադրում: Եթե ​​ունեք input, օգտագործեք <input type="submit">ձեր կոճակի համար:

  • պատկերակ-ապակ
  • պատկերակ-երաժշտություն
  • պատկերակների որոնում
  • պատկերակ-ծրար
  • պատկերակ-սիրտ
  • պատկերակ-աստղ
  • պատկերակ-աստղ-դատարկ
  • պատկերակ-օգտատեր
  • պատկերակ-ֆիլմ
  • պատկերակ-մեծ
  • պատկերակ-րդ
  • պատկերակ-րդ ցուցակ
  • պատկերակ-ok
  • պատկերակը հեռացնել
  • icon-zoom-in
  • icon-zoom-out
  • պատկերակի անջատում
  • պատկերակ-ազդանշան
  • պատկերակ-ծամ
  • պատկերակ-աղբ
  • պատկերակ-տուն
  • պատկերակ-ֆայլ
  • պատկերակի ժամանակ
  • պատկերակ-ճանապարհ
  • icon-download-alt
  • պատկերակ-ներբեռնում
  • պատկերակի վերբեռնում
  • պատկերակ-մուտքի արկղ
  • պատկերակ-խաղ-շրջանակ
  • պատկերակ-կրկնել
  • պատկերակի թարմացում
  • icon-list-alt
  • պատկերակ-կողպեք
  • պատկերակ-դրոշ
  • պատկերակ-ականջակալներ
  • պատկերակի ծավալի անջատում
  • պատկերակի ծավալի իջեցում
  • պատկերակի ծավալի բարձրացում
  • պատկերակ-qcode
  • պատկերակ-շտրիխ կոդ
  • պատկերակ-պիտակ
  • պատկերակ-պիտակներ
  • պատկերագիրք
  • պատկերակ-էջանիշ
  • պատկերակ-տպագիր
  • պատկերակ-տեսախցիկ
  • պատկերակ-տառատեսակ
  • պատկերակ-համարձակ
  • պատկերակ-շեղ
  • պատկերակ-տեքստ-բարձրություն
  • պատկերակ-տեքստ-լայնություն
  • պատկերակ-հավասարեցնել-ձախ
  • icon-align-centre
  • պատկերակ-հավասարեցնել-աջ
  • պատկերակ-հավասարեցնել-հիմնավորել
  • պատկերակ-ցուցակ
  • icon-indent-left
  • icon-indent-right
  • պատկերակ-facetime-տեսանյութ
  • պատկերակ-պատկեր
  • պատկերակ-մատիտ
  • պատկերակ-քարտեզ-մարկեր
  • պատկերակ-կարգավորել
  • պատկերակ-երանգ
  • պատկերակ-խմբագրել
  • պատկերակ-կիսվել
  • պատկերակի ստուգում
  • պատկերակ-շարժում
  • պատկերակ-քայլ-հետ
  • icon-fast-backward
  • պատկերակ-հետամնաց
  • պատկերակ-խաղ
  • պատկերակ-դադար
  • icon-stop
  • պատկերակ-առաջ
  • icon-fast-forward
  • պատկերակ-քայլ առաջ
  • պատկերակ-հանել
  • պատկերակ-շևրոն-ձախ
  • պատկերակ-շևրոն-աջ
  • պատկերակ-պլյուս-նշան
  • պատկերակ-մինուս-նշան
  • պատկերակ-հեռացնել-նշան
  • պատկերակ-ok-նշան
  • պատկերակ-հարց-նշան
  • պատկերակ-տեղեկատվական նշան
  • պատկերակ-սքրինշոթ
  • icon-remove-circle
  • պատկերակ-ok-շրջանակ
  • icon-ban-circle
  • պատկերակ-սլաք-ձախ
  • պատկերակ-սլաք-աջ
  • պատկերակ-սլաքը վեր
  • պատկերակ-սլաք-ներքև
  • icon-share-alt
  • icon-resize-full
  • icon-size-small
  • պատկերակ-պլյուս
  • պատկերակ-մինուս
  • պատկերակ-աստղանիշ
  • պատկերակ-բացականչական-նշան
  • պատկերակ-նվեր
  • պատկերակ-տերև
  • պատկերակ-կրակ
  • պատկերակ-աչքը բաց
  • պատկերակ-աչք փակել
  • պատկերակ-նախազգուշական նշան
  • պատկերակ-ինքնաթիռ
  • պատկերակ-օրացույց
  • պատկերակ-պատահական
  • պատկերակ-մեկնաբանություն
  • պատկերակ-մագնիս
  • պատկերակ-շևրոն-up
  • պատկերակ-շևրոն-ներքև
  • պատկերակ-retweet
  • icon-shopping-cart
  • պատկերակ-թղթապանակ-փակել
  • պատկերակ-թղթապանակ-բաց
  • պատկերակ-չափափոխել-ուղղահայաց
  • icon-size-horizontal
  • պատկերակ-hdd
  • icon-bullhorn
  • պատկերակ-զանգ
  • պատկերակ-վկայական
  • պատկերակ-բութ-վեր
  • պատկերակ-բութ-ներքև
  • պատկերակ-ձեռքի-աջ
  • պատկերակ-ձախ-ձախ
  • պատկերակ-ձեռքի վեր
  • պատկերակ-ձեռքի ներքեւ
  • պատկերակ-շրջանակ-սլաք-աջ
  • պատկերակ-շրջանակ-սլաք-ձախ
  • icon-circle-arrow-up
  • պատկերակ-շրջանակ-սլաք-ներքև
  • պատկերակ-գլոբուս
  • պատկերակ-բանալին
  • պատկերակ-առաջադրանքներ
  • պատկերակ-ֆիլտր
  • պատկերակ-պայուսակ
  • պատկերակ ամբողջ էկրանով

Կառուցվել է որպես սփրայթ

Յուրաքանչյուր պատկերակ հավելյալ խնդրանք դարձնելու փոխարեն, մենք դրանք կազմեցինք sprite-ի մեջ՝ պատկերների մի փունջ մեկ ֆայլում, որն օգտագործում է CSS՝ պատկերները տեղադրելու համար background-position: Սա նույն մեթոդն է, որը մենք օգտագործում ենք Twitter.com-ում, և այն լավ է աշխատել մեզ մոտ:

Բոլոր սրբապատկերների դասերը նախածանցով են .icon-՝ համապատասխան անունների տարածության և շրջանակի համար, ինչպես մեր մյուս բաղադրիչները: Սա կօգնի խուսափել այլ գործիքների հետ կոնֆլիկտներից:

Glyphicons- ը մեզ թույլ է տվել օգտագործել Halflings-ի հավաքածուն մեր բաց կոդով գործիքակազմում այնքան ժամանակ, քանի դեռ մենք տրամադրում ենք հղում և վարկավորում այստեղ՝ փաստաթղթերում: Խնդրում եմ, մտածեք նույնն անել ձեր նախագծերում:

Ինչպես օգտագործել

Bootstrap-ն օգտագործում է <i>պիտակ բոլոր սրբապատկերների համար, բայց նրանք չունեն պատյանների դասակարգ՝ միայն ընդհանուր նախածանց: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում.

  1. <i class = "icon-search" ></i>

Կան նաև շրջված (սպիտակ) պատկերակների ոճեր, որոնք պատրաստված են մեկ լրացուցիչ դասի հետ.

  1. <i class = "icon-search icon-white" ></i>

Կան 140 դասեր, որոնցից կարող եք ընտրել ձեր պատկերակների համար: Պարզապես ավելացրեք համապատասխան <i>դասերի պիտակ, և դուք պատրաստ եք: Ամբողջական ցանկը կարող եք գտնել sprites.less-ում կամ հենց այստեղ՝ այս փաստաթղթում:

Գլուխը վեր Տեքստի տողերի կողքին օգտագործելիս, ինչպես կոճակների կամ նավարկության հղումներում, համոզվեք, որ <i>պիտակից հետո բացատ թողեք՝ համապատասխան տարածության համար:

Օգտագործման դեպքեր

Սրբապատկերները հիանալի են, բայց որտեղ կարելի է օգտագործել դրանք: Ահա մի քանի գաղափարներ.

  • Որպես տեսողական պատկերներ ձեր կողագոտու նավիգացիայի համար
  • Զուտ պատկերակների վրա հիմնված նավիգացիայի համար
  • Կոճակների համար, որոնք կօգնեն փոխանցել գործողության իմաստը
  • Օգտագործողի նպատակակետի համատեքստը կիսելու հղումներով

Ըստ էության, ցանկացած վայրում, որտեղ դուք կարող եք տեղադրել <i>պիտակ, կարող եք տեղադրել պատկերակ:

Օրինակներ

Օգտագործեք դրանք կոճակներում, կոճակների խմբերում՝ գործիքագոտու, նավիգացիայի կամ նախապես տեղադրված ձևի մուտքագրման համար: