Башлыклар

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

h1. 1 нче баш

h2. 2 нче баш

h3. 3 нче баш

h4. 4 нче баш

h5. 5 нче баш

h6. 6 нчы баш

Тән күчермәсе

Bootstrap - ның глобаль дефолты 14px , 20pxfont-size белән . Бу һәм барлык абзацларда кулланыла. Моннан тыш, (абзацлар) аларның сызык биеклегенең ярты маржасын алалар (килешү буенча 10px).line-height<body><p>

Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Nullam id dolor id nibh ultricies транспорт.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, коммерция булмаган луктус, портитор лигула, ec lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam diamet eget risus varius blandit амет булмаган магнит утыра. Donec id elit non mi porta gravida eget metus. Duis mollis, коммерция булмаган луктус, портитор лигула, ec lacinia odio sem nec elit.

<p> ... </p>

Куркынычсызлык

Параграфны өстәп аерылып торыгыз .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor аукторы. Duis mollis, коммерция булмаган люктус.

<p class = "lead" > ... </p>

Кечкенә белән төзелгән

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

Басым

HTMLиңел стильләр белән HTML'ның төп басым тэгларын кулланыгыз.

`<small>`

Эчтәлекне яки текст блокларын ассызыклау өчен, кечкенә тегны кулланыгыз.

Бу текст сызыгы яхшы басма кебек каралачак.

<p> <small> Бу текст сызыгы яхшы басма кебек кабул ителергә тиеш. </small> </p>

Калын

Авыррак шрифтлы текстның фрагментына басым ясау өчен.

Түбәндәге текстның фрагменты калын текст рәвешендә күрсәтелә .

<strong> калын текст итеп күрсәтелә </strong>

Италия

Италия белән текстның фрагментына басым ясау өчен.

Түбәндәге текстның фрагменты итализацияләнгән текст рәвешендә күрсәтелә .

<em> итализацияләнгән текст </em>

Идарә итә!<b>HTML5'та кулланырга ирек бирегез <i>. <b>сүз яки фразеологизмнарны яктырту өчен, өстәмә әһәмият бирмичә <i>, күбесенчә тавыш, техник терминнар һ.б.

Тигезләү класслары

Текстны тигезләү класслары булган компонентларга җиңел итеп күчерегез.

Сул тигезләнгән текст.

Centerзәк тигезләнгән текст.

Уң тигезләнгән текст.

<p class = "text-left" > Сул тигезләнгән текст. </p> 
<p class = "text-center" > Centerзәк тигезләнгән текст. </p> 
<p class = "text-right" > Уң тигезләнгән текст. </p>

Дәресләргә басым ясау

Мәгънәне төсләр аша җиткерү файдалы класслар белән җиткерегез.

Fusce dapibus, tellus ac cursus commodo, җәберләүче mauris nibh.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

<p class = "сүндерелгән" > Fusce dapibus, tellus ac cursus commodo, җәберләүче mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem maleuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Энеан лео квам. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est commodo luctus, nisi erat porttitor ligula. </p>

Кыскартулар

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

`<abbr>`

Кыскартуның озын өстендә киңәйтелгән текст өчен titleатрибутны кертегез.

Сыйфат атрибутының кыскартылышы .

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

`<abbr class="initialism">`

.initialismБераз кечерәк шрифт өчен кыскартуга өстәгез .

Киселгән икмәктән HTML иң яхшы әйбер.

<abbr title = "HyperText Markup Language" class = "инициализм" > HTML </abbr>

Адреслар

Иң якын бабалар яки бөтен эш органнары өчен контакт мәгълүматларын тәкъдим итегез.

`<address>`

Барлык юлларны тәмамлап форматлауны саклагыз <br>.

Твиттер , Inc.
_
_

Тулы исем
[email protected]

<адрес>
  <strong> Twitter, Inc. </strong> <br>
  795 Фольсом ав., Суит 600 <br>
  Сан-Франциско, Калифорния 94107 <br>
  <abbr title = "Телефон" > П: </abbr> (123) 456-7890 
</address>
 
<адрес>
  <strong> Тулы исем </strong> <br>
  <a href = "mailto:#"> [email protected] </a> _ 
</address>

Блоккотлар

Документыгыздагы бүтән чыганактан эчтәлек блокларын китерү өчен.

Килешү блоккоте

<blockquote>HTMLәрбер цитата итеп урыгыз . Туры цитаталар өчен без а <p>.

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

<blockquote>
  <p> Лорем ипсум долор амет утыра, консексетур элитасы. Integer posuere ante erat. </p>
</blockquote>

Блоккот вариантлары

Стандарт блоккотта гади үзгәрешләр өчен стиль һәм эчтәлек үзгәрә.

Чыганакны атау

