Скафолдинг өстендә, төп HTML элементлары стильләштерелгән һәм киңәйтелгән класслар белән көчәйтелгән, яңа, эзлекле күренеш һәм хисләр тудыру өчен.
Бөтен типографик челтәр безнең үзгәрүчән.less файлдагы ике аз үзгәрүчәнгә нигезләнгән: @baseFontSizeһәм @baseLineHeight. Беренчесе - төп шрифт зурлыгы, икенчесе - төп сызык биеклеге.
Без бу үзгәрүчәннәрне, һәм кайбер математиканы кулланабыз, кырлар, паддинглар, һәм безнең төрле типтагы биеклекләр һәм башкалар.
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 транспорт.
Параграфны өстәп аерылып торыгыз .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor аукторы. Duis mollis, коммерция булмаган люктус.
| Элемент | Куллану | Ихтимал |
|---|---|---|
<strong> |
Мөһим булган текстның фрагментына басым ясау өчен | Беркем дә юк |
<em> |
Стресс белән текстның бер өлешен ассызыклау өчен | Беркем дә юк |
<abbr> |
Кыскартылган вариантларны күрсәтү өчен кыскартуларны һәм кыскартуларны урап алыгыз |
.initialismБаш хәреф кыскартулары өчен класс кулланыгыз . |
<address> |
Аның иң якын бабасы яки бөтен эш органы өчен контакт мәгълүматы өчен | Барлык юлларны тәмамлап форматлауны саклагыз<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentation massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Искәрмә: HTML5 кулланырга ирек бирегез <b>, <i>ләкин аларны куллану бераз үзгәрде. <b>сүз яки фразеологизмнарны яктырту өчен, өстәмә әһәмият бирмичә <i>, күбесенчә тавыш, техник терминнар һ.б.
Тэгны ничек куллануның ике мисалы <address>:
Атрибутлы кыскартуларның titleҗиңел нокталы аскы чиге һәм кадак өстендә ярдәм курсоры бар. Бу кулланучыларга өстәмә күрсәткеч бирә, каядыр күрсәтеләчәк.
Классны кыскартуга өстәгез, initialismтипографик гармонияне бераз кечерәк итеп биреп.
Киселгән икмәктән HTML иң яхшы әйбер.
Сыйфат атрибутының кыскартылышы .
| Элемент | Куллану | Ихтимал |
|---|---|---|
<blockquote> |
Башка чыганактан эчтәлек китерү өчен блок дәрәҗәсендәге элемент |
.pull-leftкласслар кулланыгыз.pull-right |
<small> |
Кулланучының йөзен китерү өчен өстәмә элемент, гадәттә әсәр исеме булган автор | Чыганакның <cite>исемен яки исемен әйләндереп алыгыз |
Блоккотны кертү өчен, <blockquote>теләсә нинди HTML - ны цитата итеп урыгыз. Туры цитаталар өчен без а <p>.
Чыганагыгызны китерү өчен өстәмә <small>элемент кертегез, һәм сез аны —стилизацияләү максатыннан алырсыз.
- <blockquote>
- <p> Лорем ипсум долор амет утыра, консексетур элитасы. Integer posuere ante venenatis бетерә. </p>
- <small> танылган кеше </small>
- </blockquote>
Килешенгән блоккотлар шулай итеп ясалган:
Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante venenatis бетерә.
Эш органында танылган кеше
Блоккотыңны уңга йөзү өчен, өстә class="pull-right":
Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante venenatis бетерә.
Эш органында танылган кеше
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Идарә итә! Горизонталь тасвирлау исемлеге сул багана төзәтмәсенә туры килерлек терминнарны кисәр text-overflow. Таррак күренешләрдә алар килешү буенча урнаштырылган макетка үзгәрәчәкләр.
Кодның сызыкларын урыгыз <code>.
- Мәсәлән , <код> бүлеге </ code > сызык итеп төрелергә тиеш .
<pre>Кодның берничә сызыгы өчен кулланыгыз . Дөрес күрсәтү өчен кодтагы теләсә нинди почмактан сакланыгыз.
<p> Монда текст үрнәге ... </p>
- <pre>
- & lt; p & gt; Монда үрнәк текст ... & lt; / p & gt;
- </pre>
Искәрмә: кодны <pre>тэглар эчендә мөмкин кадәр сул якка саклагыз. ул барлык кыстыргычларны күрсәтәчәк.
Сез өстәмә рәвештә .pre-scrollableмаксималь биеклекне 350px куячак һәм у күчәре әйләндерү тактасын тәэмин итә торган классны өсти аласыз.
Бер үк <pre>элементны алыгыз һәм көчәйтелгән күрсәтү өчен ике өстәмә класс өстәгез.
- <p> Монда текст үрнәге ... </p>
- <pre class = "prettyprint
- тукымалар " >
- & lt; p & gt; Монда үрнәк текст ... & lt; / p & gt;
- </pre>
Google-code-prettify-ны йөкләү һәм куллану өчен укуны карау.
| Тег | Тасвирлау |
|---|---|
<table> |
Таблицаны форматта күрсәтү өчен элементны төрү |
<thead> |
<tr>Өстәл баганаларын билгеләргә өстәл башы рәтләре өчен контейнер элементы |
<tbody> |
<tr>Өстәл тәнендәге контейнер элементы |
<tr> |
Бер рәттә барлыкка килгән өстәл күзәнәкләре ( <td>яки ) өчен контейнер элементы<th> |
<td> |
Килешү өстәл шакмаклары |
<th> |
Колонка өчен махсус өстәл шакмаклары (яки рәт, масштабына һәм урнашуына карап) этикеткалар кулланылырга тиеш <thead> |
<caption> |
Таблицаның нинди булуын тасвирлау яки кыскача мәгълүмат, аеруча экран укучылары өчен файдалы |
- <таблица>
- <баш>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Исем | Класс | Тасвирлау |
|---|---|---|
| Килешү | Беркем дә юк | Стильләр юк, баганалар һәм рәтләр генә |
| Төп | .table |
Рәтләр арасында горизонталь сызыклар гына |
| Чик белән чикләнгән | .table-bordered |
Почмакларны әйләндерә һәм тышкы чикне өсти |
| Зебра-полоса | .table-striped |
Сәер рәтләргә ачык соры фон төсе өсти (1, 3, 5 һ.б.) |
| Конденсацияләнгән | .table-condensed |
tdБарлык һәм thэлементлар эчендә 8px-dan 4px-га кадәр вертикаль паддерны кисәләр |
Таблицалар автоматик рәвештә берничә чик белән генә ясалган, укуны тәэмин итү һәм структураны саклау. 2.0 белән .tableкласс кирәк.
- <өстәл сыйныфы = "таблица" >
- …
- </table>
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри | Кош |
Зебра-стрипинг өстәп, өстәлләрегез белән бераз хыялланыгыз - .table-stripedклассны өстәгез.
Искәрмә: сызыклы таблицалар :nth-childCSS селекторын кулланалар һәм IE7-IE8 мөмкин түгел.
- <өстәл классы = "өстәл сызыгы" >
- …
- </table>
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри | Кош |
Эстетик максатларда бөтен өстәл һәм түгәрәк почмаклар чикләрен өстәгез.
- <өстәл класы = "өстәл өстәле белән чикләнгән" >
- …
- </table>
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| Билге | Отто | @getbootstrap | |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри Кош | ||
Өстәл күзәнәкләрен ябыштыру өчен класс өстәп, өстәлләрегезне тагын да тыгызрак .table-condensedитегез (8px-dan 4px-га кадәр).
- <өстәл класы = "өстәл өстәл-конденсацияләнгән" >
- …
- </table>
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри Кош | ||
Төрле класслардан файдаланып, төрле кыяфәткә ирешү өчен өстәл классларының теләсә кайсысын берләштерергә иренегез.
- <өстәл классы = "өстәл таблицасы сызыклы өстәл белән чикләнгән өстәл конденсацияләнгән" >
- ...
- </table>
| Тулы исем | |||
|---|---|---|---|
| # | Исем | Фамилия | Кулланучы исеме |
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри Кош | ||
Bootstrap формаларының иң яхшы ягы - сезнең барлык керемнәрегез һәм контрольләрегез, сез аларны ничек билгеләсәгез дә, бик яхшы күренәләр. Артык HTML кирәк түгел, ләкин без аны таләп итүчеләр өчен үрнәкләр тәкъдим итәбез.
Катлаулырак макетлар җиңел стиллау һәм вакыйгаларны бәйләү өчен үзенчәлекле һәм масштаблы класслар белән килә, шуңа күрә сез һәр адымда яктыртыласыз.
Bootstrap дүрт төр форма ярдәме өчен килә:
Төрле форма макетлары билгеләр өчен кайбер үзгәрешләр таләп итә, ләкин контрольләр үзләре кала һәм үзләрен шулай тоталар.
Bootstrap формаларына кертү, текстария кебек төп форма контроле өчен стильләр керә, һәм сез көткәнне сайлагыз. Ләкин ул шулай ук кушылган һәм алдан кертелгән керемнәр һәм пунктлар исемлеге өчен ярдәм кебек махсус компонентлар белән килә.
Хата, кисәтү, уңыш кебек дәүләтләр форма белән идарә итүнең һәр төре өчен кертелгән. Инвалид контроль өчен стильләр дә кертелгән.
Bootstrap гади веб-формаларның дүрт стиле өчен гади билгеләр һәм стильләр тәкъдим итә.
| Исем | Класс | Тасвирлау |
|---|---|---|
| Вертикаль (килешү) | .form-vertical (таләп ителми) |
Контроль өстендә тезелгән, сул як ярлыклар |
| Киң төзелештә | .form-inline |
Сул тигезләнгән ярлык һәм компакт стиль өчен блок-контроль |
| Эзләү | .form-search |
Типик эзләү эстетикасы өчен өстәмә түгәрәк текст кертү |
| Горизонталь | .form-horizontal |
Контроль белән бер сызыкта сул, уң тигезләнгән ярлыклар |
Өстәмә билгеләрсез акыллы һәм җиңел дефолтлар.
- <форма класс = "яхшы" >
- <label> Ярлыкның исеме </label>
- <кертү тибы = "текст" класс = "span3" урын хуҗасы = "Нәрсәдер языгыз ..." >
- <span class = "help-block" > Монда блок дәрәҗәсендәге ярдәм тексты. </span>
- <label class = "checkbox" >
- <кертү тибы = "пункт" > Мине тикшерегез
- </label>
- <төймә тибы = "тапшыру" класс = "btn" > Тапшыру </button>
- </form>
Формага .form-searchһәм . .search-query_input
- <форма класс = "яхшы форма-эзләү" >
- <кертү тибы = "текст" класс = "кертү-урта эзләү-сорау" >
- <төймә тибы = "тапшыру" класс = "btn" > Эзләү </button>
- </form>
.form-inlineВертикаль тигезләү һәм форма белән идарә итү аралыгы нечкәлеккә өстәгез .
- <форма класс = "яхшы форма-сызык" >
- <кертү тибы = "текст" класс = "кертү-кечкенә" урын хуҗасы = "Электрон почта" >
- <кертү тибы = "серсүз" класс = "кертү-кечкенә" урын хуҗасы = "Серсүз" >
- <label class = "checkbox" >
- <кертү тибы = "пункт" > Мине исегездә тотыгыз
- </label>
- <төймә тибы = "тапшыру" класс = "btn" > Керү </button>
- </form>
Уң якта күрсәтелгән - без хуплаган барлык форма контрольләре. Менә пуля исемлеге:
Aboveгарыдагы мисал формасының макетын исәпкә алып, монда беренче кертү һәм контроль төркем белән бәйләнгән билгеләр. Стиллау өчен .control-group, .control-labelһәм .controlsкласслар кирәк.
- <форма класс = "форма-горизонталь" >
- <кыры>
- <legend> Легенда тексты </legend>
- <div class = "контроль-төркем" >
- <label class = "control-label" өчен = "input01" > Текст кертү </label>
- <div class = "контроль" >
- <кертү тибы = "текст" класс = "кертү-хларге" id = "кертү01" >
- <p class = "help-block" > Ярдәм текстына булышу </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap браузер ярдәмендә тупланган стильләр өчен стильләр disabled. Килешенгән Вебкитны бетерәбез outlineһәм box-shadowаның урынына кулланабыз :focus.
Бу шулай ук хаталар, кисәтүләр, уңыш өчен тикшерү стильләрен үз эченә ала. Куллану өчен, тирә-юньгә хата классын өстәгез .control-group.
- <кыр
- класс = "контроль-төркем хата" >
- …
- </fieldset>
Керү төркемнәре - кушылган яки алдан язылган текст белән - сезнең керемнәр өчен күбрәк контекст бирүнең җиңел ысулы. Зур мисалларга Твиттер кулланучы исемнәре өчен @ билге яки финанс өчен $ керә.
V1.4 кадәр, Bootstrap аларны урнаштыру өчен пунктлар һәм радио тирәсендә өстәмә билгеләр таләп итә. <label class="checkbox">Хәзер, бу гади әйберне кабатлау <input type="checkbox">.
Эчке тартмалар һәм радиолар да ярдәм итә. Бары тик .inlineтеләсә нинди әйберне .checkboxөстәгез .radio.
Алдан кертү яки кертүне кертү формасында куллану өчен, урынны .add-onбер inputүк сызыкка урнаштырыгыз.
Форма кертүләрегез өчен ярдәм текстын өстәү өчен , кертү элементыннан соң <span class="help-inline">ярдәм текстын яки ярдәм тексты блогын кертегез.<p class="help-block">
Eachәрбер иконаны өстәмә сорау ясау урынына, без аларны спритка тупладык - бер файлдагы рәсемнәр төркеме, алар белән CSS куллана background-position. Бу Twitter.com сайтында кулланган шул ук ысул һәм ул безнең өчен яхшы эшләде.
Барлык иконалар класслары .icon-, безнең бүтән компонентлар кебек, исемнәрне урнаштыру һәм эзләү өчен префиксланган. Бу бүтән кораллар белән конфликтлардан сакланырга ярдәм итәчәк.
Глификоннар безгә ачык чыганаклар коралында урнаштырылган Halflings кулланырга рөхсәт бирделәр, без монда документларда сылтама һәм кредит бирсәк. Зинһар, сезнең проектларда да шулай эшләргә уйлагыз.
Bootstrap <i>барлык иконалар өчен тег куллана, ләкин аларның очраклары юк - уртак префикс. Куллану өчен, түбәндәге кодны теләсә кайда урнаштырыгыз:
- <i класс = "иконка-эзләү" > </i>
Инверсия (ак) иконалар өчен стильләр дә бар, бер өстәмә класс белән әзер:
- <i класс = "иконка-эзләү иконасы-ак" > </i>
Сезнең иконалар өчен сайлау өчен 140 класс бар. Дөрес класслар белән тэг өстәгез, <i>сез куелдыгыз. Сез тулы исемлекне sprites.less яки монда таба аласыз.
Идарә итә! Текст сызыклары янында кулланганда, төймәләр яки диңгез сылтамалары кебек, <i>тиешле аралар өчен тегтан соң урын калдырыгыз.
Икона бик яхшы, ләкин аларны кайда кулланырга? Менә берничә идея:
Асылда, тегны кая гына <i>куйсаң да, икона куя аласың.
Аларны төймәләр, кораллар плитәсе, навигация яки алдан ясалган форма керемнәре өчен кулланыгыз.