Bootstrap

Негизги CSS

Негизги HTML элементтери стилдештирилген жана кеңейтилүүчү класстар менен өркүндөтүлгөн.

Типография

рубрикалар

Бардык HTML аталыштары бар <h1>.<h6>

h1. 1-башкы

h2. 2-башкы

h3. 3-башкы

h4. 4-башкы

h5. 5-башкы
h6. 6-башкы

Дененин көчүрмөсү

Bootstrap глобалдык font-sizeдемейки 14px , 20pxline-height менен . Бул жана бардык пункттарына карата колдонулат. Кошумчалай кетсек, (абзацтар) сызык бийиктигинин жарымынын төмөнкү четин алат (демейки боюнча 10px).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Дуйс моллис, 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. Дуйс моллис, 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, est non commodo luctus.

<p класс = "коргошун" > ... </p>

Less менен курулган

Типографиялык масштаб өзгөрмөлөрдөгү эки LESS өзгөрмөсүнө негизделген.less : @baseFontSizeжана @baseLineHeight. Биринчиси - бүтүндөй колдонулган негизги шрифт-өлчөмү, экинчиси - базалык сызыктын бийиктиги. Биз ошол өзгөрмөлөрдү жана кээ бир жөнөкөй математиканы бардык түрүбүздүн жана башкалардын четтерин, толтургучтарын жана сызык бийиктиктерин түзүү үчүн колдонобуз. Аларды ыңгайлаштырыңыз жана Bootstrap ыңгайлашат.

Баса

Жеңил стилдер менен HTMLдин демейки басым тегдерин колдонуңуз.

<small>

Тексттин саптагы же блокторун баса белгилөө үчүн кичинекей тегди колдонуңуз.

Тексттин бул сабы жакшы басуу катары каралышы керек.

<p> <кичинекей> Тексттин бул сабы жакшы басуу катары каралышы керек. </small> </p>

Bold

Оор шрифт-салмагы менен тексттин үзүндүсүн баса үчүн.

Төмөнкү тексттин үзүндүсү калың текст катары берилген .

<strong> калың текст </strong> катары берилген

курсив

Тексттин үзүндүсүн курсив менен баса белгилөө үчүн.

Төмөнкү тексттин үзүндүсү курсив текст катары көрсөтүлөт .

<em> курсив менен жазылган текст </em> катары берилген

Көңүл бургула!Колдонуудан тартынбаңыз <b>жана <i>HTML5те. <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн колдонулат, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.

Баса класстар

Бир нече басым пайдалуу класстар менен түс аркылуу маанини жеткириңиз.

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 класс = "үнсүз" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p класс = "текст-эскертүү" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p класс = "текст-ката" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p класс = "текст-маалымат" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p класс = "текст-ийгилик" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Аббревиатуралар

<abbr>Аббревиатуралар жана аббревиатуралар үчүн HTML элементинин стилдештирилген ишке ашырылышы, курсордун кеңейтилген версиясын көрсөтүү. Атрибуту бар аббревиатуралардын titleылдый жагындагы ачык чекиттери жана курсордогу жардам курсору бар, бул курсорду алып барууда кошумча контекстти камсыз кылат.

<abbr>

Кеңейтилген текст үчүн, аббревиатураны узакка жылдырганда, titleатрибутун кошуңуз.

Аттрибут сөзүнүн аббревиатурасы attr болуп саналат .

<abbr title = "атрибут" > аттр </abbr>

<abbr class="initialism">

.initialismБир аз кичирээк шрифт өлчөмү үчүн аббревиатурага кошуңуз .

HTML кесилген нандан бери эң жакшы нерсе.

<abbr title = "Гипертекстти белгилөө тили" класс = "инициализм" > 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.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Телефон" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <дареги>
  9.   <strong> Толук аты-жөнү </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blockquotes

Документиңиздин ичиндеги башка булактан алынган мазмун блокторун цитата кылуу үчүн.

Демейки блокировка

Цитата катары <blockquote>каалаган HTMLди ороп алыңыз . Түз цитаталар үчүн биз сунуштайбыз <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Блокировка параметрлери

Стандарттык блок цитатадагы жөнөкөй вариациялар үчүн стиль жана мазмун өзгөрөт.

Булакты атоо

<small>Булакты аныктоо үчүн тег кошуңуз . Булактын атын ороп алыңыз <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.

Булак аталышында белгилүү бирөө 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Белгилүү бирөө <cite title = "Булактын аталышы" > Булактын аталышы </cite></small> 
  4. </blockquote>

Альтернативдик дисплейлер