<small>Чыганакны ачыклау өчен тег өстәгез . Чыганакның исемен урап алыгыз <cite>.

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.
Чыганак исемендә танылган кеше

<blockquote>
  <p> Лорем ипсум долор амет утыра, консексетур элитасы. Integer posuere ante erat. </p>
  <small> Танылган кеше <cite title = "Чыганак исеме" > Чыганак исеме </cite> </small> 
</blockquote>

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

.pull-rightЙөзелгән, уң тигез блоккот өчен кулланыгыз .

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.
Чыганак исемендә танылган кеше

<blockquote class = "тарту-уң" > 
  ...
</blockquote>

Исемлекләр

Тәртипсез

Заказ ачыктан-ачык мөһим булмаган әйберләр исемлеге .

Лорем ипсум долор амет утыра
Consectetur adipiscing elit
Массадагы тулы молести лорем
Претиум нисл аликетында фасилис
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Пурус содалес ультрикасы
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан утыра
Порттор лоремасын алыгыз

<ul>
  <li> ... </li>
</ul>

Заказлы

Заказ ачыктан-ачык мөһим булган әйберләр исемлеге .

Лорем ипсум долор амет утыра
Consectetur adipiscing elit
Массадагы тулы молести лорем
Претиум нисл аликетында фасилис
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Энеан утыра
Порттор лоремасын алыгыз

<ol>
  <li> ... </li>
</ol>

Стильсез

list-styleИсемлек әйберләренә килешенгән һәм сул тактаны бетерегез (шунда ук балалар гына).

Лорем ипсум долор амет утыра
Consectetur adipiscing elit
Массадагы тулы молести лорем
Претиум нисл аликетында фасилис
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Пурус содалес ультрикасы
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан утыра
Порттор лоремасын алыгыз

<ul class = "стилизацияләнмәгән" > 
  <li> ... </li>
</ul>

Киң төзелештә

Барлык исемлек әйберләрен дә бер сызыкка урнаштырыгыз inline-block.

Лорем ипсум
Phasellus iaculis
Nulla volutpat

<ul class = "сызык" > 
  <li> ... </li>
</ul>

Тасвирлау

Аларга бәйләнгән тасвирламалар белән терминнар исемлеге.

Тасвирлау исемлекләре: Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Эвизмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida eget metus.
Малесуада портасы: Etiam porta sem maleuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Горизонталь тасвирлау

Терминнарны һәм тасвирламаларны янәшә тезегез <dl>.

Тасвирлау исемлекләре: Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Эвизмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida eget metus.
Малесуада портасы: Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentation massa justo sit amet risus.

<dl класс = "dl-горизонталь" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Идарә итә!Горизонталь тасвирлау исемлеге сул багана төзәтмәсенә туры килерлек терминнарны кисәр text-overflow. Таррак күренешләрдә алар килешү буенча урнаштырылган макетка үзгәрәчәкләр.

Киң төзелештә

Кодның сызыкларын урыгыз <code>.

Мисал өчен, <section>сызык итеп төрергә кирәк.

Мәсәлән , <код > & lt ; & gt ; </ code > бүлеге сызыкча төрелгән булырга тиеш .

Төп блок

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

<p> Монда текст үрнәге ... </p>

<pre>
  & lt; p & gt; Монда үрнәк текст ... & lt; / p & gt;
</pre>

Идарә итә!Кодны <pre>тэглар эчендә мөмкин кадәр сул якка саклагыз; ул барлык кыстыргычларны күрсәтәчәк.

Сез өстәмә рәвештә .pre-scrollableмаксималь биеклекне 350px куячак һәм у күчәре әйләндерү тактасын тәэмин итә торган классны өсти аласыз.

Килешү стильләре

Төп стиллау өчен - җиңел паддер һәм горизонталь бүлүчеләр - төп классны .tableтеләсә кемгә өстәгез <table>.

#	Исем	Фамилия	Кулланучы исеме
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри	Кош	@twitter

<өстәл сыйныфы = "таблица" > 
  …
</table>

Өстәмә дәресләр

Төп класска түбәндәге классларның теләсә кайсысын өстәгез .table.

`.table-striped`

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

#	Исем	Фамилия	Кулланучы исеме
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри	Кош	@twitter

<өстәл классы = "өстәл сызыгы" > 
  …
</table>

`.table-bordered`

Өстәлгә чикләр һәм түгәрәк почмаклар өстәгез.

#	Исем	Фамилия	Кулланучы исеме
1	Билге	Отто	@mdo
1	Билге	Отто	@getbootstrap
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

<өстәл класы = "өстәл өстәле белән чикләнгән" > 
  …
</table>

`.table-hover`

А эчендә өстәл рәтләрендә йөрү халәтен рөхсәт итегез <tbody>.

