Բազային CSS

Հիմնական HTML տարրերը ոճավորվել և ընդլայնվել են ընդարձակվող դասերով:

Վերնագրեր

Բոլոր HTML վերնագրերը <h1>հասանելի <h6>են:

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

h2. Վերնագիր 2

h3. Վերնագիր 3

h4. Վերնագիր 4

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

Հիմնական պատճենը

Bootstrap-ի գլոբալ լռելյայն 14px է, իսկ a- font-sizeն ՝ 20px : Սա կիրառվում է և բոլոր պարբերությունների նկատմամբ: Բացի այդ, (պարբերությունները) ստանում են իրենց տողի բարձրության կեսի ներքևի լուսանցք (10px ըստ լռելյայն):line-height<body><p>

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Հիմնական մարմնի պատճենը

Պարբերությունն աչքի ընկնելով՝ ավելացնելով .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, դա ոչ կոմոդո Կասետային.

<p class = «առաջատար» > ... </p> 

Կառուցվել է Less-ով

Տպագրական սանդղակը հիմնված է երկու LESS փոփոխականների վրա փոփոխականներում . less՝ @baseFontSizeև @baseLineHeight. Առաջինը բազային տառատեսակի չափն է, որն օգտագործվում է ամբողջ ընթացքում, իսկ երկրորդը՝ բազային տողի բարձրությունը: Մենք օգտագործում ենք այդ փոփոխականները և մի քանի պարզ մաթեմատիկա՝ ստեղծելու մեր բոլոր տեսակի լուսանցքները, լիցքները և գծերի բարձրությունները և ավելին: Անհատականացրեք դրանք, և Bootstrap-ը հարմարվում է:


Շեշտադրում

Օգտագործեք HTML-ի լռելյայն շեշտադրման թեգերը թեթև ոճերով:

<small>

Տեքստի ներդիրում կամ բլոկների շեշտադրումը հանելու համար օգտագործեք փոքր պիտակը:

Տեքստի այս տողը նախատեսված է որպես նուրբ տպագիր:

<p> <small> Տեքստի այս տողը նախատեսված է որպես նուրբ տպագիր: </small> </p>
  

Համարձակ

Ավելի ծանր տառատեսակով տեքստի հատվածն ընդգծելու համար:

Տեքստի հետևյալ հատվածը ներկայացվում է որպես թավ տեքստ :

<strong> մատուցվում է որպես թավ տեքստ </strong>

Շեղագիր

Տեքստի հատվածը շեղատառերով ընդգծելու համար:

Տեքստի հետևյալ հատվածը ներկայացվում է որպես շեղ տեքստ :

<em> մատուցվում է որպես շեղ տեքստ </em>

Գլուխը վերԱզատորեն օգտագործեք <b>և <i>HTML5-ում: <b>նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ <i>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

Հարթեցման դասեր

Հեշտությամբ վերադասավորեք տեքստը բաղադրիչներին տեքստի հավասարեցման դասերով:

Ձախ հավասարեցված տեքստ:

Կենտրոնում հավասարեցված տեքստ:

Աջ հավասարեցված տեքստ:

  1. <p class = "text-left" > Ձախ հավասարեցված տեքստ: </p>
  2. <p class = "text-center" > Կենտրոնով հավասարեցված տեքստ: </p>
  3. <p class = "text-right" > Աջ հավասարեցված տեքստ: </p>

Շեշտադրման դասեր

Փոխանցեք իմաստը գույնի միջոցով մի քանի ընդգծված օգտակար դասերի միջոցով:

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = «խլացված» > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = «տեքստային նախազգուշացում» > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = «տեքստային սխալ» > Donec ullamcorper nulla non metus auctor fringilla: </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <p class = «տեքստային հաջողություն» > Duis mollis, est non commodo luctus, nisi erat porttitor ligula: </p>

հապավումներ

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

<abbr>

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

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

<abbr title = «հատկանիշ» > attr </abbr> 

<abbr class="initialism">

.initialismՄի փոքր ավելի փոքր տառաչափի համար ավելացրեք հապավումը:

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

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>  

