Базалық HTML элементтері жаңа, дәйекті көрініс пен сезімді қамтамасыз ету үшін кеңейтілетін сыныптармен стильдендірілген және жетілдірілген.
Бүкіл типографиялық тор біздің variables.less файлындағы екі Less айнымалысына негізделген: @baseFontSizeжәне @baseLineHeight. Біріншісі - бүкіл қолданылатын негізгі қаріп өлшемі, екіншісі - негізгі жолдың биіктігі.
Біз осы айнымалы мәндерді және кейбір математиканы барлық түріміздің жиектерін, толтырғыштарын және жол биіктігін және т.б. жасау үшін қолданамыз.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Идентификатордың идентификаторы жоқ.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Doec 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.
Ескертпе:<b> HTML5 - де қолдануға <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 elit. 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">
Ескерту! Көлденең сипаттама тізімдері сол жақ баған түзетуіне сыймайтын тым ұзын терминдерді қысқартады text-overflow. Тар көрініс порттарында олар әдепкі жинақталған орналасуға өзгереді.
Кодтың кірістірілген үзінділерін арқылы ораңыз <code>.
- Мысалы , <code> бөлімі </ code > кірістірілген ретінде оралуы керек .
<pre>Кодтың бірнеше жолы үшін пайдаланыңыз . Дұрыс көрсету үшін кодтағы кез келген бұрыштық жақшалардан құтылуды ұмытпаңыз.
<p>Үлгі мәтін осында...</p>
- <алдын ала>
- <p>Үлгі мәтін осында...</p>
- </pre>
Ескерту:<pre> Тегтердегі кодты мүмкіндігінше солға жақын ұстауды ұмытпаңыз ; ол барлық қойындыларды көрсетеді.
.pre-scrollableСіз 350 пиксель максимум биіктігін орнататын және у осінің айналдыру жолағын қамтамасыз ететін сыныпты қосуға болады.
Бірдей <pre>элементті алыңыз және жақсартылған көрсету үшін екі қосымша сыныпты қосыңыз.
- <p> Мәтін үлгісі осында... </p>
- <алдын ала сынып = "prettyprint
- linenums» >
- <p>Үлгі мәтін осында...</p>
- </pre>
Google-code-prettify жүктеп алыңыз және оны қалай пайдалану керектігін қараңыз.
| Тег | Сипаттама |
|---|---|
<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>
- </кесте>
| Аты | Сынып | Сипаттама |
|---|---|---|
| Әдепкі | Жоқ | Стильдер жоқ, тек бағандар мен жолдар |
| Негізгі | .table |
Жолдар арасындағы тек көлденең сызықтар |
| Шектелген | .table-bordered |
Бұрыштарды дөңгелектейді және сыртқы жиекті қосады |
| Зебра жолағы | .table-striped |
Тақ жолдарға ашық сұр фон түсін қосады (1, 3, 5, т.б.) |
| Конденсацияланған | .table-condensed |
tdБарлық және thэлементтер ішінде 8 пиксельден 4 пиксельге дейін тік толтыруды екіге бөледі |
Оқуды қамтамасыз ету және құрылымды сақтау үшін кестелер автоматты түрде бірнеше жиектермен стильденеді. 2.0 нұсқасымен .tableсынып қажет.
- <кесте класы = "кесте" >
- …
- </кесте>
| # | Аты | Тек | Пайдаланушы аты |
|---|---|---|---|
| 1 | белгі | Отто | @mdo |
| 2 | Джейкоб | Торнтон | @май |
| 3 | Ларри | құс |
Зебра жолақтарын қосу арқылы кестелеріңізбен аздап сәнді болыңыз — тек .table-stripedсыныпты қосыңыз.
Ескертпе: Жолақты кестелер :nth-childCSS селекторын пайдаланады және IE7-IE8 нұсқасында қол жетімді емес.
- <кесте класы = "кесте жолақты кесте" >
- …
- </кесте>
| # | Аты | Тек | Пайдаланушы аты |
|---|---|---|---|
| 1 | белгі | Отто | @mdo |
| 2 | Джейкоб | Торнтон | @май |
| 3 | Ларри | құс |
Эстетикалық мақсаттар үшін бүкіл үстелдің айналасында жиектер мен дөңгелек бұрыштарды қосыңыз.
- <кесте класы = "кестемен жиектелген" >
- …
- </кесте>
| # | Аты | Тек | Пайдаланушы аты |
|---|---|---|---|
| 1 | белгі | Отто | @mdo |
| белгі | Отто | @getbootstrap | |
| 2 | Джейкоб | Торнтон | @май |
| 3 | Ларри құс | ||
Кесте ұяшық толтырғышын екіге (8 пиксельден 4 пиксельге дейін) қысқарту үшін сыныпты қосу арқылы кестелеріңізді .table-condensedықшамдаңыз.
- <кесте класы = "кесте-конденсацияланған кесте" >
- …
- </кесте>
| # | Аты | Тек | Пайдаланушы аты |
|---|---|---|---|
| 1 | белгі | Отто | @mdo |
| 2 | Джейкоб | Торнтон | @май |
| 3 | Ларри құс | ||
Кез келген қолжетімді сыныптарды пайдалану арқылы әртүрлі көріністерге қол жеткізу үшін кесте сыныптарының кез келгенін біріктіруге болады.
- <кесте класы = "үстел кесте жолақты кесте жиектелген кесте ықшамдалған" >
- ...
- </кесте>
| Толық аты | |||
|---|---|---|---|
| # | Аты | Тек | Пайдаланушы аты |
| 1 | белгі | Отто | @mdo |
| 2 | Джейкоб | Торнтон | @май |
| 3 | Ларри құс | ||
Bootstrap бағдарламасындағы пішіндердің ең жақсы бөлігі - сіздің барлық енгізулеріңіз бен басқару элементтеріңіз оларды түзетуде қалай құрастырсаңыз да тамаша көрінеді. Артық HTML талап етілмейді, бірақ біз оны қажет ететіндерге үлгілерді береміз.
Күрделі орналасулар оңай сәндеуге және оқиғаларды байланыстыруға арналған қысқаша және масштабталатын сыныптармен келеді, сондықтан сіз әр қадамда қамтыласыз.
Bootstrap пішін макеттерінің төрт түріне қолдау көрсетеді:
Пішін орналасуларының әртүрлі түрлері белгілеу үшін кейбір өзгерістерді талап етеді, бірақ басқару элементтерінің өздері қалады және бірдей әрекет етеді.
Bootstrap пішіндері енгізу, мәтіндік аумақ және сіз күткен таңдау сияқты барлық негізгі пішін басқару элементтеріне арналған мәнерлерді қамтиды. Бірақ ол сонымен қатар қосылған және алдын ала енгізілген енгізулер және құсбелгілер тізімдерін қолдау сияқты бірқатар реттелетін компоненттермен бірге келеді.
Қате, ескерту және сәттілік сияқты күйлер пішінді басқарудың әрбір түріне қосылады. Сондай-ақ ажыратылған басқару элементтеріне арналған мәнерлер қамтылған.
Bootstrap қарапайым веб-пішіндердің төрт стилі үшін қарапайым белгілеу мен стильдерді қамтамасыз етеді.
| Аты | Сынып | Сипаттама |
|---|---|---|
| Тік (әдепкі) | .form-vertical (қажет емес) |
Басқару элементтерінің үстіне жинақталған, солға тураланған белгілер |
| Кезекте | .form-inline |
Ықшам стиль үшін солға реттелген жапсырма және кірістірілген блокты басқару элементтері |
| Іздеу | .form-search |
Әдеттегі іздеу эстетикасы үшін қосымша дөңгелек мәтін енгізу |
| Көлденең | .form-horizontal |
Солға, оңға тураланған белгілерді басқару элементтерімен бір жолда жылжытыңыз |
Қосымша белгілеусіз ақылды және жеңіл әдепкі мәндер.
- <форма класы = «жақсы» >
- <label> Белгі атауы </label>
- <input type = "text" class = "span3" placeholder = "Bir нәрсе теріңіз..." >
- <span class = "help-block" > Блок деңгейіндегі анықтама мәтінінің мысалы осында. </span>
- <label class = "құсбелгі" >
- <енгізу түрі = "құсбелгі" > Мені тексеріңіз
- </label>
- <button type = "submit" class = "btn" > Жіберу </button>
- </form>
Пішінге .form-searchжәне . .search-query_input
- <форма класы = «жақсы пішін іздеу» >
- <енгізу түрі = «мәтін» класы = «енгізу-орташа іздеу-сұрау» >
- <button type = "submit" class = "btn" > Search </button>
- </form>
.form-inlineПішін басқару элементтерінің тік туралануын және аралығын дәлдікке қосыңыз .
- <пішін класы = «ұңғыма-inline» >
- <енгізу түрі = «мәтін» сыныбы = «енгізу-кіші» толтырғыш = «Электрондық пошта» >
- <input type = "password" class = "input-small" толтырғышы = "Пароль" >
- <label class = "құсбелгі" >
- <енгізу түрі = "құсбелгі" > Мені есте сақта
- </label>
- <button type = "submit" class = "btn" > Жүйеге кіру </button>
- </form>
Оң жақта біз қолдайтын барлық әдепкі пішін басқару элементтері көрсетілген. Міне маркерленген тізім:
Жоғарыда келтірілген үлгі пішінінің орналасуын ескере отырып, бірінші енгізу және басқару тобымен байланысты белгілеу осында. , .control-group, .control-labelжәне .controlsсыныптарының барлығы сәндеу үшін қажет.
- <форма класы = "форма-көлденең" >
- <өріс жинағы>
- <legend> Аңыз мәтіні </legend>
- <div class = "басқару тобы" >
- <label class = "control-label" for = "input01" > Мәтін енгізу </label>
- <div class = "басқару элементтері" >
- <енгізу түрі = «мәтін» класс = «input-xlarge» id = «input01» >
- <p class = "help-block" > Қолдау көрсетілетін анықтама мәтіні </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap браузер қолдайтын фокустар мен disabledкүйлерге арналған стильдерді ұсынады. Біз әдепкі Webkit-ті алып тастаймыз және оның орнына outlinea қолданамыз .box-shadow:focus
Ол сондай-ақ қателер, ескертулер және сәттілік үшін тексеру мәнерлерін қамтиды. Пайдалану үшін қате сыныбын қоршаған ортаға қосыңыз .control-group.
- <өріс жинағы
- class = "басқару тобының қатесі" >
- …
- </fieldset>
Енгізу топтары — қосылған немесе алдын ала мәтіні бар — енгізулеріңізге көбірек мәтінмән берудің оңай жолын қамтамасыз етеді. Керемет мысалдарға Twitter пайдаланушы аттары үшін @ белгісі немесе қаржы үшін $ кіреді.
V1.4 нұсқасына дейін Bootstrap оларды жинақтау үшін құсбелгілер мен радиолардың айналасында қосымша белгілеуді қажет етті. <label class="checkbox">Енді орамды қайталау қарапайым мәселе <input type="checkbox">.
Кірістірілген құсбелгілер мен радиоларға да қолдау көрсетіледі. .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>тег қоюға болады, белгішені қоюға болады.
Оларды түймелерде, құралдар тақтасы үшін түймелер топтарында, шарлау немесе алдын ала берілген пішін енгізулерінде пайдаланыңыз.