#	Исем	Фамилия	Кулланучы исеме
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

<өстәл классы = "өстәл өстәле" > 
  …
</table>

`.table-condensed`

Күзәнәк такталарын яртыга кисеп, таблицаларны тагын да тыгызрак ясый.

#	Исем	Фамилия	Кулланучы исеме
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

<өстәл класы = "өстәл өстәл-конденсацияләнгән" > 
  …
</table>

Өстәмә рәт класслары

Өстәл рәтләренә төсле класслар кулланыгыз.

Класс	Тасвирлау
`.success`	Уңышлы яки уңай эшне күрсәтә.
`.error`	Куркыныч яки потенциаль тискәре эшне күрсәтә.
`.warning`	Игътибар кирәк булган кисәтүне күрсәтә.
`.info`	Килешү стильләренә альтернатива буларак кулланыла.

#	Продукция	Түләү	Статус
1	Туберкулез - ай саен	01/04/2012	Расланган
2	Туберкулез - ай саен	02/04/2012	Баш тартты
3	Туберкулез - ай саен	03/04/2012	Көтелгән
4	Туберкулез - ай саен	04/04/2012	Раслау өчен шалтыратыгыз

...
  < tr класс = "уңыш" >
    <td> 1 < / td>
    <td> ТБ - айлык </ td >
    < td > 01/04/2012 < / td >
    <td> расланган </ td >
  </ tr >
...

Таблицаны билгеләү

Ярдәмләнгән HTML элементлары исемлеге һәм аларны ничек кулланырга кирәк.

Тег	Тасвирлау
`<table>`	Таблицаны форматта күрсәтү өчен элементны төрү
`<thead>`	`<tr>`Өстәл баганаларын билгеләргә өстәл башы рәтләре өчен контейнер элементы
`<tbody>`	`<tr>`Өстәл тәнендәге контейнер элементы
`<tr>`	Бер рәттә барлыкка килгән өстәл күзәнәкләре ( `<td>`яки ) өчен контейнер элементы`<th>`
`<td>`	Килешү өстәл шакмаклары
`<th>`	Колонка өчен махсус өстәл шакмаклары (яки рәт, масштабка һәм урнаштыруга карап)
`<caption>`	Таблицаның нинди булуын тасвирлау яки кыскача мәгълүмат, аеруча экран укучылары өчен файдалы

<таблица>
  <caption> ... </caption>
  <баш>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Килешү стильләре

Индивидуаль форма контроллеры стилизация ала, ләкин билгеле бер төп класссыз <form>яисә зур үзгәрешләр. Форма контроле өстендә тупланган, сул як ярлыклы нәтиҗәләр.

<форма>
  <кыры>
    <legend> Легенда </legend>
    <label> Ярлыкның исеме </label>
    <кертү тибы = "текст" урын хуҗасы = "Нәрсәдер языгыз ..." >  
    <span class = "help-block" > Монда блок дәрәҗәсендәге ярдәм тексты. </span> 
    <label class = "checkbox" > 
      <кертү тибы = "пункт" > Мине тикшерегез 
    </label>
    <төймә тибы = "тапшыру" класс = "btn" > Тапшыру </button>  
  </fieldset>
</form>

Ихтимал макетлар

Bootstrap белән кертелгән, гомуми куллану очраклары өчен өч өстәмә форма.

Эзләү формасы

.form-searchФормага һәм өстәмә түгәрәк текст кертү өчен .search-queryөстәгез .<input>

<форма класс = "форма-эзләү" > 
  <кертү тибы = "текст" класс = "кертү-урта эзләү-сорау" >  
  <төймә тибы = "тапшыру" класс = "btn" > Эзләү </button>  
</form>

Эчке форма

.form-inlineКомпакт макеты өчен сул як ярлыкларга һәм эчке блок контроллерына өстәгез .

<форма класс = "форма-сызык" > 
  <кертү тибы = "текст" класс = "кертү-кечкенә" урын хуҗасы = "Электрон почта" >   
  <кертү тибы = "серсүз" класс = "кертү-кечкенә" урын хуҗасы = "Серсүз" >   
  <label class = "checkbox" > 
    <кертү тибы = "пункт" > Мине исегездә тотыгыз 
  </label>
  <төймә тибы = "тапшыру" класс = "btn" > Керү </button>  
</form>

Горизонталь форма

Ярлыкларны уң тигезләгез һәм контроль белән бер сызыкта күренсен өчен сулга йөзегез. Килешү формасыннан иң билгеле үзгәртүләр таләп ителә:

.form-horizontalФормага өстәгез
Ярлыкларны һәм контроль әйберләрне урыгыз.control-group
.control-labelЯрлыкка өстәргә
.controlsТиешле тигезләү өчен теләсә нинди контроль контрольне урыгыз

