Типография
Жаһандық параметрлерді, тақырыптарды, негізгі мәтінді, тізімдерді және т.б. қоса, Bootstrap типографиясына арналған құжаттама және мысалдар.
Ғаламдық параметрлер
Bootstrap негізгі жаһандық дисплейді, типографияны және сілтеме мәнерлерін орнатады. Қосымша бақылау қажет болғанда, мәтіндік қызметтік сыныптарды тексеріңіз .
- Әрбір ОЖ және құрылғы үшін ең жақсысын таңдайтын жергілікті қаріптер сағын пайдаланыңыз .
font-family
- Неғұрлым инклюзивті және қолжетімді тип шкаласы үшін біз браузердің әдепкі түбірін
font-size
(әдетте 16px) пайдаланамыз, осылайша келушілер браузерінің әдепкі параметрлерін қажетінше реттей алады. $font-family-base
,$font-size-base
және атрибуттарын$line-height-base
біздің типографиялық негіз ретінде пайдаланыңыз<body>
.- Жаһандық сілтеме түсін арқылы орнатыңыз
$link-color
және сілтеменің астын сызуды тек параметрінде қолданыңыз:hover
. - ( әдепкі бойынша) параметрін
$body-bg
орнату үшін пайдаланыңыз .background-color
<body>
#fff
Бұл стильдерді ішінде табуға болады _reboot.scss
және жаһандық айнымалылар ішінде анықталады _variables.scss
. Орнатқаныңызға көз жеткізіңіз $font-size-base
.rem
Тақырыптар
Барлық HTML тақырыптары <h1>
арқылы <h6>
қол жетімді.
Айдар | Мысал |
---|---|
<h1></h1> |
h1. Bootstrap тақырыбы |
<h2></h2> |
h2. Bootstrap тақырыбы |
<h3></h3> |
h3. Bootstrap тақырыбы |
<h4></h4> |
h4. Bootstrap тақырыбы |
<h5></h5> |
h5. Bootstrap тақырыбы |
<h6></h6> |
h6. Bootstrap тақырыбы |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
.h6
Тақырыптың қаріп стиліне сәйкес келгіңіз келсе, бірақ байланысты HTML элементін пайдалана алмасаңыз, сыныптар арқылы да қол жетімді.
h1. Bootstrap тақырыбы
h2. Bootstrap тақырыбы
h3. Bootstrap тақырыбы
h4. Bootstrap тақырыбы
h5. Bootstrap тақырыбы
h6. Bootstrap тақырыбы
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
Тақырыптарды теңшеу
Bootstrap 3 қолданбасынан шағын қосымша тақырып мәтінін қайта жасау үшін қосылған утилита сыныптарын пайдаланыңыз.
Әдемі дисплей тақырыбы Өшірілген қосымша мәтіні бар
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Тақырыптарды көрсету
Дәстүрлі тақырып элементтері бет мазмұнының ең жақсы жұмыс істеуі үшін жасалған. Бөлек болу үшін тақырып қажет болғанда, дисплей тақырыбын — үлкенірек, сәл көбірек пікір білдіретін тақырып стилін пайдалануды қарастырыңыз. Бұл тақырыптар әдепкі бойынша жауап бермейтінін есте сақтаңыз, бірақ жауап беретін қаріп өлшемдерін қосуға болады .
Дисплей 1 |
Дисплей 2 |
Дисплей 3 |
Дисплей 4 |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
Қорғасын
Қосу арқылы абзацты ерекшелендіріңіз .lead
.
Бұл жетекші абзац. Ол кәдімгі абзацтардан ерекшеленеді.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Кірістірілген мәтін элементтері
Жалпы кірістірілген HTML5 элементтері үшін стильдеу.
Белгі тегін пайдалана аласызбөлектеумәтін.
Мәтіннің бұл жолы жойылған мәтін ретінде қарастырылады.
Мәтіннің бұл жолы енді дәл емес деп есептелуі керек.
Мәтіннің бұл жолы құжатқа қосымша ретінде қарастырылады.
Мәтіннің бұл жолы асты сызылған түрде көрсетіледі
Мәтіннің бұл жолы жақсы басып шығару ретінде қарастырылады.
Бұл жол қалың мәтін ретінде көрсетілді.
Бұл жол курсив мәтін ретінде көрсетілді.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
және сыныптар тегтер әкелетін кез келген қажетсіз семантикалық салдарларды болдырмай , .small
бірдей стильдерді қолдану үшін қол жетімді .<mark>
<small>
Жоғарыда көрсетілмегенімен, HTML5 форматында пайдалануға <b>
болады <i>
. <b>
Бұл қосымша маңыздылықсыз сөздерді немесе сөз тіркестерін ерекшелеуге арналған, ал <i>
көбінесе дауыс, техникалық терминдер және т.б.
Мәтіндік утилиталар
Мәтінді туралауды, түрлендіруді, мәнерді, салмақты және түсті мәтіндік утилиталарымыз бен түс утилиталарымен өзгертіңіз .
Қысқартулар
<abbr>
Меңзердегі кеңейтілген нұсқаны көрсету үшін аббревиатуралар мен аббревиатуралар үшін HTML элементінің стильдендірілген орындалуы . Аббревиатураларда әдепкі асты сызылады және меңзерді жылжытқанда және көмекші технологияларды пайдаланушыларға қосымша мәтінмән беру үшін анықтама курсорын алады.
.initialism
Қаріп өлшемін сәл кішірек ету үшін аббревиатураға қосыңыз .
аттр
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Тырнақшалар
Құжатта басқа көзден алынған мазмұн блоктарын цитаталау үшін. <blockquote class="blockquote">
Кез келген HTML -ді дәйексөз ретінде орап алыңыз .
Блок тырнақша элементінде қамтылған белгілі дәйексөз.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Дереккөзді атау
<footer class="blockquote-footer">
Дереккөзді анықтау үшін қосыңыз . Дереккөз жұмысының атын ораңыз <cite>
.
Блок тырнақша элементінде қамтылған белгілі дәйексөз.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Туралау
Блоктауыштың туралануын өзгерту үшін қажетінше мәтіндік утилиталарды пайдаланыңыз.
Блок тырнақша элементінде қамтылған белгілі дәйексөз.
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Блок тырнақша элементінде қамтылған белгілі дәйексөз.
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Тізімдер
Стильсіз
Тізім элементтеріндегі әдепкі list-style
және сол жақ жиекті алып тастаңыз (тек тікелей балалар үшін). Бұл тек тікелей балалар тізімінің элементтеріне қатысты , яғни кез келген кірістірілген тізімдер үшін де сыныпты қосу қажет болады.
- Бұл тізім.
- Ол мүлдем стильсіз болып көрінеді.
- Құрылымдық жағынан бұл әлі де тізім.
- Дегенмен, бұл стиль тек тікелей еншілес элементтерге қолданылады.
- Кірістірілген тізімдер:
- бұл стиль әсер етпейді
- әлі де оқ көрсетеді
- және тиісті сол жақ жиегі бар
- Бұл кейбір жағдайларда әлі де пайдалы болуы мүмкін.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
Кезекте
Тізім таңбаларын алып тастап, margin
екі сыныптың .list-inline
және .list-inline-item
.
- Бұл тізім элементі.
- Және тағы біреуі.
- Бірақ олар кірістірілген түрде көрсетіледі.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
Сипаттама тізімін туралау
Тор жүйеміздің алдын ала анықталған сыныптарын (немесе семантикалық қоспаларды) пайдалану арқылы терминдер мен сипаттамаларды көлденеңінен туралаңыз. Ұзағырақ терминдер .text-truncate
үшін мәтінді эллипспен қысқарту үшін қосымша сынып қосуға болады.
- Сипаттама тізімдері
- Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.
- Мерзімі
-
Терминге анықтама.
Тағы біраз толтырғыш анықтамасының мәтіні.
- Басқа термин
- Бұл анықтама қысқа, сондықтан қосымша абзацтар немесе ештеңе жоқ.
- Қысқартылған термин қысқартылды
- Бұл кеңістік тар болған кезде пайдалы болуы мүмкін. Соңында эллипс қосады.
- Ұя салу
-
- Кірістірілген анықтамалар тізімі
- Сізге анықтамалар тізімі ұнайтынын естідім. Анықтамалар тізіміне анықтамалар тізімін қоюға рұқсат етіңіз.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
Жауапты қаріп өлшемдері
v4.3.0 нұсқасы бойынша Bootstrap жауап беретін қаріп өлшемдерін қосу опциясымен жеткізіледі, бұл мәтінді құрылғы мен көру терезесі өлшемдері бойынша табиғи түрде масштабтауға мүмкіндік береді. RFS$enable-responsive-font-sizes
мүмкіндігін Sass айнымалы мәнін true
Bootstrap түріне өзгерту және қайта құрастыру арқылы қосуға болады .
RFS қолдауы үшін біз қалыпты font-size
қасиеттерімізді ауыстыру үшін Sass араластырғышын қолданамыз. Жауапты қаріп өлшемдері жауап беретін масштабтау әрекетін қосу үшін және көру порты бірліктерінің calc()
араласуы бар функцияларға жинақталады. RFS және оның конфигурациясы rem
туралы толығырақ оның GitHub репозиторийінен табуға болады .