.pull-rightКалкырылган, оңго тегизделген блок тырмакча үчүн колдонуңуз .

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.

Булак аталышында белгилүү бирөө 
  1. <blockquote класс = "оңго тартуу" > 
  2.   ...
  3. </blockquote>

Тизмелер

Тартипсиз

Тартип ачык мааниге ээ болбогон нерселердин тизмеси .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • претиум nisl aliquet жылы Facilisis
  • Nulla 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. Integer molestie lorem at massa
  4. претиум nisl aliquet жылы Facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Анеан сит амет эрат нунц
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Unstyled

Жок list-styleже кошумча сол толтурулган нерселердин тизмеси.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • претиум nisl aliquet жылы Facilisis
  • Nulla 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 = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Description

Алар менен байланышкан сыпаттамалары менен терминдердин тизмеси.

Сүрөттөмө тизмелери
Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
Euismod
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>катарлаш кылып түзүңүз.

Сүрөттөмө тизмелери
Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
Euismod
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 класс = "dl-горизонталдуу" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Көңүл бургула!Горизонталдуу сүрөттөмө тизмелери сол тилкеге ​​туура келүү үчүн өтө узун терминдерди кыскартат text-overflow. Тар көрүү портторунда алар демейки топтолгон макетке өзгөрөт.

Code

Inline

Коддун саптык үзүндүлөрүн менен ороп алыңыз <code>.

Мисалы, <section>сап катары оролушу керек. 
  1. Мисалы , < code><section> </ code > сап катары оролгон болушу керек .

Негизги блок

<pre>Коддун бир нече саптары үчүн колдонуңуз . Туура рендеринг үчүн коддогу бурчтуу кашаалардан качууну унутпаңыз.

<p>Үлгү тексти бул жерде...</p>
  1. <pre>
  2.   <p>Үлгү тексти бул жерде...</p>
  3. </pre>

Көңүл бургула!<pre>Тегдердин ичиндеги кодду мүмкүн болушунча солго жакын сактоону унутпаңыз ; ал бардык өтмөктөрдү көрсөтөт.

Каалоо боюнча сиз .pre-scrollableклассты кошо аласыз, ал 350px максималдуу бийиктикти орнотуп, Y огу сыдырма тилкесин камсыз кылат.

Таблицалар

Демейки стилдер

Негизги стилдештирүү үчүн — жеңил толтургуч жана горизонталдуу бөлгүчтөр .table— каалаган класска негизги классты кошуңуз <table>.

# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри чымчык @twitter 
  1. <таблица класс = "таблица" > 
  2.   …
  3. </таблица>

Кошумча класстар

.tableНегизги класска төмөнкү класстардын каалаганын кошуңуз .

.table-striped

<tbody>CSS селектору аркылуу каалаган таблица саптарына зебра тилкесин кошот :nth-child(IE7-IE8де жок).

# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри чымчык @twitter 
  1. <таблица класс = "таблица-сызык" > 
  2.   …
  3. </таблица>

.table-bordered

Таблицага чектерди жана тегеректелген бурчтарды кошуңуз.

# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
Марк Отто @getbootstrap
2 Жакып Торнтон @fat
3 Ларри куш @twitter 
  1. <таблица классы = "таблица менен чектеш" > 
  2.   …
  3. </таблица>

.table-hover

ичинде таблицанын саптарында өтүүчү абалды иштетүү <tbody>.

# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри куш @twitter 
  1. <таблица классы = "таблица үстөлүн көтөрүү" > 
  2.   …
  3. </таблица>

.table-condensed

Клетка толтургучтарын экиге бөлүп, үстөлдөрдү компакттуу кылат.

# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри куш @twitter 
  1. <таблица класс = "таблица-конденсацияланган" > 
  2.   …
  3. </таблица>

Кошумча сап класстары

Таблица саптарын боёо үчүн контексттик класстарды колдонуңуз.

Класс Description
.success Ийгиликтүү же оң иш-аракетти көрсөтөт.
.error Кооптуу же потенциалдуу терс аракетти көрсөтөт.
.warning Көңүл бурууну талап кылган эскертүүнү көрсөтөт.
.info Демейки стилдерге альтернатива катары колдонулат.
# Продукт Төлөм алынган Статус
1 TB - Ай сайын 01/04/2012 Бекитилди
2 TB - Ай сайын 02/04/2012 Четке кагылды
3 TB - Ай сайын 03/04/2012 Күтүүдө
4 TB - Ай сайын 04/04/2012 Ырастоо үчүн чалыңыз 
  1. ...
  2.   < tr класс = "ийгилик" >
  3.     <td> 1 < /td>
  4.     <td>КБ - Ай сайын</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Кабыл алынды</ td >
  7.   </ tr >
  8. ...