<форма класс = "форма-горизонталь" > 
  <div class = "контроль-төркем" > 
    <label class = "control-label" өчен = "inputEmail" > электрон почта </label>  
    <div class = "контроль" > 
      <кертү тибы = "текст" id = "inputEmail" урын хуҗасы = "Электрон почта" >   
    </div>
  </div>
  <div class = "контроль-төркем" > 
    <label class = "control-label" өчен = "inputPassword" > Серсүз </label>  
    <div class = "контроль" > 
      <кертү тибы = "серсүз" id = "inputPassword" урын хуҗасы = "Серсүз" >   
    </div>
  </div>
  <div class = "контроль-төркем" > 
    <div class = "контроль" > 
      <label class = "checkbox" > 
        <кертү тибы = "пункт" > Мине исегездә тотыгыз 
      </label>
      <төймә тибы = "тапшыру" класс = "btn" > Керү </button>  
    </div>
  </div>
</form>

Ярдәм формасы белән идарә итү

Стандарт форма контроле үрнәкләре форма макетында ярдәм итә.

Керүләр

Иң еш очрый торган форма контроле, текстка нигезләнгән кертү кырлары. Барлык HTML5 төрләренә дә ярдәм керә: текст, серсүз, дата вакыты, дата-җирле, дата, ай, вакыт, атна, номер, электрон почта, url, эзләү, тел, төс.

Билгеләнгән куллануны typeһәрвакыт таләп итә.

<кертү тибы = "текст" урын хуҗасы = "Текст кертү" >

Текстария

Берничә текстны хуплаучы форма контроле. rowsКирәк булганда атрибутны үзгәртегез .

<textarea рәтләре = "3" > </textarea>

Такталар һәм радио

Такталар исемлектә бер яки берничә вариантны сайлау өчен, радио күпләрдән бер вариантны сайлау өчен.

Килешү буенча (тезелгән)

<label class = "checkbox" > 
  <кертү тибы = "пункт" кыйммәт = "" >  
  Беренче вариант - бу һәм теге - ни өчен шәп булуын кертегез
</label>
 
<label class = "radio" > 
  <кертү тибы = "радио" исем = "параметрларRadios" id = "optionsRadios1" value = "option1 " тикшерелде >     
  Беренче вариант - бу һәм теге - ни өчен шәп булуын кертегез
</label>
<label class = "radio" > 
  <кертү тибы = "радио" исем = "параметрларRadios" id = "optionsRadios2" value = "option2 " >    
  Икенче вариант бүтән нәрсә булырга мөмкин һәм аны сайлау беренче вариантны сайлый
</label>

Керү пунктлары

.inlineКлассны бер тартмада яки контроль өчен радиолар сериясенә өстәгез .

<label class = "пункты сызыгы" > 
  <кертү тибы = "тикшерү тартмасы" id = "inlineCheckbox1" value = "option1 " > 1   
</label>
<label class = "пункты сызыгы" > 
  <кертү тибы = "тикшерү тартмасы" id = "inlineCheckbox2" value = "option2 " > 2   
</label>
<label class = "пункты сызыгы" > 
  <кертү тибы = "тикшерү тартмасы" 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

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <кертү класс = "span2" id = "алдан әзерләнгән кертү" тип = "текст" урын хуҗасы = "Кулланучының исеме" >    
</div>
<div class = "кертү-кушымта" > 
  <кертү класс = "span2" id = "appendedInput " тип = "текст" >   
  <span class = "add-on" > .00 </span> 
</div>

Берләштерелгән

.add-onКерүне әзерләү һәм өстәү өчен классларны да, ике очракны да кулланыгыз .

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <кертү сыйныфы = "span2" id = "appendedPrependedInput " тип = "текст" >   
  <span class = "add-on" > .00 </span> 
</div>

Текст урынына төймәләр

<span>Текст белән текст урынына .btn, төймәгә (яки ике) кертү өчен кулланыгыз.

<div class = "кертү-кушымта" > 
  <кертү классы = "span2" id = "appendedInputButton " тип = "текст" >   
  <төймә класс = "btn" тип = "төймә" > Бар! </button>  
</div>

<div class = "кертү-кушымта" > 
  <ке��тү сыйныфы = "span2" id = "appendedInputButtons " тип = "текст" >   
  <button class = "btn" type = "button" > Эзләү </button>  
  <button class = "btn" type = "button" > Вариантлар </button>  
</div>

Кнопка тамчылары