Հասցեներ

Ներկայացրե՛ք մոտակա նախնիների կամ աշխատանքի ողջ մարմնի կոնտակտային տվյալները:

<address>

Պահպանեք ֆորմատավորումը՝ վերջացնելով բոլոր տողերը <br>:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ամբողջական անուն
[email protected]
  1. <հասցե>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. Սան Ֆրանցիսկո, CA 94107 <br>
  5. <abbr title = "Phone" > P: </abbr> (123) 456-7890
  6. </հասցե>
  7.  
  8. <հասցե>
  9. <strong> Ամբողջական անուն </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </հասցե>

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

Ձեր փաստաթղթում մեկ այլ աղբյուրից բովանդակության բլոկներ մեջբերելու համար:

Կանխադրված բլոկի մեջբերում

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante. </p>
  3. </blockquote>

Արգելափակման ընտրանքներ

Ոճը և բովանդակությունը փոխվում են ստանդարտ բլոկ մեջբերումների պարզ տատանումների համար:

Աղբյուրի անվանումը

Ավելացրեք <small>պիտակ՝ աղբյուրը բացահայտելու համար: Փաթեթավորեք սկզբնաղբյուր աշխատանքի անվանումը <cite>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

Աղբյուրի վերնագրում հայտնի մեկը
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante. </p>
  3. <small> Հայտնի մեկը <cite title = "Source Title" > Աղբյուրի անվանումը </cite></small>
  4. </blockquote>

Այլընտրանքային ցուցադրումներ

Օգտագործեք .pull-rightլողացող, աջ հարթեցված բլոկի մեջբերումների համար:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

Աղբյուրի վերնագրում հայտնի մեկը
  1. <blockquote class = "pull-right" >
  2. ...
  3. </blockquote>

Ցուցակներ

Չպատվիրված

Նյութերի ցանկ, որոնց կարգը բացահայտորեն կարևոր չէ :

  • 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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Պատվիրել է

Ապրանքների ցանկ, որոնցում պատվերը բացահայտորեն կարևոր է :

  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
  1. <ol>
  2. <li> ... </li>
  3. </ol>

Ոչ ոճավորված

Հեռացրեք կանխադրված list-styleև ձախ լցոնումը ցանկի տարրերից (միայն անմիջական երեխաների համար):

  • 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
  1. <ul class = «չոճավորված» >
  2. <li> ... </li>
  3. </ul>

Inline

Տեղադրեք ցանկի բոլոր տարրերը մեկ տողի վրա inline-blockև մի քանի թեթև լցոնով:

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = «inline» >
  2. <li> ... </li>
  3. </ul>

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

Տերմինների ցանկ՝ իրենց հարակից նկարագրություններով:

Նկարագրության ցուցակներ
Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ
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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

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

Կազմեք տերմիններ և նկարագրություններ՝ <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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus:
  1. <dl class = «dl-horizontal» >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

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

Inline

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

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

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

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

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

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

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

Կանխադրված ոճեր

Հիմնական ոճավորման համար՝ թեթև լիցք և միայն հորիզոնական բաժանիչներ, ավելացրեք հիմնական դասը .tableցանկացածին <table>:

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

Ընտրովի պարապմունքներ

.tableԲազային դասին ավելացրեք հետևյալ դասերից որևէ մեկը .

.table-striped

Ավելացնում է zebra-striping ցանկացած աղյուսակի տողում CSS ընտրիչի <tbody>միջոցով :nth-child(մատչելի չէ IE7-8-ում):

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

.table-bordered

Սեղանին ավելացրեք եզրագծեր և կլորացված անկյուններ:

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

.table-hover

Միացնել սավառնող վիճակը աղյուսակի տողերի վրա <tbody>.

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

.table-condensed

Սեղաններն ավելի կոմպակտ են դարձնում՝ կիսով չափ կտրելով բջիջների լիցքը:

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

Ընտրովի տողերի դասեր

Օգտագործեք համատեքստային դասեր աղյուսակի տողերը գունավորելու համար:

Դասարան Նկարագրություն
.success Ցույց է տալիս հաջող կամ դրական գործողություն:
.error Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն:
.warning Ցույց է տալիս նախազգուշացում, որը կարող է ուշադրության կարիք ունենալ:
.info Օգտագործվում է որպես լռելյայն ոճերի այլընտրանք:
# Արտադրանք Վերցված վճարում Կարգավիճակ
1 ՏԲ - Ամսական 01/04/2012 Հաստատված է
2 ՏԲ - Ամսական 02/04/2012 Մերժվել է
3 ՏԲ - Ամսական 03/04/2012 Սպասվում է
4 ՏԲ - Ամսական 04/04/2012 Հաստատելու համար զանգահարեք
  1. ...
  2. < tr class = «հաջողություն» >
  3. <td> 1 < /td>
  4. <td>ՏԲ - ամսական</ td >
  5. <td> 01 / 04 / 2012 < /td>
  6. <td>Հաստատված է</ td >
  7. </ tr >
  8. ...

Աջակցված աղյուսակի նշում

Աջակցվող աղյուսակի HTML տարրերի ցանկը և ինչպես դրանք պետք է օգտագործվեն:

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

Կանխադրված ոճեր

Առանձին ձևի վերահսկիչները ստանում են ոճավորում, բայց առանց որևէ պահանջվող հիմնական դասի <form>կամ նշագծման մեծ փոփոխությունների: Արդյունքները դրսևորվում են ձախից հավասարեցված պիտակներով՝ ձևի կառավարիչների վերևում:

Լեգենդ Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ:
  1. <ձև>
  2. <fieldset>
  3. <legend> Լեգենդ </legend>
  4. <label> Պիտակի անունը </label>
  5. <input type = "text" placeholder = "Type something…" >
  6. <span class = "help-block" > Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ: </span>
  7. <label class = "checkbox" >
  8. <input type = "checkbox" > Ստուգեք ինձ
  9. </label>
  10. <button type = "submit" class = "btn" > Ներկայացնել </button>
  11. </fieldset>
  12. </form>

Ընտրովի դասավորություններ

Bootstrap-ում ներառված են երեք կամընտիր ձևի դասավորություններ ընդհանուր օգտագործման դեպքերի համար:

Որոնման ձև

Ավելացրե՛ք .form-searchձևին և տեքստին .search-query՝ <input>լրացուցիչ կլորացված տեքստի մուտքագրման համար:

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

Ներդիր ձև

Կոմպակտ դասավորության համար ավելացրեք .form-inlineձախ կողմում դասավորված պիտակների և ներկառուցված բլոկների վերահսկման համար:

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

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

Աջը հավասարեցրեք պիտակները և լողացրե՛ք դրանք ձախ կողմում, որպեսզի դրանք հայտնվեն նույն տողում, ինչ հսկիչները: Պահանջում է ամենաշատ նշագրման փոփոխությունները լռելյայն ձևից.

  • Ավելացնել .form-horizontalձևին
  • Փաթեթավորեք պիտակները և հսկիչները.control-group
  • Ավելացնել .control-labelպիտակի վրա
  • Փաթեթավորեք ցանկացած հարակից հսկիչ՝ .controlsպատշաճ հավասարեցման համար
  1. <form class = «ձև-հորիզոնական» >
  2. <div class = "control-group" >
  3. <label class = "control-label" for = "inputEmail" > Էլփոստ </label>
  4. <div class = «վերահսկում» >
  5. <input type = "text" id = "inputEmail" placeholder = "Email" >
  6. </div>
  7. </div>
  8. <div class = "control-group" >
  9. <label class = "control-label" for = "inputPassword" > Գաղտնաբառ </label>
  10. <div class = «վերահսկում» >
  11. <input type = "password" id = "inputPassword" placeholder = "Գաղտնաբառ" >
  12. </div>
  13. </div>
  14. <div class = "control-group" >
  15. <div class = «վերահսկում» >
  16. <label class = "checkbox" >
  17. <input type = "checkbox" > Հիշել ինձ
  18. </label>
  19. <button type = "submit" class = "btn" > Մուտք գործեք </button>
  20. </div>
  21. </div>
  22. </form>

