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 class="lead">...</p>

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

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

Баса

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

<small>

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

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

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

Bold

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

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

<strong>калың текст катары көрсөтүлгөн</strong>

курсив

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

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

<em>курсив текст катары көрсөтүлгөн</em>

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

Тегиздөө класстары

Текстти тегиздөө класстары менен компоненттерге текстти оңой кайра тегиздөө.

Солго тегизделген текст.

Ортого тегизделген текст.

Оңго тегизделген текст.

<p class="text-left">Солго тегизделген текст.</p>
<p class="text-center">Борборго тегизделген текст.</p>
<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.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, Tortor Mauris nibh.</p>
<p class="text-warning">Этиам сизди колдонот.</p>
<p class="text-error">Donec ullamcorper nulla эмес, auctor fringilla.</p>
<p class="text-info">Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Дүйнөлүк, эч кандай кыйынчылыксыз, эч кандай порттитор болушу мүмкүн эмес.</p>

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

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

<abbr>

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

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

<abbr title="attribute">аттр</abbr>

<abbr class="initialism">

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

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

<abbr title="Гипертекстти белгилөө тили" class="initialism">HTML</abbr>

Даректер

Жакынкы ата-баба же бүткүл иш органы үчүн байланыш маалыматын көрсөтүңүз.

<address>

Бардык саптарды менен бүтүрүү менен форматтоо сакталсын <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Толук аты-жөнү
[email protected] 
<дареги>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<дареги>
  <strong>Толук аты-жөнү</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes

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

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

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

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

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

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

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

Булакты атоо

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

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

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

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

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

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

Булак аталышында белгилүү бирөө 
<blockquote class="pull-right">
  ...
</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
<ul>
  <li>...</li>
</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
<ol>
  <li>...</li>
</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
<ul class="unstyled">
  <li>...</li>
</ul>

Inline

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="inline">
  <li>...</li>
</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. 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</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. 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Code

Inline

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

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

Негизги блок

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

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

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

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

Таблицалар

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

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

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

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

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

.table-striped

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

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

.table-bordered

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

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

.table-hover

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

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

.table-condensed

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

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

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

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

Класс 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 Ырастоо үчүн чалыңыз 
...
  <tr class="ийгилик">
    <td>1</td>
    <td>ТБ - Ай сайын</td>
    <td>01/04/2012</td>
    <td>Кабыл алынган</td>
  </tr>
...

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

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

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

Формалар

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

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

Легенда Бул жерде блок деңгээлиндеги жардам текстинин мисалы. 
<форма>
  <талаа топтому>
    <legend>Легенда</legend>
    <label>Энбелгинин аты</label>
    <input type="text" placeholder="Бир нерсени териңиз...">
    <span class="help-block">Блок деңгээлиндеги жардам текстинин мисалы бул жерде.</span>
    <label class="checkbox">
      <input type="checkbox"> Мени текшерип көрүңүз
    </label>
    <button type="submit" class="btn">Тапшыруу</button>
  </fieldset>
</form>

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

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

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

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

<form class="form-search">
  <киргизүү түрү = "текст" класс = "киргизүү-орто издөө-суроо">
  <button type="submit" class="btn">Издөө</button>
</form>

Inline форма

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

<form class="form-inline">
  <киргизүү түрү = "текст" класс = "киргизүү-кичинекей" толтургуч = "Электрондук почта">
  <киргизүү түрү = "сырсөз" класс = "киргизүү-кичинекей" толтургуч = "Сырсөз">
  <label class="checkbox">
    <input type="checkbox"> Мени эсте
  </label>
  <button type="submit" class="btn">Кирүү</button>
</form>

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

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

  • .form-horizontalФормага кошуңуз
  • Энбелгилерди жана башкаруу элементтерин ороп алыңыз.control-group
  • .control-labelЭнбелгиге кошуу
  • .controlsТуура тегиздөө үчүн бардык байланышкан башкаруу элементтерин ороп алыңыз
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Электрондук почта</label>
    <div class="controls">
      <киргизүү түрү="текст" id="inputEmail" толтуруучусу="Электрондук почта">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Сырсөз</label>
    <div class="controls">
      <киргизүү түрү="сырсөз" id="inputPassword" толтуруучусу="Сырсөз">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Мени эсте
      </label>
      <button type="submit" class="btn">Кирүү</button>
    </div>
  </div>