<div class = "кертү-кушымта" > 
  <кертү сыйныфы = "span2" id = "кушылганDropdownButton" тип = "текст" >   
  <div class = "btn-group" > 
    <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
      Эш
      <span class = "caret" > </span> 
    </button>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
      Эш
      <span class = "caret" > </span> 
    </button>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </div>
  <кертү классы = "span2" id = "алдан әзерләнгәнDropdownButton" тип = "текст" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
      Эш
      <span class = "caret" > </span> 
    </button>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </div>
  <кертү классы = "span2" id = "appendedPrependedDropdownButton " тип = "текст" >   
  <div class = "btn-group" > 
    <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
      Эш
      <span class = "caret" > </span> 
    </button>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </div>
</div>

Сегментланган тамчы төркемнәр

<форма>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <кертү тибы = "текст" > 
  </div>
  <div class = "кертү-кушымта" > 
    <кертү тибы = "текст" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Эзләү формасы

<форма класс = "форма-эзләү" > 
  <div class = "кертү-кушымта" > 
    <кертү тибы = "текст" класс = "span2 эзләү-сорау" >  
    <төймә тибы = "тапшыру" класс = "btn" > Эзләү </button>  
  </div>
  <div class = "input-prepend" > 
    <төймә тибы = "тапшыру" класс = "btn" > Эзләү </button>  
    <кертү тибы = "текст" класс = "span2 эзләү-сорау" >  
  </div>
</form>

Контроль зурлык

.input-largeКласслар ярдәмендә челтәр колоннасы үлчәмнәренә охшаган зурлык классларын кулланыгыз .span*.

Дәрәҗә керемнәрен блоклау

Теләсә нинди <input>яки <textarea>элементны блок дәрәҗәсе элементы кебек тотарга.

<кертү класс = "кертү-блок-дәрәҗә" тип = "текст" урын хуҗасы = ".инпут-блок-дәрәҗә" >

Нисби зурлык

<кертү класс = "кертү-мини" тип = "текст" урын хуҗасы = ".инпут-мини" >   
<кертү классы = "кертү-кечкенә" тип = "текст" урын хуҗасы = ".инпут-кечкенә" >   
<кертү класс = "кертү-урта" тип = "текст" урын хуҗасы = ".инпут-урта" >   
<кертү классы = "кертү-зур" тип = "текст" урын хуҗасы = ".инпут-зур" >   
<кертү классы = "кертү-хларге" тип = "текст" урын хуҗасы = ".input-xlarge" >   
<кертү сыйныфы = "кертү-xxларге" тип = "текст" урын хуҗасы = ".input-xxlarge" >

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

Челтәр зурлыгы

Челтәр баганаларының бер үк үлчәмнәренә туры килгән керемнәр өчен .span1кулланыгыз ..span12

<кертү классы = "span1" тип = "текст" урын хуҗасы = ".span1" >   
<кертү сыйныфы = "span2" тип = "текст" урын хуҗасы = ".span2" >   
<кертү сыйныфы = "span3" тип = "текст" урын хуҗасы = ".span3" >   
< классны сайлагыз = "span1" > 
  ...
</select>
< классны сайлагыз = "span2" > 
  ...
</select>
< классны сайлагыз = "span3" > 
  ...
</select>

Бер сызыкка берничә челтәр кертү өчен, .controls-rowмодификатор классын дөрес аралар өчен кулланыгыз . Ак мәйданны җимерү өчен керемнәрне йөзә, тиешле кырларны куя һәм йөзүне чистарта.

<div class = "контроль" > 
  <кертү сыйныфы = "span5" тип = "текст" урын хуҗасы = ".span5" >   
</div>
<div class = "контроль-рәт белән идарә итә" > 
  <кертү сыйныфы = "span4" тип = "текст" урын хуҗасы = ".span4" >   
  <кертү классы = "span1" тип = "текст" урын хуҗасы = ".span1" >   
</div>
...

Бердәм керемнәр

Мәгълүматны форма билгесен кулланмыйча үзгәртеп булмый торган формада тәкъдим итегез.

<span class = "input-xlarge uneditable-input" > Монда кайбер кыйммәтләр </span>

Эшләрне формалаштыру

Форманы хәрәкәтләр төркеме белән тәмамлагыз (төймәләр). А эчендә урнаштырылгач .form-actions, төймәләр автоматик рәвештә форма контроллерына туры киләчәк.

<div class = "форма-гамәлләр" > 
  <төймә тибы = "тапшыру" класс = "btn btn-primary" > changesзгәрешләрне саклау </button>  
  <төймә тибы = "төймә" класс = "btn" > Баш тарту </button>  
</div>

Ярдәм тексты

Форма контроле тирәсендә барлыкка килгән ярдәм тексты өчен сызык һәм блок ярдәме.

Ярдәм

<кертү төре = "текст" > <span class = "help-inline" > Ярдәм тексты </span>