Колдоого алынган таблица

Колдоого алынган HTML стол элементтеринин тизмеси жана аларды кантип колдонуу керек.

Tag Description
<table> Берилиштерди таблица форматында көрсөтүү үчүн таңуу элементи
<thead> <tr>Таблица тилкелерин белгилөө үчүн таблица баш саптары үчүн контейнер элементи ( ).
<tbody> <tr>Таблицанын негизги бөлүгүндөгү таблица саптары үчүн контейнер элементи ( ).
<tr> Бир катарда пайда болгон таблица уячаларынын ( <td>же ) топтому үчүн контейнер элементи<th>
<td> Демейки жадыбал уячасы
<th> Мамыча (же сап, масштабына жана жайгашуусуна жараша) энбелгилери үчүн атайын таблица уячасы
бир ичинде колдонулушу керек<thead>
<caption> Таблицада эмнени камтыган сүрөттөмө же кыскача маалымат, өзгөчө экранды окугандар үчүн пайдалуу 
  1. <таблица>
  2.   <caption> ... </caption>
  3.   <thead>
  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. </таблица>

Формалар

Демейки стилдер

Жеке форманы башкаруу элементтери стилди алат, бирок <form>белгилөөдө эч кандай талап кылынган базалык класссыз же чоң өзгөрүүлөр жок. Натыйжалар форманы башкаруу элементтеринин үстүндө тизилген, солго тегизделген энбелгилерди берет.

Легенда Бул жерде блок деңгээлиндеги жардам текстинин мисалы. 
  1. <форма>
  2.   <талаа топтому>
  3.     <легенда> Легенда </legend>
  4.     <label> Энбелги аты </label>
  5.     <input type = "text" placeholder = "Бир нерсени териңиз..." >  
  6.     <span class = "help-block" > Мисал блок деңгээлиндеги жардам тексти бул жерде. </span> 
  7.     <белги класс = "текшерүү кутусу" > 
  8.       <киргизүү түрү = "текшерүү" > Мени текшериңиз 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Тапшыруу </button>  
  11.   </fieldset>
  12. </form>

Кошумча макеттер

Bootstrap менен бирге жалпы колдонуу учурлары үчүн үч кошумча форма макети камтылган.

Издөө формасы

.form-searchФормага жана кошумча тегеректелген текст киргизүү үчүн .search-queryкошуңуз .<input>

  1. <форма класс = "форма-издөө" > 
  2.   <киргизүү түрү = "текст" класс = "киргизүү-орто издөө-суроо" >  
  3.   <button type = "тапшыртуу " класс = "btn" > Издөө </button>  
  4. </form>

Inline форма

.form-inlineКомпакт макет үчүн солго тегизделген энбелгилерди жана саптык блокту башкаруу элементтерин кошуңуз .

  1. <form class = "form-inline" > 
  2.   <киргизүү түрү = "текст" класс = "киргизүү-кичинекей" толтургуч = "Электрондук почта" >   
  3.   <киргизүү түрү = "сырсөз" класс = "киргизүү-кичинекей" толтургуч = "Сырсөз" >   
  4.   <белги класс = "текшерүү кутусу" > 
  5.     <киргизүү түрү = "текшерүү кутусу" > Мени эсте 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Кирүү </button>  
  8. </form>

Горизонталдык форма

Энбелгилерди оңго тегиздеп, башкаруу элементтери менен бир сызыкта көрүнүшү үчүн аларды солго сүзүңүз. Демейки формадан эң көп белги өзгөртүүлөрдү талап кылат:

  • .form-horizontalФормага кошуңуз
  • Энбелгилерди жана башкаруу элементтерин ороп алыңыз.control-group
  • .control-labelЭнбелгиге кошуу
  • .controlsТуура тегиздөө үчүн бардык байланышкан башкаруу элементтерин ороп алыңыз
  1. <форма класс = "форма-горизонталдуу" > 
  2.   <div class = "контролдоо тобу" > 
  3.     <label class = "control-label" for = "inputEmail" > Электрондук почта </label>  
  4.     <div class = "controls" > 
  5.       <киргизүү түрү = "текст" id = "inputEmail" толтургуч = "Электрондук почта" >   
  6.     </div>
  7.   </div>
  8.   <div class = "контролдоо тобу" > 
  9.     <label class = "control-label" for = "inputPassword" > Сырсөз </label>  
  10.     <div class = "controls" > 
  11.       <киргизүү түрү = "сырсөз" id = "inputPassword" толтургуч = "Сырсөз" >   
  12.     </div>
  13.   </div>
  14.   <div class = "контролдоо тобу" > 
  15.     <div class = "controls" > 
  16.       <белги класс = "текшерүү кутусу" > 
  17.         <киргизүү түрү = "текшерүү кутусу" > Мени эсте 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Кирүү </button>  
  20.     </div>
  21.   </div>
  22. </form>

