Типографик масштаб

Бөтен типографик челтәр безнең үзгәрүчән.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 транспорт чарасы.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor аукторы. Duis mollis, коммерция булмаган луктус, портитор лигула, ec lacinia odio sem nec elit. Donec sed odio dui.

Басым куллану

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

Мисал кыскартулар

Кыскартулар баш хәреф тексты һәм җиңел нокта асты чик белән ясалган. Аларның шулай ук ​​йөртү курсоры бар, шуңа күрә кулланучылар өстәмә күрсәткечләр бар, каядыр күрсәтеләчәк.

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

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

Блоккотны кертү өчен, <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>

• Лорем ипсум долор амет утыра
• 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="unstyled">

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

Заказлы

<ol>

1. Лорем ипсум долор амет утыра
2. Consectetur adipiscing elit
3. Массадагы тулы молести лорем
4. Претиум нисл аликетында фасилис
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Энеан утыра
8. Порттор лоремасын алыгыз

Тасвирлау

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

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

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

Мәсәлән , <код> бүлеге </ code > сызык итеп төрелергә тиеш .  

Төп блок

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

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

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

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

Google Prettify

Бер үк <pre>элементны алыгыз һәм көчәйтелгән күрсәтү өчен ике өстәмә класс өстәгез.

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

<pre class = "prettyprint 
     тукымалар " >
  & lt; p & gt; Монда үрнәк текст ... & lt; / p & gt;
</pre>

Google-code-prettify-ны йөкләү һәм куллану өчен укуны карау.

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

Таблицалар автоматик рәвештә берничә чик белән генә ясалган, укуны тәэмин итү һәм структураны саклау. 2.0 белән .tableкласс кирәк.

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

Зебра-стрипинг өстәп, өстәлләрегез белән бераз хыялланыгыз - .table-stripedклассны өстәгез.

Искәрмә: язылган таблицалар :nth-childCSS селекторын кулланалар һәм IE7-IE8 мөмкин түгел.

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

Эстетик максатларда бөтен өстәл һәм түгәрәк почмаклар чикләрен өстәгез.

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

Өстәл күзәнәкләрен ябыштыру өчен класс өстәп, өстәлләрегезне тагын да тыгызрак .table-condensedитегез (8px-dan 4px-га кадәр).

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

Төрле класслардан файдаланып, төрле кыяфәткә ирешү өчен өстәл классларының теләсә кайсысын берләштерергә иренегез.

<өстәл классы = "өстәл таблицасы сызыклы өстәл белән чикләнгән өстәл конденсацияләнгән" > 
  ...
</table>

Эластик HTML һәм CSS

Bootstrap формаларының иң яхшы ягы - сезнең барлык керемнәрегез һәм контрольләрегез, сез аларны ничек билгеләсәгез дә, бик яхшы күренәләр. Артык HTML кирәк түгел, ләкин без аны таләп итүчеләр өчен үрнәкләр тәкъдим итәбез.

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

Дүрт макет кертелгән

Bootstrap дүрт төр форма ярдәме белән килә:

• Вертикаль (килешү)
• Эзләү
• Киң төзелештә
• Горизонталь

Төрле форма макетлары билгеләргә кайбер үзгәрешләр таләп итә, ләкин контрольләр үзләре кала һәм үзләрен шулай тоталар.

Контроль хәлләр һәм башкалар

Bootstrap формаларына кертү, текстария кебек төп форма контроле өчен стильләр керә, һәм сез көткәнне сайлагыз. Ләкин ул шулай ук ​​кушылган һәм алдан кертелгән керемнәр һәм пунктлар исемлеге өчен ярдәм кебек махсус компонентлар белән килә.

Хата, кисәтү, уңыш кебек дәүләтләр форма белән идарә итүнең һәр төре өчен кертелгән. Инвалид контроль өчен стильләр дә кертелгән.

V2.0 ярдәмендә бездә форма стильләре өчен җиңелрәк һәм акыллырак дефолтлар бар. Өстәмә билгеләр юк, контроль форма гына.

Килештерелгән WebKit стильләрен чагылдыру, .form-searchөстәмә түгәрәк эзләү кырлары өчен өстәгез.