Ярдәмне блоклагыз

<кертү тибы = "текст" > <span class = "help-block" > Яңа сызыкка кереп, бер сызыктан узарга мөмкин озын текст. </span>

Форма белән идарә итү халәтләре

Кулланучыларга яки килүчеләргә форма контроле һәм этикеткалары турында төп фикерләр белән җавап бирегез.

Керү фокусы

outlineКайбер форма контроллерында демократик стильләрне бетерәбез һәм box-shadowаның урынына кулланабыз :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Бу юнәлешле ..." >

Яраксыз керемнәр

Килешү браузер функциясе аша стиль керемнәре :invalid. А күрсәтегез , кыр өстәмә булмаса, атрибутны өстәгез, һәм (кирәк булса) a typeкүрсәтегез .requiredpattern

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

<кертү сыйныфы = "span3" тип = "электрон почта" кирәк >

Инвалид керемнәр

disabledКулланучының керүен булдырмас өчен һәм бераз башкача күренеш кертү өчен атрибутны кертүгә өстәгез .

<input class = "input-xlarge" id = "disabledInput" type = "text" урын хуҗасы = "Монда кертү инвалид ..." инвалид >

Тикшерү

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

<div class = "контроль-төркем кисәтүе" > 
  <label class = "control-label" өчен = "inputWarning" > Кисәтү белән кертү </label>  
  <div class = "контроль" > 
    <кертү тибы = "текст" id = "inputWarning" >  
    <span class = "help-inline" > Нәрсәдер дөрес булмагандыр </span> 
  </div>
</div>
 
<div class = "контроль-төркем хата" > 
  <label class = "control-label" өчен = "inputError" > хата белән кертү </label>  
  <div class = "контроль" > 
    <кертү тибы = "текст" id = "inputError" >  
    <span class = "help-inline" > Зинһар, хатаны төзәтегез </span> 
  </div>
</div>
 
<div class = "контроль-төркем мәгълүматы" > 
  <label class = "control-label" өчен = "inputInfo" > Мәгълүмат белән кертү </label>  
  <div class = "контроль" > 
    <кертү тибы = "текст" id = "inputInfo" >  
    <span class = "help-inline" > Кулланучының исеме инде алынган </span> 
  </div>
</div>
 
<div class = "контроль-төркем уңышлары" > 
  <label class = "control-label" өчен = "inputSuccess" > Уңыш белән кертү </label>  
  <div class = "контроль" > 
    <кертү тибы = "текст" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</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

<p>
  <төймә класс = "btn btn-зур btn-беренчел" тип = "төймә" > Зур төймә </button>  
  <төймә класс = "btn btn-large" тип = "төймә" > Зур төймә </button>  
</p>
<p>
  <төймә класс = "btn btn-беренчел" тип = "төймә" > Килешү төймә </button>  
  <төймә класс = "btn" тип = "төймә" > Килешү төймә </button>  
</p>
<p>
  <төймә класс = "btn btn-кечкенә btn-беренчел" тип = "төймә" > Кечкенә төймә </button>  
  <төймә класс = "btn btn-small" тип = "төймә" > Кечкенә төймә </button>  
</p>
<p>
  <төймә класс = "btn btn-mini btn-беренчел" тип = "төймә" > Мини төймә </button>  
  <төймә класс = "btn btn-mini" тип = "төймә" > Мини төймә </button>  
</p>

Блок дәрәҗәсе төймәләрен булдырыгыз - ата-ананың тулы киңлеген киңәйтеп .btn-block.

<төймә класс = "btn btn-зур btn-блок btn-беренчел" тип = "төймә" > Блок дәрәҗәсе төймәсе </button>  
<button class = "btn btn-large btn-block" type = "button" > Блок дәрәҗәсе төймәсе </button>

Инвалид хәл

Кнопкаларны 50% артка калдырып, ябыштырылмаслык итеп күрсәтегез.

Анкор элементы

.disabledКласс <a>төймәләренә өстәгез .

Беренчел сылтама Ссылка

<a href = "#" class = "btn btn-large btn-primary disabled"> Беренчел сылтама </a>  
<a href = "#" class = "btn btn-large disabled"> Ссылка </a>

Идарә итә!Без .disabledмонда гомуми класска охшаган коммуналь класс буларак кулланабыз .active, шуңа күрә бернинди префикс та кирәк түгел. Шулай ук, бу класс эстетик өчен генә; мондагы сылтамаларны сүндерү өчен сез махсус JavaScript кулланырга тиеш.

Кнопка элементы

disabledАбруйны <button>төймәләргә өстәгез .

<төймә тибы = "төймә" класс = "btn btn-зур btn-беренчел инвалид" инвалид = "инвалид" > төп төймә </button>   
<төймә тибы = "төймә" класс = "btn btn-large" инвалид > төймә </button>

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