Колдоого алынган форманы башкаруу

Үлгү форма макетинде колдоого алынган стандарттык форманы башкаруу элементтеринин мисалдары.

Киргизүүлөр

Көбүнчө форманы башкаруу, текстке негизделген киргизүү талаалары. Бардык HTML5 түрлөрүн колдоону камтыйт: текст, сырсөз, дата-time, datetime-локалдык, дата, ай, убакыт, жума, номер, электрондук почта, url, издөө, тел жана түс.

typeар дайым көрсөтүлгөн колдонууну талап кылат .

  1. <киргизүү түрү = "текст" толтуруучу = "текст киргизүү" >

Textarea

Тексттин бир нече саптарын колдогон форманы башкаруу. rowsКерек болсо атрибутун өзгөртүңүз .

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

Белгилөө кутучалары жана радиолор

Белгилөө кутучалары тизмедеги бир же бир нече варианттарды тандоо үчүн, ал эми радиолор көптөрдүн арасынан бир параметрди тандоо үчүн.

Демейки (жыйылган)


  1. <белги класс = "текшерүү кутусу" > 
  2.   <киргизүү түрү = "текшерүү" мааниси = "" >  
  3.   Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
  4. </label>
  5.  
  6. <белги класс = "радио" > 
  7.   <киргизүү түрү = "радио" аталышы = "optionsRadios" id = "optionsRadios1" мааниси = "option1" текшерилди >     
  8.   Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
  9. </label>
  10. <белги класс = "радио" > 
  11.   <киргизүү түрү = "радио" аталышы = "optionsRadios" id = "optionsRadios2" мааниси = "option2" >    
  12.   Экинчи вариант башка болушу мүмкүн жана аны тандоо биринчи вариантты тандоону жокко чыгарат
  13. </label>

Inline белги кутучалары

.inlineКлассты бир катар кутучаларга кошуңуз же башкаруу элементтери бир сапта пайда болот.

  1. <label class = "checkbox inline" > 
  2.   <киргизүү түрү = "текшерүү кутусу" id = "inlineCheckbox1" мааниси = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <киргизүү түрү = "текшерүү кутусу" id = "inlineCheckbox2" мааниси = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <киргизүү түрү = "текшерүү кутусу" id = "inlineCheckbox3" мааниси = "option3" > 3   
  9. </label>

Тандайт

multiple="multiple"Бир эле учурда бир нече опцияны көрсөтүү үчүн демейки опцияны колдонуңуз же a белгилеңиз.


  1. <тандоо>
  2.   <option> 1 </option>
  3.   <option> 2 </ option>
  4.   <option> 3 </ option>
  5.   <option> 4 </ option>
  6.   <option> 5 </ option>
  7. </select>
  8.  
  9. <тандоо бир нече = "бир нече" > 
  10.   <option> 1 </option>
  11.   <option> 2 </ option>
  12.   <option> 3 </ option>
  13.   <option> 4 </ option>
  14.   <option> 5 </ option>
  15. </select>

Форма башкаруу элементтерин кеңейтүү

Учурдагы браузер башкаруу элементтеринин үстүнө кошуп, Bootstrap башка пайдалуу форма компоненттерин камтыйт.

Алдын ала жана кошумча киргизилген киргизүүлөр

Текстке негизделген киргизүүгө чейин же андан кийин текстти же баскычтарды кошуңуз. Бул selectжерде элементтер колдоого алынбагандыгын эске алыңыз.

Демейки параметрлер

Киргизилген текстке текстти кошуу же кошуу үчүн ан .add-onжана inputэки класстын бирине ороп алыңыз.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span класс = "кошумча" > @ </span> 
  3.   <киргизүү класс = "span2" id = "prependedInput" түрү = "текст" толтургуч = "Колдонуучунун аты" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <киргизүү класс = "span2" id = "appendedInput " түрү = "текст" >   
  7.   <span класс = "кошумча" > .00 </span> 
  8. </div>

Комбинацияланган