</form>

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

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

Киргизүүлөр

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

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

<input type="text" placeholder="Текст киргизүү">

Textarea

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

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

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

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

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


<label class="checkbox">
  <киргизүү түрү = "текшерүү кутусу" мааниси = "">
  Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
</label>

<label class="radio">
  <киргизүү түрү="радио" аталышы="optionsRadios" id="optionsRadios1" мааниси="option1" текшерилди>
  Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
</label>
<label class="radio">
  <киргизүү түрү="радио" аталышы="optionsRadios" id="optionsRadios2" мааниси="option2">
  Экинчи вариант башка болушу мүмкүн жана аны тандоо биринчи вариантты тандоону жокко чыгарат
</label>

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

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

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Тандайт

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


<тандоо>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<бир нече = "бир нече"> тандоо
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

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

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

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

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

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

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

@

.00 
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Колдонуучунун аты">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

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

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

$ .00 
<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

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

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

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Барыңыз!</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Издөө</button>
  <button class="btn" type="button">Параметрлер</button>
</div>

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

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Акция
      <span class="caret"></span>
    </button>
    <ul class=" ылдый түшүүчү меню ">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Акция
      <span class="caret"></span>
    </button>
    <ul class=" ылдый түшүүчү меню ">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Акция
      <span class="caret"></span>
    </button>
    <ul class=" ылдый түшүүчү меню ">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="текст">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Акция
      <span class="caret"></span>
    </button>
    <ul class=" ылдый түшүүчү меню ">
      ...
    </ul>
  </div>
</div>

Сегменттелген ачылуучу топтор

<форма>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <киргизүү түрү="текст">
  </div>
  <div class="input-append">
    <киргизүү түрү="текст">
    <div class="btn-group">...</div>
  </div>
</form>

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

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Издөө</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Издөө</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

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

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

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

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

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

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

<киргизүү классы = "киргизүү-мини" түрү = "текст" толтургуч = ".киргизүү-мини">
<киргизүү классы="кирүү-кичинекей" түрү="текст" толтуруучусу=".кирүү-кичинекей">
<input class="input-medium" type="text" placeholder=".input-medium">
<киргизүү классы="киргизүү-чоң" түрү="текст" толтуруучусу=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

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

Тор өлчөмү

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

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<классты тандоо="span1">
  ...
</select>
<классты тандоо="span2">
  ...
</select>
<классты тандоо="span3">
  ...
</select>

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

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

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

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

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

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

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

<div class="form-action">
  <button type="submit" class="btn btn-primary">Өзгөртүүлөрдү сактоо</button>
  <button type="button" class="btn">Жокко чыгаруу</button>
</div>

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

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

Inline жардам

Inline жардам тексти 
<input type="text"><span class="help-inline">Интернет жардам тексти</span>

Блок жардам

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

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

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

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

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

<input class="input-xlarge" id="focusedInput" type="text" value="Бул багытталган...">

Жараксыз киргизүүлөр

менен демейки браузер функциясы аркылуу стил киргизүү :invalid. А көрсөтүңүз, эгер талаа милдеттүү эмес болсо, атрибутун typeкошуңуз жана (эгер бар болсо) көрсөтүңүз .requiredpattern

Бул CSS псевдо селекторлору колдоого алынбагандыктан, Internet Explorer 7-9 версияларында жеткиликтүү эмес.

<input class="span3" type="email" талап кылынат>

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

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

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

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

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

Бир жерден ката кеткен болушу мүмкүн
Катаны оңдоңуз
Колдонуучунун аты алынат
Woohoo! 
<div class="контролдук топтун эскертүүсү">
  <label class="control-label" for="inputWarning">Эскертүү менен киргизүү</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Бир жерден ката кетти окшойт</span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label" for="inputInfo">Input with info</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">Username is already taken</span>
  </div>
</div>

<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Ууууу!</span>
  </div>
</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 Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Images

Add classes to an <img> element to easily style images in any project.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icons by Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

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

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
Dropdown in a button group
User 
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
Button sizes
Star Star Star 
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Электрондук почтанын дареги</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>