.btnКлассны ан <a>, <button>яки <input>элементта кулланыгыз .

<a class = "btn" href = ""> Ссылка </a> _  
<төймә класс = "btn" тип = "тапшыру" > төймә </button>  
<кертү сыйныфы = "btn" тип = "төймә" кыйммәт = "кертү" >   
<кертү сыйныфы = "btn" тип = "тапшыру" кыйммәт = "Тапшыру" >

Иң яхшы практика буларак, кросс-браузер рендерингына туры килүен тәэмин итү өчен, контекст өчен элементны туры китерергә тырышыгыз. Сездә булса , төймәгез өчен inputкулланыгыз .<input type="submit">

<img>Төрле проекттагы рәсемнәрне җиңел стильләү өчен элементка класслар өстәгез .

<img src = "..." класс = "img түгәрәк" >  
<img src = "..." класс = "img-түгәрәк" >  
<img src = "..." класс = "img-полароид" >

Идарә итә! .img-roundedһәм ярдәм .img-circleбулмау аркасында IE7-8 эшләмәгез border-radius.

Икона глифлары

Слиф формасында 140 икона, Глификоннар белән тәэмин ителгән куе соры (килешү буенча) һәм ак .

икона-пыяла
икона-музыка
иконка-эзләү
икона-конверт
иконка-йөрәк
икона-йолдыз
икона-йолдыз-буш
иконка-кулланучы
иконка-фильм
иконка-зур
иконка
иконка-исемлек
икона
иконка-бетерү
иконка-зурайту
иконаны зурайту
иконка
иконка-сигнал
иконка
икона-чүп
иконка-өй
иконка-файл
иконка-вакыт
иконка-юл
иконка-йөкләү-алт
иконка-йөкләү
иконка-йөкләү
иконка
иконка-уйнау
иконка-кабатлау
иконка-яңарту
иконка-исемлек-алт
иконка-йозак
иконка-флаг
икон-наушниклар
иконка-күләм-сүндерү
иконка-күләм күләме
иконка-күләм күләме
иконка-qrcode
иконка-штрих-код
иконка-тег
иконка
иконка-китап
иконка-кыстыргыч
иконка-бастыру
икона-камера
иконка-шрифт
иконка-калын
иконка
иконка-текст-биеклек
иконка-текст киңлеге
иконка-тигезләү-сул
иконка-тигезләү-үзәк
иконка-тигезләү-уң
иконка-тигезләү-аклау
иконка исемлеге
иконка-индент-сул
иконка-индент-уң
иконка-фасим-видео
иконка-рәсем
иконка-карандаш
икона-карта-маркер
иконка-көйләү
иконка
иконка-редакция
иконка-бүлешү
иконка-тикшерү
иконка-хәрәкәт
иконка-адым-артка
иконка-тиз-артка
иконка-артка
иконка-уйнау
иконка-пауза
иконка-тукталыш
иконка-алга
иконка-тиз алга
иконка-алга
иконка-чыгару
иконка-шеврон-сул
иконка-шеврон-уң
иконка-плюс-билге
иконка-минус-билге
иконка-бетерү-билге
иконка-ярый
иконка-сорау-билге
иконка-информация
иконка-скриншот
иконка-бетерү-түгәрәк
иконка-ок-түгәрәк
иконка-бан-түгәрәк
икона-ук-сул
иконка-ук-уң
иконка-ук
иконка-ук-аста
иконка-бүлешү-алт
иконка-размер-тулы
иконка-размер-кечкенә
икона-плюс
иконка-минус
иконка-йолдыз
иконка-игълан-билге
иконка-бүләк
иконка-яфрак
иконка-ут
иконка-күз
иконка-күзгә якын
иконка-кисәтүче билге
иконка-яссылык
иконка-календарь
иконка-очраклы
иконка-аңлатма
иконка-магнит
иконка-шеврон-up
иконка-шеврон-аста
иконка-ретвит
икона-кибет
иконка-папка-ябык
иконка-папка-ачык
иконка-размер-вертикаль
иконка-размер-горизонталь
иконка-hdd
иконка
иконка-кыңгырау
иконка-сертификат
иконка-бармаклар
иконка-бармак-аста
иконка-уң-уң
иконка-сул
иконка-кул
иконка-кул
иконка-түгәрәк-ук-уң
иконка-түгәрәк-ук-сул
иконка-түгәрәк-ук
иконка-түгәрәк-ук-ас
икона-глобус
иконка
иконка-биремнәр
иконка-фильтр
иконка-портфель
иконка-тулы экран

Глификон атрибутикасы