.add-onКиргизүүнү алдына коюу жана кошуу үчүн класстарды жана эки инстанцияны колдонуңуз .

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "кошумча" > $ </span> 
  3.   <киргизүү класс = "span2" id = "appendedPrependedInput " түрү = "текст" >   
  4.   <span класс = "кошумча" > .00 </span> 
  5. </div>

Тексттин ордуна баскычтар

<span>Тексттин ордуна, .btnкиргизүүгө баскычты (же эки) тиркөө үчүн a колдонуңуз.

  1. <div class = "input-append" > 
  2.   <киргизүү класс = "span2" id = "appendedInputButton " түрү = "текст" >   
  3.   <баскыч класс = "btn" түрү = "баскыч" > Бар! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <киргизүү класс = "span2" id = "appendedInputButtons " түрү = "текст" >   
  3.   <button class = "btn" type = "button" > Издөө </button>  
  4.   <button class = "btn" type = "button" > Параметрлер </button>  
  5. </div>

Түймөктүн ачылуучу тизмелери

  1. <div class = "input-append" > 
  2.   <киргизүү класс = "span2" id = "appendedDropdownButton " түрү = "текст" >   
  3.   <div класс = "btn-group" > 
  4.     <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
  5.       Акция
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "ылдый түшүүчү меню" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div класс = "btn-group" > 
  3.     <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
  4.       Акция
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "ылдый түшүүчү меню" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <киргизүү класс = "span2" id = "prependedDropdownButton" түрү = "текст" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div класс = "btn-group" > 
  3.     <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
  4.       Акция
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "ылдый түшүүчү меню" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <киргизүү класс = "span2" id = "appendedPrependedDropdownButton " түрү = "текст" >   
  12.   <div класс = "btn-group" > 
  13.     <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
  14.       Акция
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "ылдый түшүүчү меню" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Издөө формасы

  1. <форма класс = "форма-издөө" > 
  2.   <div class = "input-append" > 
  3.     <киргизүү түрү = "текст" класс = "span2 издөө-суроо" >  
  4.     <button type = "тапшыртуу " класс = "btn" > Издөө </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "тапшыртуу " класс = "btn" > Издөө </button>  
  8.     <киргизүү түрү = "текст" класс = "span2 издөө-суроо" >  
  9.   </div>
  10. </form>

Өлчөмдү көзөмөлдөө

Салыштырмалуу өлчөм класстарын колдонуңуз .input-largeже класстарды колдонуу менен киргизген нерселериңизди тор мамычасынын өлчөмдөрүнө дал келтириңиз .span*.

Деңгээлдеги киргизүүлөрдү бөгөттөө

Кандайдыр бир <input>же <textarea>элементти блок деңгээлиндеги элементке окшоштуруңуз.

  1. <киргизүү класс = "киргизүү-блок-деңгээл" түрү = "текст" толтургуч = ".киргизүү-блок-деңгээл" >

Салыштырмалуу өлчөм

  1. <киргизүү класс = "киргизүү-мини" түрү = "текст" толтургуч = ".киргизүү-мини" >   
  2. <киргизүү класс = "киргизүү-кичинекей" түрү = "текст" толтургуч = ".input-кичинекей" >   
  3. <киргизүү класс = "киргизүү-орто" түрү = "текст" толтургуч = ".input-medium" >   
  4. <киргизүү класс = "киргизүү-чоң" түрү = "текст" толтургуч = ".input-large" >   
  5. <киргизүү класс = "input-xlarge" түрү = "текст" толтургуч = ".input-xlarge" >   
  6. <киргизүү класс = "input-xxlarge" түрү = "текст" толтургуч = ".input-xxlarge" >

Көңүл бургула!Келечектеги версияларда биз баскычтардын өлчөмүнө дал келүү үчүн бул салыштырмалуу киргизүү класстарын колдонууну өзгөртөбүз. Мисалы, .input-largeкиргизүүнүн толтуруу жана шрифт өлчөмүн жогорулатат.

Тор өлчөмү

Тор мамычаларынын бирдей өлчөмдөрүнө дал келген киргизүүлөр үчүн үчүн .span1колдонуңуз ..span12

  1. <киргизүү класс = "span1" түрү = "текст" толтургуч = ".span1" >   
  2. <киргизүү класс = "span2" түрү = "текст" толтургуч = ".span2" >   
  3. <киргизүү класс = "span3" түрү = "текст" толтургуч = ".span3" >   
  4. < классты тандоо = "span1" > 
  5.   ...
  6. </select>
  7. < классты тандоо = "span2" > 
  8.   ...
  9. </select>
  10. < классты тандоо = "span3" > 
  11.   ...
  12. </select>