Աջակցված ձևերի վերահսկում

Ստանդարտ ձևի վերահսկման օրինակներ, որոնք աջակցվում են ձևի օրինակի դասավորության մեջ:

Մուտքագրումներ

Ամենատարածված ձևի կառավարում, տեքստի վրա հիմնված մուտքագրման դաշտեր: Ներառում է աջակցություն HTML5-ի բոլոր տեսակների համար՝ տեքստ, գաղտնաբառ, ամսաթիվ, ամսաթիվ-տեղական, ամսաթիվ, ամիս, ժամ, շաբաթ, համար, էլ. հասցե, url, որոնում, հեռ. և գույն:

Պահանջում է միշտ օգտագործել նշվածը type:

  1. <input type = "text" placeholder = "Text input" >

Textarea

Ձևի կառավարում, որն աջակցում է տեքստի մի քանի տող: Փոխեք rowsհատկանիշը ըստ անհրաժեշտության:

  1. <textarea rows = "3" ></textarea>

Նշման տուփեր և ռադիոներ

Նշման վանդակները նախատեսված են ցուցակում մեկ կամ մի քանի տարբերակներ ընտրելու համար, մինչդեռ ռադիոկայանները նախատեսված են շատերից մեկ տարբերակ ընտրելու համար:

Կանխադրված (դասավոր)


  1. <label class = "checkbox" >
  2. <input type = "checkbox" value = "" >
  3. Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
  4. </label>
  5.  
  6. <label class = «ռադիո» >
  7. <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1"-ը ստուգված է >
  8. Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
  9. </label>
  10. <label class = «ռադիո» >
  11. <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
  12. Տարբերակ երկրորդը կարող է լինել այլ բան, և այն ընտրելով կչեղարկվի առաջին տարբերակը
  13. </label>

Ներկառուցված վանդակներ

Ավելացրեք .inlineդասը մի շարք վանդակների կամ ռադիոկայանների վրա, որպեսզի վերահսկիչները հայտնվեն նույն տողում:

  1. <label class = "checkbox inline" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <label class = "checkbox inline" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
  6. </label>
  7. <label class = "checkbox inline" >
  8. <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
  9. </label>

Ընտրում է

Օգտագործեք լռելյայն տարբերակը կամ նշեք a multiple="multiple"՝ միանգամից մի քանի տարբերակ ցուցադրելու համար:


  1. <ընտրել>
  2. <տարբերակ> 1 </option>
  3. <տարբերակ> 2 </option>
  4. <տարբերակ> 3 </option>
  5. <տարբերակ> 4 </option>
  6. <տարբերակ> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" >
  10. <տարբերակ> 1 </option>
  11. <տարբերակ> 2 </option>
  12. <տարբերակ> 3 </option>
  13. <տարբերակ> 4 </option>
  14. <տարբերակ> 5 </option>
  15. </select>

Ձևերի վերահսկման ընդլայնում

Ավելացնելով զննարկչի գոյություն ունեցող հսկիչները՝ Bootstrap-ը ներառում է ձևի այլ օգտակար բաղադրիչներ:

Նախապատրաստված և կցված մուտքեր

Ավելացրեք տեքստ կամ կոճակներ տեքստի վրա հիմնված ցանկացած մուտքագրումից առաջ կամ հետո: Նկատի ունեցեք, որ selectտարրերն այստեղ չեն ապահովվում:

Կանխադրված ընտրանքներ

Փաթեթավորեք an-ը .add-onև an- inputը երկու դասերից մեկի հետ՝ մուտքագրման տեքստը նախապես ավելացնելու կամ ավելացնելու համար:

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username " >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput " type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

Համակցված

Օգտագործեք և՛ դասեր, և՛ երկու օրինակներ՝ .add-onմուտքագրում տեղադրելու և ավելացնելու համար:

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput " type = "տեքստ" >
  4. <span class = "add-on" > .00 </span>
  5. </div>

Կոճակներ տեքստի փոխարեն

