Жаңы, ырааттуу көрүнүштү жана сезимди камсыз кылуу үчүн негизги HTML элементтери стилдештирилген жана кеңейтилүүчү класстар менен өркүндөтүлгөн.
Бүтүндөй типографиялык тор биздин variables.less файлыбыздагы эки Less өзгөрмөсүнө негизделген: @baseFontSizeжана @baseLineHeight. Биринчиси - бүтүндөй колдонулган негизги шрифт-өлчөмү, экинчиси - базалык сызыктын бийиктиги.
Биз ошол өзгөрмөлөрдү жана кээ бир математиканы бардык түрүбүздүн четтерин, толтургучтарын жана сызык бийиктиктерин жана башкаларды түзүү үчүн колдонобуз.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Дуйс моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Элемент | Колдонуу | Кошумча |
|---|---|---|
<strong> |
Маанилүү тексттин үзүндүсүн баса белгилөө үчүн | Жок |
<em> |
Стресс менен тексттин үзүндүсүн баса белгилегени үчүн | Жок |
<abbr> |
Кыскартууларды жана аббревиатураларды ороп, курсордун кеңейтилген версиясын көрсөтөт |
.initialismБаш тамгалар үчүн классты колдонуңуз . |
<address> |
Байланыш маалыматы үчүн, анын жакынкы ата-бабасы же бүткүл иш органы | Бардык саптарды бүтүрүү менен форматтоо сакталсын<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Эскертүү: HTML5те колдонуудан тартынбаңыз <b>, <i>бирок алардын колдонулушу бир аз өзгөрдү. <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн колдонулат, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.
<address>Бул жерде тег кантип колдонсо болоруна эки мисал келтирилген :
Атрибуту бар аббревиатуралардын titleылдый жагындагы ачык чекиттери жана курсордун курсорунун курсору бар. Бул колдонуучуларга курсактагы бир нерсе көрсөтүлө тургандыгын кошумча көрсөтөт.
initialismКлассты кыскартууга тексттин көлөмүн бир аз кичирээк берип, типографиялык гармонияны жогорулатуу үчүн кошуңуз .
HTML кесилген нандан бери эң жакшы нерсе.
Атрибут сөзүнүн аббревиатурасы attr болуп саналат .
| Элемент | Колдонуу | Кошумча |
|---|---|---|
<blockquote> |
Башка булактан мазмунду цитаталоо үчүн блок деңгээлиндеги элемент |
.pull-leftжана .pull-rightкласстар |
<small> |
Колдонуучуга цитата кошуу үчүн кошумча элемент, адатта чыгарманын аталышы бар автор | Булактын <cite>аталышын же атын тегерегине коюңуз |
Блок цитатаны кошуу үчүн <blockquote>каалаган HTMLди цитата катары ороп алыңыз. Түз цитаталар үчүн биз сунуштайбыз <p>.
<small>Булагыңызга шилтеме кылуу үчүн кошумча элементти кошуңуз жана —стилдөө максатында анын алдында сызыкча аласыз.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante venenatis. </p>
- <small> Атактуу бирөө </small>
- </blockquote>
Демейки блок тырмакчалар төмөнкүдөй стилделет:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Жумушта атактуу адам
Блок тырмакчаңызды оңго жылдыруу үчүн төмөнкүнү кошуңуз class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Жумушта атактуу адам
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Коддун саптык үзүндүлөрүн менен ороп алыңыз <code>.
- Мисалы , < code > бөлүмү </ code > сап катары оролгон болушу керек .
<pre>Коддун бир нече саптары үчүн колдонуңуз . Туура рендеринг үчүн коддогу бурчтуу кашаалардан качууну унутпаңыз.
<p>Үлгү тексти бул жерде...</p>
- <pre>
- <p>Үлгү тексти бул жерде...</p>
- </pre>
Эскертүү: Тегдердин ичинде кодду <pre>мүмкүн болушунча солго жакын сактаңыз; ал бардык өтмөктөрдү көрсөтөт.
Каалоо боюнча сиз .pre-scrollableклассты кошо аласыз, ал 350px максималдуу бийиктикти орнотуп, Y огу сыдырма тилкесин камсыз кылат.
Ошол эле <pre>элементти алып, жакшыртылган көрсөтүү үчүн эки кошумча классты кошуңуз.
- <p> Үлгү текст бул жерде... </p>
- <алдын ала класс = "prettyprint
- linenums" >
- <p>Үлгү тексти бул жерде...</p>
- </pre>
Google-code-prettify жүктөп алып, кантип колдонууну көрүү үчүн Readme'ди көрүңүз.
| Tag | Description |
|---|---|
<table> |
Берилиштерди таблица форматында көрсөтүү үчүн таңуу элементи |
<thead> |
<tr>Таблица тилкелерин белгилөө үчүн таблица баш саптары үчүн контейнер элементи ( ). |
<tbody> |
<tr>Таблицанын негизги бөлүгүндөгү таблица саптары үчүн контейнер элементи ( ). |
<tr> |
Бир катарда пайда болгон таблица уячаларынын ( <td>же ) топтому үчүн контейнер элементи<th> |
<td> |
Демейки жадыбал уячасы |
<th> |
Мамыча (же сап, масштабына жана жайгашуусуна жараша) энбелгилери үчүн атайын таблица уячасы бир ичинде колдонулушу керек <thead> |
<caption> |
Таблицада эмнени камтыган сүрөттөмө же кыскача маалымат, өзгөчө экранды окугандар үчүн пайдалуу |
- <таблица>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </таблица>
| аты | Класс | Description |
|---|---|---|
| Демейки | Жок | Стилдер жок, жөн гана мамычалар жана саптар |
| Негизги | .table |
Катарлардын ортосундагы горизонталдуу сызыктар гана |
| Чектелген | .table-bordered |
Бурчтарды тегеретет жана сырткы чекти кошот |
| Зебра-сызык | .table-striped |
Так саптарга ачык боз фон түсүн кошот (1, 3, 5, ж.б.) |
| Конденсацияланган | .table-condensed |
tdБардык жана thэлементтердин ичиндеги вертикалдуу толтурууну 8 пикселден 4 пикселге чейин экиге бөлөт |
Таблицалар автоматтык түрдө окулушун камсыз кылуу жана структураны сактоо үчүн бир нече чектер менен стилделет. 2.0 менен .tableкласс талап кылынат.
- <таблица класс = "таблица" >
- …
- </таблица>
| # | Биринчи аты | Акыркы аты | Колдонуучунун аты |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Жакып | Торнтон | @fat |
| 3 | Ларри | чымчык |
Зебра тилкесин кошуу менен үстөлдөрүңүздү бир аз кооздоңуз — .table-stripedклассты кошуңуз.
Эскертүү: Чаардуу таблицалар :nth-childCSS селекторун колдонушат жана IE7-IE8де жок.
- <таблица класс = "таблица-сызык" >
- …
- </таблица>
| # | Биринчи аты | Акыркы аты | Колдонуучунун аты |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Жакып | Торнтон | @fat |
| 3 | Ларри | чымчык |
Эстетикалык максаттар үчүн бүт үстөлдүн айланасына чектерди жана тегеректелген бурчтарды кошуңуз.
- <таблица классы = "таблица менен чектеш" >
- …
- </таблица>
| # | Биринчи аты | Акыркы аты | Колдонуучунун аты |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| Марк | Отто | @getbootstrap | |
| 2 | Жакып | Торнтон | @fat |
| 3 | Ларри куш | ||
.table-condensedТаблицаларыңыздын уяча толтургучтарын экиге (8 пикселден 4 пикселге чейин) кыскартуу үчүн класс кошуп, таблицаларыңызды компакттуу кылыңыз .
- <таблица класс = "таблица-конденсацияланган" >
- …
- </таблица>
| # | Биринчи аты | Акыркы аты | Колдонуучунун аты |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Жакып | Торнтон | @fat |
| 3 | Ларри куш | ||
Жеткиликтүү класстардын каалаганын колдонуу менен ар кандай көрүнүшкө жетүү үчүн стол класстарынын каалаганын айкалыштыруудан тартынбаңыз.
- <таблица классы = "таблица-сызык стол-чектелген стол-конденсацияланган" >
- ...
- </таблица>
| Толук аты | |||
|---|---|---|---|
| # | Биринчи аты | Акыркы аты | Колдонуучунун аты |
| 1 | Марк | Отто | @mdo |
| 2 | Жакып | Торнтон | @fat |
| 3 | Ларри куш | ||
Bootstrap'теги формалардын эң жакшы жери - бардык киргизүүлөрүңүз жана башкаруу элементтериңиз, аларды белгилөөдө кандай курсаңыз да, сонун көрүнөт. Ашыкча HTML талап кылынбайт, бирок биз аны талап кылгандар үчүн үлгүлөрдү беребиз.
Татаал макеттер жеңил стилдештирүү жана окуяны бириктирүү үчүн кыска жана масштабдуу класстар менен келет, андыктан ар бир кадамда камтылгансыз.
Bootstrap форма макеттеринин төрт түрүн колдоо менен келет:
Форма макеттеринин ар кандай түрлөрү белгилөө үчүн кээ бир өзгөртүүлөрдү талап кылат, бирок башкаруу элементтеринин өзүлөрүнүн баары ошол эле бойдон калат.
Bootstrap формаларына киргизүү, текст аймагы жана сиз күткөн тандоо сыяктуу бардык базалык форманы башкаруу үчүн стилдер кирет. Бирок ал ошондой эле тиркелген жана алдын ала киргизилген киргизүүлөр жана белги кутучаларынын тизмелерин колдоо сыяктуу бир катар ыңгайлаштырылган компоненттер менен келет.
Ката, эскертүү жана ийгилик сыяктуу мамлекеттер форманы башкаруунун ар бир түрү үчүн камтылган. Ошондой эле өчүрүлгөн башкаруу үчүн стилдер камтылган.
Bootstrap жалпы веб формаларынын төрт стили үчүн жөнөкөй белгилөө жана стилдерди камсыз кылат.
| аты | Класс | Description |
|---|---|---|
| Вертикалдуу (демейки) | .form-vertical (милдеттүү эмес) |
Башкаруу элементтеринин үстүнө тизилген, солго тегизделген энбелгилер |
| Inline | .form-inline |
Компакт стил үчүн солго тегизделген энбелги жана саптык блокту башкаруу |
| Издөө | .form-search |
Кадимки издөө эстетикасы үчүн кошумча тегеректелген текст киргизүү |
| Горизонталдуу | .form-horizontal |
Солго, оңго тегизделген энбелгилерди башкаруу элементтери менен бир сапта калкытуу |
v2.0 менен биз форма стилдери үчүн жеңилирээк жана акылдуураак демейкиге ээбиз. Кошумча белгилөө жок, жөн гана форманы башкаруу.
- <форма класс = "жакшылык" >
- <label> Энбелги аты </label>
- <киргизүү түрү = "текст" класс = "span3" толтургуч = "Бир нерсени териңиз..." >
- <span class = "help-inline" > Байланышкан жардам тексти! </span>
- <белги класс = "текшерүү кутусу" >
- <киргизүү түрү = "текшерүү" > Мени текшерип көрүңүз
- </label>
- <button type = "submit" class = "btn" > Тапшыруу </button>
- </form>
Демейки WebKit стилдерин чагылдырып, .form-searchкошумча тегеректелген издөө талааларын кошуңуз.
- <форма класс = "жакшы форма-издөө" >
- <киргизүү түрү = "текст" класс = "киргизүү-орто издөө-суроо" >
- <button type = "тапшыртуу " класс = "btn" > Издөө </button>
- </form>
Киргизүүлөр баштоо үчүн блок деңгээлинде. .form-inlineжана үчүн .form-horizontal, биз inline-блокту колдонобуз.
- <форма класс = "жакшы форма-inline" >
- <киргизүү түрү = "текст" класс = "киргизүү-кичинекей" толтургуч = "Электрондук почта" >
- <киргизүү түрү = "сырсөз" класс = "киргизүү-кичинекей" толтургуч = "Сырсөз" >
- <белги классы = "текшерүү кутусу" >
- <киргизүү түрү = "текшерүү кутусу" > Мени эсте
- </label>
- <баскыч түрү = "тапшыруу" класс = "btn" > Кирүү </button>
- </form>
Жогорудагы мисал форманын макетинин эске алуу менен, бул жерде биринчи киргизүү жана башкаруу тобу менен байланышкан белгилөө. , .control-group, .control-labelжана .controlsкласстардын баары стилдөө үчүн талап кылынат.
- <форма класс = "форма-горизонталдык" >
- <талаа топтому>
- <legend> Легенда тексти </legend>
- <div класс = "контролдоо тобу" >
- <label class = "control-label" for = "input01" > Текст киргизүү </label>
- <div class = "контролдор" >
- <киргизүү түрү = "текст" класс = "input-xlarge" id = "input01" >
- <p class = "help-block" > Колдоочу жардам тексти </p>
- </div>
- </div>
- </fieldset>
- </form>
Сол жакта көрсөтүлгөн биз колдогон демейки форманы башкаруу элементтери. Бул жерде маркерленген тизме:
V1.4 чейин, Bootstrap'тын демейки форма стилдери горизонталдуу жайгашууну колдонушкан. Bootstrap 2 менен биз бул чектөөнү алып салдык, каалаган форма үчүн акылдуураак, масштабдала турган демейки параметрлерге ээ болуу үчүн.
Bootstrap браузер тарабынан колдоого алынган фокусталган жана disabledштаттар үчүн стилдерди өзгөчөлүктөрү. Демейки Webkitти алып салып, анын ордуна outlinea колдонобуз .box-shadow:focus
Ал ошондой эле каталарды, эскертүүлөрдү жана ийгиликти текшерүү стилдерин камтыйт. Колдонуу үчүн, айланасындагы ката классын кошуңуз .control-group.
- <fieldset
- class = "контролдук топтун катасы" >
- …
- </fieldset>
Киргизүү топтору - тиркелген же алдына коюлган тексти бар - киргизүүлөрүңүз үчүн көбүрөөк контекст берүүнүн оңой жолун камсыздайт. Мыкты мисалдарга Twitter колдонуучу аттары үчүн @ белгиси же каржы үчүн $ кирет.
V1.4 чейин, Bootstrap аларды топтоо үчүн белги кутучаларынын жана радиолордун айланасында кошумча белги коюуну талап кылды. <label class="checkbox">Эми, бул ороп турган нерсени кайталоо жөнөкөй маселе <input type="checkbox">.
Inline белги кутучалары жана радиолор да колдоого алынат. .inlineЖөн гана каалаганына кошуңуз .checkboxже .radioбүттүңүз.
Киргизүүлөрдү саптык формада алдын ала же кошумчалоону колдонуу үчүн, жана дегенди боштуксуз .add-onбир inputсапка коюуну унутпаңыз.
Форма киргизүүлөрүңүз үчүн жардам текстин кошуу үчүн , киргизүү элементинен кийинки <span class="help-inline">жардам текстин же жардам текст блогун кошуңуз.<p class="help-block">
Ар бир сөлөкөттү кошумча өтүнүч кылуунун ордуна, биз аларды спрайт кылып түздүк — бир файлдагы сүрөттөрдүн тобу, ал сүрөттөрдү жайгаштыруу үчүн CSS колдонот.background-position . Бул биз Twitter.com сайтында колдонгон ыкма жана ал биз үчүн жакшы болду.
Бардык иконалар класстары .icon-башка компоненттерибиз сыяктуу туура аталыш мейкиндигин жана масштабын аныктоо үчүн префикстерге ээ. Бул башка куралдар менен чыр-чатактарды болтурбоо жардам берет.
Glyphicons бизге ачык булактуу инструменттер топтомундагы Halflings топтомун колдонууга уруксат берди, эгерде биз бул жерде документтерде шилтеме жана кредитти камсыз кылсак. Сураныч, долбоорлоруңузда да ушундай кылыңыз.
Bootstrap бардык иконалар үчүн тег колдонот <i>, бирок аларда кейс классы жок — жалпы префикс гана. Колдонуу үчүн, төмөнкү кодду каалаган жерге коюңуз:
- <i class = "icon-search" ></i>
Ошондой эле бир кошумча класс менен даяр болгон тескери (ак) иконалар үчүн жеткиликтүү стилдер бар:
- <i class = "icon-search icon-white" ></i>
Сиздин иконалар үчүн тандоо үчүн 120 класс бар. Жөн гана туура класстар менен тег кошуңуз <i>жана сиз орнотуңуз. Толук тизмени sprites.less же дал ушул документте таба аласыз .
Көңүл бургула! Тексттин саптарынын жанында, баскычтардагы же навигация шилтемелериндегидей, <i>туура аралык үчүн тегден кийин боштук калтырууну унутпаңыз.
Иконалар сонун, бирок аларды кайда колдонсо болот? Бул жерде бир нече идеялар бар:
Негизи, каалаган жерге <i>тег коюуга болот, сөлөкөтүн коюуга болот.
Аларды баскычтарда, куралдар тилкеси үчүн баскыч топторунда, навигацияда же алдын ала форма киргизүүдө колдонуңуз.