Ар бир сапка бир нече тор киргизүү үчүн, туура аралык үчүн өзгөрткүч классын колдонуңуз.controls-row . Ал ак мейкиндикти жыйыштыруу үчүн киргизүүлөрдү калкып чыгат, туура чектерди орнотот жана флотту тазалайт.

  1. <div class = "controls" > 
  2.   <киргизүү класс = "span5" түрү = "текст" толтургуч = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <киргизүү класс = "span4" түрү = "текст" толтургуч = ".span4" >   
  6.   <киргизүү класс = "span1" түрү = "текст" толтургуч = ".span1" >   
  7. </div>
  8. ...

Түзөтүлбөгөн киргизүүлөр

Дайындарды форманын чыныгы белгилерин колдонбостон түзөтүүгө мүмкүн болбогон формада көрсөтүңүз.

Бул жерде кээ бир баалуулуктар бар 
  1. <span class = "input-xlarge uneditable-input" > Бул жерде кээ бир маани </span>

Форма аракеттери

Форманы аракеттер тобу (баскычтар) менен бүтүрүңүз. a ичинде жайгаштырылганда .form-horizontal, баскычтар автоматтык түрдө форманы башкаруу элементтери менен катар чегинип калат.

  1. <div класс = "форма-иш-аракеттер" > 
  2.   <button type = "submit" class = "btn btn-primary" > Өзгөртүүлөрдү сактоо </button>  
  3.   <button type = "button" class = "btn" > Жокко чыгаруу </button>  
  4. </div>

Жардам тексти

Форма башкаруу элементтеринин айланасында пайда болгон жардам тексти үчүн саптык жана блок деңгээлинде колдоо.

Inline жардам

Inline жардам тексти 
  1. <киргизүү түрү = "текст" ><span class = "help-inline" > Inline жардам тексти </span>

Блок жардам

Жардам текстинин узунураак блогу, ал жаңы сапка бөлүнөт жана бир саптан ары да созулушу мүмкүн. 
  1. <киргизүү түрү = "текст" ><span класс = "жардам-блок" > Жардам текстинин узунураак блогу, ал жаңы сапка бөлүнөт жана бир саптан тышкары дагы узартылышы мүмкүн. </span>

Форманын башкаруу абалы

Колдонуучуларга же конокторго форманы башкаруу элементтери жана энбелгилери боюнча негизги жооп кайтаруу абалы менен пикир билдириңиз.

Фокус киргизүү

outlineКээ бир форма башкаруу элементтериндеги демейки стилдерди алып салып, box-shadowанын ордуна a колдонобуз :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "текст" мааниси = "Бул багытталган..." >

Өчүрүлгөн киргизүүлөр

disabledКолдонуучунун киргизүүсүнө жол бербөө жана бир аз башкача көрүнүштү баштоо үчүн киргизүүгө атрибут кошуңуз .

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Бул жерде өчүрүлгөн киргизүү..." өчүрүлгөн >

Текшерүү мамлекеттери

Bootstrap ката, эскертүү, маалымат жана ийгилик билдирүүлөрү үчүн текшерүү стилдерин камтыйт. Колдонуу үчүн, айланага тиешелүү классты кошуңуз .control-group.

Бир жерден ката кеткен болушу мүмкүн
Катаны оңдоңуз
Колдонуучунун аты алынат
Woohoo! 
  1. <div class = "контролдоочу топтун эскертүүсү" > 
  2.   <label class = "control-label" for = "inputWarning" > Эскертүү менен киргизүү </label>  
  3.   <div class = "controls" > 
  4.     <киргизүү түрү = "текст" id = "inputWarning" >  
  5.     <span class = "help-inline" > Бир жерден ката кетти окшойт </span> 
  6.   </div>
  7. </div>
  8. <div class = "контролдоо тобунун катасы" > 
  9.   <label class = "control-label" for = "inputError" > Ката менен киргизүү </label>  
  10.   <div class = "controls" > 
  11.     <киргизүү түрү = "текст" id = "inputError" >  
  12.     <span class = "help-inline" > Катаны оңдоңуз </span> 
  13.   </div>
  14. </div>
  15. <div class = "контролдук топтун ийгилиги" > 
  16.   <label class = "control-label" for = "inputSuccess" > Киргизүү ийгиликтүү </label>  
  17.   <div class = "controls" > 
  18.     <киргизүү түрү = "текст" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Buttons

Демейки баскычтар