Керүләр - башлау өчен блок дәрәҗәсе. Forәм без .form-inline, .form-horizontalблокны кулланабыз.

Нәрсә кертелгән

Сул якта күрсәтелгән - без хуплаган барлык форма контрольләре. Менә пуля исемлеге:

• текст керемнәре (текст, серсүз, электрон почта һ.б.)
• пункт
• радио
• сайлагыз
• күп сайлау
• файл кертү
• текст

V2.0 белән яңа дефолтлар

V1.4 кадәр, Bootstrap'ның формаль стильләре горизонталь макетны кулланган. Bootstrap 2 ярдәмендә без теләсә нинди форма өчен акыллырак, масштаблы дефолтлар булу өчен бу чикләнүне бетердек.

Яңартылган браузер

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

Эшләр өчен төймәләр

Конвенция буларак, төймәләр хәрәкәтләр өчен генә кулланылырга тиеш, ә гипершилтемнәр объектлар өчен кулланылырга тиеш. Мәсәлән, "Йөкләү" төймә булырга тиеш, ә "соңгы эшчәнлек" сылтама булырга тиеш.

Анкорлар һәм формалар өчен

Кнопка стильләре кулланылган теләсә нинди әйбердә .btnкулланылырга мөмкин. <a>Ләкин, гадәттә, сез аларны һәм <button>элементларга гына кулланырга теләрсез .

Искәрмә:.btn Барлык төймәләр дә классны кертергә тиеш . Төплек стильләре эзлеклелек өчен <button>кулланылырга тиеш .<a>

Берничә зурлык

Зуррак яки кечерәк төймәләр? Бул!

Беренчел чара Эш

Беренчел чара Эш

Инвалид хәл

Инвалид төймәләр .btn-disabledөчен сылтамалар һәм элементлар :disabledөчен кулланыгыз.<button>

Беренчел чара Эш

Беренчел чара Эш

Браузерның яраклашуы

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

Бәйләнешле, IE9 инвалид buttonэлементларны шаккатыра, начар текст күләгәсе белән соры текстны күрсәтә - кызганычка каршы, без моны төзәтә алмыйбыз.

Сприт рәвешендә төзелгән

Eachәрбер иконаны өстәмә сорау ясау урынына, без аларны спритка тупладык - бер файлдагы рәсемнәр төркеме, алар белән CSS куллана background-position. Бу Twitter.com сайтында кулланган шул ук ысул һәм ул безнең өчен яхшы эшләде.

Барлык иконалар класслары .icon-, безнең бүтән компонентлар кебек, исемнәрне урнаштыру һәм эзләү өчен префиксланган. Бу бүтән кораллар белән конфликтлардан сакланырга ярдәм итәчәк.

Глификоннар безгә ачык чыганаклар коралында урнаштырылган Halflings кулланырга рөхсәт бирделәр, без монда документларда сылтама һәм кредит бирсәк. Зинһар, сезнең проектларда да шулай эшләргә уйлагыз.

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

V2.0.0 ярдәмендә без <i>бөтен иконаларыбыз өчен тег кулланырга булдык, ләкин аларның очраклары юк - уртак префикс кына. Куллану өчен, түбәндәге кодны теләсә кайда урнаштырыгыз:

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

Инверсия (ак) иконалар өчен стильләр дә бар, бер өстәмә класс белән әзер:

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

Сезнең иконалар өчен сайлау өчен 120 класс бар. Дөрес класслар белән тэг өстәгез, <i>сез куелдыгыз. Сез тулы исемлекне sprites.less яки монда таба аласыз.

Эшләрне кулланыгыз

Икона бик яхшы, ләкин аларны кайда кулланырга? Менә берничә идея:

• Сезнең ян ягы навигациясе өчен визуаль
• Икона белән идарә ителгән навигация өчен
• Эшнең мәгънәсен җиткерү өчен төймәләр өчен
• Кулланучының максатында контекстны бүлешү өчен сылтамалар белән

Асылда, тегны кая гына <i>куйсаң да, икона куя аласың.

Яңарту Тишерү Бетерү

Аңлатма Көйләүләр Тулырак