Տեքստով a-ի փոխարեն <span>օգտագործեք a- .btnն՝ մուտքագրմանը մի կոճակ (կամ երկու) կցելու համար:

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton " type = "տեքստ" >
  3. <button class = "btn" type = "button" > Գնա՛: </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons " type = "տեքստ" >
  3. <button class = "btn" type = "button" > Որոնել </button>
  4. <button class = "btn" type = "button" > Ընտրանքներ </button>
  5. </div>

Կոճակների բացվող պատուհաններ

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton " type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. Գործողություն
  6. <span class = «caret» ></span>
  7. </button>
  8. <ul class = «dropdown-menu» >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Գործողություն
  5. <span class = «caret» ></span>
  6. </button>
  7. <ul class = «dropdown-menu» >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "տեքստ" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Գործողություն
  5. <span class = «caret» ></span>
  6. </button>
  7. <ul class = «dropdown-menu» >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton " type = "տեքստ" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. Գործողություն
  15. <span class = «caret» ></span>
  16. </button>
  17. <ul class = «dropdown-menu» >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Սեգմենտացված բացվող խմբեր

  1. <ձև>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. <մուտքագրման տեսակ = «տեքստ» >
  5. </div>
  6. <div class = "input-append" >
  7. <մուտքագրման տեսակ = «տեքստ» >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Որոնման ձև

  1. <form class = "form-որոնում" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > Որոնել </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Որոնել </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </form>

Վերահսկել չափերը

Օգտագործեք հարաբերական չափերի դասեր, ինչպիսիք են .input-largeկամ համապատասխանեցրեք ձեր մուտքերը ցանցի սյունակների չափերին՝ օգտագործելով .span*դասերը:

Արգելափակել մակարդակի մուտքերը

Ստիպեք որևէ <input>կամ <textarea>տարրին պահել բլոկի մակարդակի տարրի պես:

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Հարաբերական չափսեր

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Գլուխը վերՀետագա տարբերակներում մենք կփոխենք այս հարաբերական մուտքային դասերի օգտագործումը՝ մեր կոճակների չափերին համապատասխանելու համար: Օրինակ, .input-largeկավելացնի ներածման լիցքը և տառաչափը:

Ցանցի չափսերը

Օգտագործեք .span1to .span12մուտքերի համար, որոնք համապատասխանում են ցանցի սյունակների նույն չափերին:

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </select>

Մեկ տողում ցանցի մի քանի մուտքերի համար օգտագործեք .controls-rowմոդիֆիկատորների դասը՝ համապատասխան տարածության համար : Այն լողում է մուտքերը, որպեսզի փլուզվի սպիտակ տարածությունը, սահմանում է համապատասխան լուսանցքները և մաքրում է բոցը:

  1. <div class = «վերահսկում» >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "controls controls-row" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

Չխմբագրվող մուտքեր

Ներկայացրե՛ք տվյալները այնպիսի ձևով, որը հնարավոր չէ խմբագրել՝ առանց իրական ձևի նշագրման օգտագործման:

Որոշ արժեքներ այստեղ
  1. <span class = "input-xlarge uneditable-input" > Որոշ արժեքներ այստեղ </span>

Ձևավորել գործողություններ

Վերջացրեք ձևը մի խումբ գործողություններով (կոճակներով): Երբ տեղադրվում են a- .form-actionsի մեջ, կոճակներն ավտոմատ կերպով կնճռոտվեն՝ համապատասխանեցնելով ձևի կառավարիչներին:

  1. <div class = «ձև-գործողություններ» >
  2. <button type = "submit" class = "btn btn-primary" > Պահպանել փոփոխությունները </button>
  3. <button type = "button" class = "btn" > Չեղարկել </button>
  4. </div>

Օգնության տեքստ

Ներկառուցված և արգելափակման մակարդակի աջակցություն օգնության տեքստի համար, որը հայտնվում է ձևի վերահսկման շուրջ:

Ներքին օգնություն

Ներկառուցված օգնության տեքստ
  1. <input type = "text" ><span class = "help-inline" > Ներքին օգնության տեքստ </span>

Արգելափակել օգնությունը