.btnБаскыч стилдери класс колдонулган бардык нерсеге колдонулушу мүмкүн . <a>Бирок, адатта, эң жакшы рендеринг үчүн буларды гана жана <button>элементтерге колдонгуңуз келет .

баскыч класс = "" Description
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>  
  3.   <button class = "btn btn-large" type = "баскыч" > Чоң баскыч </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>  
  11.   <button class = "btn btn-small" type = "button" > Чакан баскыч </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "баскыч" > Мини баскыч </button>  
  15.   <button class = "btn btn-mini" type = "баскыч" > Мини баскыч </button>  
  16. </p>

кошуу менен блок деңгээлиндеги баскычтарды түзүңүз - ата-эненин толук туурасын камтыган баскычтар .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "баскыч" > Блоктун деңгээли баскычы </button>  
  2. <button class = "btn btn-large btn-block" type = "баскыч" > Блок деңгээл баскычы </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. <баскыч түрү = "баскыч" класс = "btn btn-large btn-негизги өчүрүлгөн" disabled = "өчүрүлгөн" > Негизги баскыч </button>   
  2. <баскыч түрү = "баскыч" класс = "btn btn-large" өчүрүлгөн > баскыч </ баскыч>

Бир класс, бир нече тег

.btnКлассты <a>, <button>, же <input>элементте колдонуңуз .

Шилтеме 
  1. <a class = "btn" href = "" > Шилтеме </a>  
  2. <button class = "btn" type = "тапшыруу" > баскыч </button>  
  3. <киргизүү класс = "btn" түрү = "баскычы" мааниси = "киргизүү" >   
  4. <киргизүү класс = "btn" түрү = "тапшыруу" мааниси = "Тапшыруу" >

Мыкты тажрыйба катары, браузерлер аралык рендерингдин дал келишин камсыз кылуу үчүн контекстиңиздин элементин дал келтирүүгө аракет кылыңыз. Эгер сизде болсо input, баскычыңыз <input type="submit">үчүн колдонуңуз.

Сүрөттөр

<img>Каалаган долбоордо сүрөттөрдү оңой стилдөө үчүн элементке класстарды кошуңуз .

  1. <img src = "..." класс = "img-тегеректелген" >  
  2. <img src = "..." класс = "img-circle" >  
  3. <img src = "..." класс = "img-polaroid" >

Көңүл бургула! .img-roundedжана колдоонун .img-circleжоктугунан IE7-8 иштебейт border-radius.

Glyphicons менен иконалар

Икон глифтери