Глификон Халфлинглар гадәттә бушлай мөмкин түгел, ләкин Bootstrap һәм Glyphicons иҗат итүчеләре арасындагы килешү моны уйлап табучылар буларак сезгә мөмкин булды. Рәхмәт буларак, без практик булганда Глификоннарга өстәмә сылтама кертүегезне сорыйбыз .

Ничек кулланырга

Барлык иконалар <i>белән уникаль класслы тег кирәк, префикс белән icon-. Куллану өчен, түбәндәге кодны теләсә кайда урнаштырыгыз:

<i класс = "иконка-эзләү" > </i>

Бер өстәмә класс белән әзерләнгән инверсия (ак) иконалар өчен стильләр дә бар. Без бу классны диңгез һәм төшү сылтамалары өчен махсус һәм актив хәлләрдә кулланачакбыз.

<i класс = "иконка-эзләү иконасы-ак" > </i>

Идарә итә!Текст сызыклары янында кулланганда, төймәләр яки диңгез сылтамалары кебек, <i>тиешле аралар өчен тегтан соң урын калдырыгыз.

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

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

Кнопкалар

Кнопка кораллар плитәсендә төймә төркеме

<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>

Кнопка төркеменә төшү

Кулланучы

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> кулланучы </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>    
  <ul class = "тамчы-меню" > 
    <li> <a href = "#"> <i class = "иконка-карандаш" > </i> үзгәртү </a> </li>  
    <li> <a href = "#"> <i class = "icon-trash" > </i> Бетерү </a> </li>  
    <li> <a href = "#"> <i class = "icon-ban-түгәрәк" > </i> тыю </a> </li>  
    <li класс = "бүлүче" > </li> 
    <li> <a href = "#"> <i class = "i" > </i> Администратор ясагыз </a> </li>  
  </ul>
</div>

Кнопка зурлыклары

Йолдыз Йолдыз Йолдыз

<a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> Йолдыз </a>   
<a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> Йолдыз </a>   
<a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> Йолдыз </a>

<ul class = "nav nav-list" > 
  <li class = "актив" > <a href = "#"> <i class = "icon-home icon-white" > </i> Өй </a> </li>   
  <li> <a href = "#"> <i class = "icon-book" > </i> Китапханә </a> </li>  
  <li> <a href = "#"> <i class = "иконка-карандаш" > </i> кушымталар </a> </li>  
  <li> <a href = "#"> <i class = "i" > </i> Төрле </a> </li>  
</ul>

Формалар кырлары

<div class = "контроль-төркем" > 
  <label class = "control-label" өчен = "inputIcon" > электрон почта адресы </label>  
  <div class = "контроль" > 
    <div class = "input-prepend" > 
      <span class = "add-on" > <i class = "икон-конверт" > </i> </span>  
      <кертү сыйныфы = "span2" id = "inputIcon" тип = "текст" >   
    </div>
  </div>
</div>

Типография

Башлыклар

h1. 1 нче баш

h2. 2 нче баш

h3. 3 нче баш

h4. 4 нче баш

h5. 5 нче баш

h6. 6 нчы баш

Тән күчермәсе

Куркынычсызлык

Кечкенә белән төзелгән

Басым

<small>

Калын

Италия

Тигезләү класслары

Дәресләргә басым ясау

Кыскартулар

<abbr>

<abbr class="initialism">

Адреслар

<address>

Блоккотлар

Килешү блоккоте

Блоккот вариантлары

Чыганакны атау

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

Исемлекләр

Тәртипсез

Заказлы

Стильсез

Киң төзелештә

Тасвирлау

Горизонталь тасвирлау

Код

Киң төзелештә

Төп блок

Таблицалар

Килешү стильләре

Өстәмә дәресләр

.table-striped

.table-bordered

.table-hover

.table-condensed

Өстәмә рәт класслары

Таблицаны билгеләү

Формалар

Килешү стильләре

Ихтимал макетлар

Эзләү формасы

Эчке форма

Горизонталь форма

Ярдәм формасы белән идарә итү

Керүләр

Текстария

Такталар һәм радио

Килешү буенча (тезелгән)

Керү пунктлары

Сайлый

Форма контролен киңәйтү

Алдан әзерләнгән һәм кушылган керемнәр

Килешү вариантлары

Берләштерелгән

Текст урынына төймәләр

Кнопка тамчылары

Сегментланган тамчы төркемнәр

Эзләү формасы

Контроль зурлык

Дәрәҗә керемнәрен блоклау

Нисби зурлык

Челтәр зурлыгы

Бердәм керемнәр

Эшләрне формалаштыру

Ярдәм тексты

Ярдәм

Ярдәмне блоклагыз

Форма белән идарә итү халәтләре

Керү фокусы

Яраксыз керемнәр

Инвалид керемнәр

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`