Օգնության տեքստի ավելի երկար բլոկ, որը կոտրվում է նոր տողով և կարող է տարածվել մեկ տողից դուրս:
  1. <input type = "text" ><span class = "help-block" > Օգնության տեքստի ավելի երկար բլոկ, որը կտրվում է նոր տողով և կարող է տարածվել մեկ տողից այն կողմ: </span>

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

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

Ներածման ֆոկուս

Մենք հեռացնում ենք լռելյայն outlineոճերը որոշ ձևերի վերահսկումներից և կիրառում ենք a- box-shadowն իր տեղում :focus:

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Սա կենտրոնացած է..." >

Անվավեր մուտքեր

Ոճային մուտքագրումներ դիտարկիչի լռելյայն ֆունկցիոնալության միջոցով :invalid: Նշեք a type, ավելացրեք requiredհատկանիշը, եթե դաշտն ընտրովի չէ, և (եթե կիրառելի է) նշեք a pattern.

Սա հասանելի չէ Internet Explorer 7-9 տարբերակներում CSS կեղծ ընտրիչների աջակցության բացակայության պատճառով:

  1. <input class = "span3" type = "email" պահանջվում է >

Անջատված մուտքեր

Ավելացրեք disabledհատկանիշը մուտքագրման վրա՝ օգտատիրոջ մուտքագրումը կանխելու և մի փոքր այլ տեսք ստեղծելու համար:

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Անջատված է մուտքագրումն այստեղ..." անջատված է >

Վավերացման վիճակներ

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

Հնարավոր է՝ ինչ-որ բան սխալ է տեղի ունեցել
Խնդրում ենք ուղղել սխալը
Օգտվողի անունը վերցված է
Վա՜յ
  1. <div class = "վերահսկիչ խմբի նախազգուշացում" >
  2. <label class = "control-label" for = "inputWarning" > Մուտքագրում նախազգուշացմամբ </label>
  3. <div class = «վերահսկում» >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > Հնարավոր է, որ ինչ- որ բան սխալ է տեղի ունեցել </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "control-group error" >
  10. <label class = "control-label" for = "inputError" > Մուտք սխալմամբ </label>
  11. <div class = «վերահսկում» >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > Խնդրում ենք ուղղել սխալը </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "control-group info" >
  18. <label class = "control-label" for = "inputInfo" > Մուտքագրում տեղեկատվության հետ </label>
  19. <div class = «վերահսկում» >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > Օգտվողի անունը արդեն վերցված է </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = «վերահսկիչ խմբի հաջողություն» >
  26. <label class = "control-label" for = "inputSuccess" > Մուտքագրումը հաջողությամբ </label>
  27. <div class = «վերահսկում» >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </div>

Կանխադրված կոճակներ

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

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

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

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

Կոճակների չափսերը

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

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Մեծ կոճակ </button>
  3. <button class = "btn btn-large" type = "button" > Մեծ կոճակ </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Կանխադրված կոճակ </button>
  7. <button class = "btn" type = "button" > Կանխադրված կոճակ </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Փոքր կոճակ </button>
  11. <button class = "btn btn-small" type = "button" > Փոքր կոճակ </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > Մինի կոճակ </button>
  15. <button class = "btn btn-mini" type = "button" > Մինի կոճակ </button>
  16. </p>

Ստեղծեք բլոկի մակարդակի կոճակներ, որոնք ընդգրկում են ծնողի ամբողջ լայնությունը՝ ավելացնելով .btn-block:

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Արգելափակման մակարդակի կոճակ </button>
  2. <button class = "btn btn-large btn-block" type = "button" > Արգելափակման մակարդակի կոճակ </button>

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

Դարձրեք կոճակներին չսեղմելու տեսք՝ դրանք 50%-ով ետ թողնելով:

Խարիսխի տարր

Ավելացրեք .disabledդասը <a>կոճակներին:

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

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Հիմնական հղում </a>
  2. <a href = "#" class = "btn btn-large disabled" > Հղում </a>

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

Կոճակի տարր