Glyphicons тарабынан берилген спрайт түрүндөгү 140 сүрөтчө, кочкул боз (демейки) жана ак түстө жеткиликтүү .

  • иконка-айнек
  • icon-музыка
  • icon-издөө
  • icon-конверт
  • икона-жүрөк
  • икон-жылдыз
  • иконка-жылдыз-бош
  • icon-user
  • икон-фильм
  • чоң иконка
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-алып салуу
  • сөлөкөтү-кичирейтүү
  • icon-кичирейтүү
  • сүрөтчө өчүрүү
  • белги-сигнал
  • icon-cog
  • icon-таштанды
  • icon-үй
  • icon-файл
  • иконка-убакыт
  • икон-жол
  • icon-download-alt
  • сөлөкөтү-жүктөө
  • сүрөтчө-жүктөө
  • icon-inbox
  • иконка-ойнотуу-тегерек
  • icon-кайталоо
  • icon-жаңылоо
  • icon-list-alt
  • icon-lock
  • icon-желек
  • icon-наушник
  • иконка-том-өчүрүү
  • иконка-көлөмүн азайтуу
  • икончанын көлөмүн жогорулатуу
  • icon-qrcode
  • icon-штрих-код
  • icon-тег
  • icon-тегдер
  • икон-китеп
  • сөлөкөтү-кыстарма
  • icon-басма
  • иконка-камера
  • icon-шрифт
  • сөлөкөтү калың
  • иконка-курсив
  • icon-тексттин бийиктиги
  • иконка-текст-эн
  • сөлөкөтү-тегиздөө-солго
  • icon-teng-center
  • сөлөкөтү-түздөө-оңго
  • icon-тегиздөө-актоо
  • сөлөкөт тизмеси
  • icon-indent-сол
  • icon-indent-оң
  • icon-facetime-video
  • иконка-сүрөт
  • иконка-карандаш
  • icon-карта-маркер
  • сөлөкөтү тууралоо
  • сөлөкөт түсү
  • icon-edit
  • сүрөтчө бөлүшүү
  • icon-текшерүү
  • иконка-жылуу
  • иконка-кадам артка
  • сөлөкөтү-тез-артка
  • иконка-артка
  • иконка ойноо
  • icon-тыныгуу
  • стоп-стоп
  • сүрөтчө алдыга
  • сөлөкөтү-тез алдыга
  • иконка-кадам алдыга
  • icon-чыгаруу
  • icon-chevron-сол
  • icon-chevron-оңго
  • icon-плюс-белгиси
  • icon-minus-белгиси
  • icon-алып салуу-белгиси
  • icon-ok-белгиси
  • icon-суроо белгиси
  • icon-info-белгиси
  • icon-скриншот
  • icon-чыгаруу-тегерек
  • icon-ok-circ
  • icon-ban-circle
  • сөлөкөтү-жебе-сол
  • сөлөкөтү-жебе-оңго
  • сөлөкөтү-жогору
  • сөлөкөтү-жебе-ылдый
  • icon-share-alt
  • icon-өлчөмүн-толук
  • иконка-размер-кичине
  • icon-plus
  • icon-минус
  • icon-жылдызча
  • icon-илеп белгиси
  • белги-белек
  • icon-жалбырак
  • иконка-от
  • иконка-көз ачык
  • icon-göz-жакын
  • icon-эскертүү белгиси
  • икон-учуктун
  • icon-календар
  • icon-кокустук
  • icon-comment
  • иконка-магнит
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-сауда-саба
  • icon-папка-жабуу
  • icon-папка-ачык
  • icon-өлчөмүн-вертикал
  • icon-өлчөмүн-горизонталдуу
  • icon-hdd
  • icon-bullhorn
  • icon-коңгуроо
  • icon-сертификат
  • сөлөкөтү бармак жогору
  • icon-бармак-ылдый
  • сүрөтчө-кол-оң
  • иконка-кол-сол
  • сөлөкөтү көтөрүү
  • сөлөкөтү-ылдый
  • сөлөкөтү-тегерек-жебе-оңго
  • сөлөкөтү-тегерек-жебе-сол
  • сөлөкөтү-тегерек-жебе-өйдө
  • иконка-тегерек-жебе-ылдый
  • сөлөкөтү-глобус
  • иконка ачкычы
  • icon-милдеттери
  • icon-фильтр
  • иконка-портфель
  • сөлөкөтү-толук экран

Glyphicons атрибуту

Glyphicons Halflings адатта акысыз жеткиликтүү эмес, бирок Bootstrap менен Glyphicons жаратуучуларынын ортосундагы макулдашуу муну иштеп чыгуучулар катары сизге эч кандай чыгымсыз мүмкүн кылды. Рахмат катары, биз сизден Glyphicons'ка кошумча шилтемени колдонууну суранабыз .

Кантип колдонуу керек

Бардык иконалар <i>префикс менен уникалдуу классы бар тегди талап кылат icon-. Колдонуу үчүн, төмөнкү кодду каалаган жерге коюңуз:

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

Ошондой эле бир кошумча класс менен даяр болгон тескери (ак) иконалар үчүн жеткиликтүү стилдер бар. Биз бул классты багыттоо жана ылдый түшүүчү шилтемелер үчүн кыймылдаткыч жана жигердүү абалдар боюнча атайын киргизебиз.

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

Көңүл бургула!Тексттин саптарынын жанында, баскычтардагы же навигация шилтемелериндегидей, <i>туура аралык үчүн тегден кийин боштук калтырууну унутпаңыз.

Иконанын мисалдары

Аларды баскычтарда, куралдар тилкеси үчүн баскыч топторунда, навигацияда же алдын ала форма киргизүүлөрүндө колдонуңуз.

Buttons

Баскыч куралдар панелиндеги баскычтар тобу
  1. <div класс = "btn-куралдар тилкеси" > 
  2.   <div класс = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </div>
Баскычтар тобунда ылдый түшүүчү
Колдонуучу 
  1. <div класс = "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 = "ылдый түшүүчү меню" > 
  5.     <li><a href = "#" ><i class = "icon-карандаш" ></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 класс = "бөлүүчү" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Админ кылуу </a></li>  
  10.   </ul>
  11. </div>
Кичинекей баскыч
  1. <a class = "btn btn-small" 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 = "контролдоо тобу" > 
  2.   <label class = "control-label" for = "inputIcon" > Электрондук почта дареги </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span класс = "кошумча" ><i класс = "сөлөкөт-конверт" ></i></span>  
  6.       <киргизүү класс = "span2" id = "inputIcon" түрү = "текст" >   
  7.     </div>
  8.   </div>
  9. </div>