Ավելացրեք disabledհատկանիշը <button>կոճակներին:

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Հիմնական կոճակ </button>
  2. <button type = "button" class = "btn btn-large" disabled > Կոճակ </button>

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

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

Հղում
  1. <a class = "btn" href = "" > Հղում </a>
  2. <button class = "btn" type = "submit" > Կոճակ </button>
  3. <input class = "btn" type = "button" value = "Input" >
  4. <input class = "btn" type = "submit" value = "Submit" >

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

Ավելացրեք դասեր <img>տարրի մեջ՝ ցանկացած նախագծում պատկերները հեշտությամբ ոճավորելու համար:

140x140 140x140 140x140
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-circle" >
  3. <img src = "..." class = "img-polaroid" >

Գլուխը վեր .img-roundedև .img-circleչեն աշխատում IE7-8-ում border-radiusաջակցության բացակայության պատճառով:

Սրբապատկերներ

140 սրբապատկերներ սփրայթ ձևով, հասանելի մուգ մոխրագույն (կանխադրված) և սպիտակ գույներով, տրամադրված Glyphicons- ի կողմից :

  • պատկերակ-ապակ
  • պատկերակ-երաժշտություն
  • պատկերակների որոնում
  • պատկերակ-ծրար
  • պատկերակ-սիրտ
  • պատկերակ-աստղ
  • պատկերակ-աստղ-դատարկ
  • պատկերակ-օգտատեր
  • պատկերակ-ֆիլմ
  • պատկերակ-մեծ
  • պատկերակ-րդ
  • պատկերակ-րդ ցուցակ
  • պատկերակ-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
  • պատկերակ-քայլ առաջ
  • պատկերակ-հանել
  • պատկերակ-շևրոն-ձախ
  • պատկերակ-շևրոն-աջ
  • պատկերակ-պլյուս-նշան
  • պատկերակ-մինուս-նշան
  • icon-remove-sign
  • պատկերակ-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
  • պատկերակ-շրջանակ-սլաք-ներքև
  • պատկերակ-գլոբուս
  • պատկերակ-բանալին
  • պատկերակ-առաջադրանքներ
  • պատկերակ-ֆիլտր
  • պատկերակ-պորտֆել
  • պատկերակ ամբողջ էկրանով

Գլիֆիկոնների վերագրում

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


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

Բոլոր պատկերակները պահանջում են <i>հատուկ դասի պիտակ՝ նախածանցով icon-: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում.

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

Կան նաև շրջված (սպիտակ) պատկերակների ոճեր, որոնք պատրաստված են մեկ լրացուցիչ դասի հետ: Մենք հատուկ կկիրառենք այս դասը սավառնող և ակտիվ վիճակների վրա՝ նավի և բացվող հղումների համար:

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

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


Սրբապատկերների օրինակներ

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

Կոճակներ

Կոճակների խումբ կոճակների գործիքագոտում
  1. <div class = "btn-գործիքադարակ" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
  4. <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
  5. <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
  7. </div>
  8. </div>
Բացվող կոճակների խմբում
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Օգտվող </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
  4. <ul class = «dropdown-menu» >
  5. <li><a href = "#" ><i class = "icon-pencil" ></i> Խմբագրել </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> Ջնջել </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Արգելել </a></li>
  8. <li class = «բաժանարար» ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Դարձնել ադմինիստրատոր </a></li>
  10. </ul>
  11. </div>
Կոճակների չափսերը
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Աստղ </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Աստղ </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Աստղ </a>

Նավիգացիա

  1. <ul class = «nav nav-list» >
  2. <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Գլխավոր </a></li>
  3. <li><a href = "#" ><i class = "icon-book" ></i> Գրադարան </a></li>
  4. <li><a href = "#" ><i class = "icon-pencil" ></i> Ծրագրեր </a></li>
  5. <li><a href = "#" ><i class = "i" ></i> Տարբեր </a></li>
  6. </ul>

Ձևավորել դաշտերը

  1. <div class = "control-group" >
  2. <label class = "control-label" for = "inputIcon" > Էլփոստի հասցե </label>
  3. <div class = «վերահսկում» >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" ><i class = "icon-velope" ></i></span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>