វាយអក្សរ
ឯកសារ និងឧទាហរណ៍សម្រាប់ការវាយអក្សរ Bootstrap រួមទាំងការកំណត់សកល ចំណងជើង អត្ថបទតួ បញ្ជី និងច្រើនទៀត។
Bootstrap កំណត់ការបង្ហាញសកលជាមូលដ្ឋាន វាយអក្សរ និងរចនាប័ទ្មតំណ។ នៅពេលត្រូវការការគ្រប់គ្រងបន្ថែមទៀត សូមពិនិត្យមើល ថ្នាក់ឧបករណ៍ប្រើប្រាស់អត្ថបទ ។
- ប្រើ ជង់ពុម្ពអក្សរដើម ដែលជ្រើសរើសល្អបំផុត
font-family
សម្រាប់ប្រព័ន្ធប្រតិបត្តិការ និងឧបករណ៍នីមួយៗ។ - សម្រាប់មាត្រដ្ឋានប្រភេទដែលរួមបញ្ចូល និងអាចចូលប្រើបានកាន់តែច្រើន យើងសន្មត់ថាជា root លំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត
font-size
(ជាធម្មតា 16px) ដូច្នេះអ្នកទស្សនាអាចប្ដូរលំនាំដើមកម្មវិធីរុករកតាមបំណងរបស់ពួកគេតាមតម្រូវការ។ - ប្រើ
$font-family-base
,$font-size-base
, និង$line-height-base
គុណលក្ខណៈជាមូលដ្ឋានវាយអក្សររបស់យើងដែលបានអនុវត្តចំពោះ<body>
. - កំណត់ពណ៌តំណសកលតាមរយៈ
$link-color
និងអនុវត្តការគូសបន្ទាត់ក្រោមតំណតែលើ:hover
. - ប្រើ
$body-bg
ដើម្បីកំណត់ abackground-color
នៅលើ<body>
(#fff
តាមលំនាំដើម)។
រចនាប័ទ្មទាំងនេះអាចត្រូវបានរកឃើញនៅក្នុង _reboot.scss
ហើយអថេរសកលត្រូវបានកំណត់នៅក្នុង _variables.scss
. ត្រូវប្រាកដថា $font-size-base
កំណត់ rem
។
ចំណងជើង HTML ទាំងអស់ <h1>
មាន <h6>
។
ក្បាល | ឧទាហរណ៍ |
---|---|
|
h1. ក្បាល Bootstrap |
|
h2. ក្បាល Bootstrap |
|
h3. ក្បាល Bootstrap |
|
h4. ក្បាល Bootstrap |
|
h5. ក្បាល Bootstrap |
|
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
។
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor ។ Duis mollis គឺជា luctus ដែលមិនមែនជាទំនិញ។
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>
ខណៈពេលដែលជៀសវាងការជាប់ពាក់ព័ន្ធអត្ថន័យដែលមិនចង់បានដែលស្លាកនឹងនាំមក។
ខណៈពេលដែលមិនបានបង្ហាញខាងលើ សូមមានអារម្មណ៍សេរីក្នុងការប្រើប្រាស់ <b>
និង <i>
នៅក្នុង HTML5។ <b>
មានន័យដើម្បីបន្លិចពាក្យឬឃ្លាដោយមិនបង្ហាញពីសារៈសំខាន់បន្ថែមទៀតខណៈពេលដែល <i>
ភាគច្រើនគឺជាសំឡេង, ពាក្យបច្ចេកទេស, ល
ផ្លាស់ប្តូរការតម្រឹមអត្ថបទ បំប្លែង រចនាប័ទ្ម ទម្ងន់ និងពណ៌ជាមួយនឹង ឧបករណ៍ប្រើប្រាស់អត្ថបទ និង ឧបករណ៍ប្រើប្រាស់ ពណ៌ របស់យើង ។
ការអនុវត្តរចនាប័ទ្មនៃ <abbr>
ធាតុរបស់ HTML សម្រាប់អក្សរកាត់ និងអក្សរកាត់ដើម្បីបង្ហាញកំណែដែលបានពង្រីកនៅលើដាក់លើ។ អក្សរកាត់មានលំនាំដើមគូសបន្ទាត់ពីក្រោម និងទទួលបានទស្សន៍ទ្រនិចជំនួយដើម្បីផ្តល់បរិបទបន្ថែមលើការសង្កត់លើ និងដល់អ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ។
បន្ថែម .initialism
ទៅអក្សរកាត់សម្រាប់ទំហំពុម្ពអក្សរតូចជាងបន្តិច។
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
សម្រាប់ការដកស្រង់ប្លុកនៃមាតិកាពីប្រភពផ្សេងទៀតនៅក្នុងឯកសាររបស់អ្នក។ រុំ <blockquote class="blockquote">
ជុំវិញ HTML ណាមួយ ជាសម្រង់។
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
បន្ថែម a <footer class="blockquote-footer">
សម្រាប់កំណត់អត្តសញ្ញាណប្រភព។ រុំឈ្មោះរបស់ប្រភពការងារនៅក្នុង <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ប្រើឧបករណ៍ប្រើប្រាស់អត្ថបទតាមតម្រូវការ ដើម្បីផ្លាស់ប្តូរការតម្រឹមនៃប្លុកសម្រង់របស់អ្នក។
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
លុបលំនាំដើម list-style
និងរឹមខាងឆ្វេងនៅលើធាតុបញ្ជី (កុមារភ្លាមៗប៉ុណ្ណោះ)។ នេះអនុវត្តតែចំពោះធាតុបញ្ជីកុមារភ្លាមៗ មានន័យថាអ្នកនឹងត្រូវបន្ថែមថ្នាក់សម្រាប់បញ្ជីដែលជាប់ពាក់ព័ន្ធណាមួយផងដែរ។
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- ចំនួនគត់ molestie lorem និង massa
- Facilisis នៅក្នុង Pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat នៅ
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
ដកចំណុចនៃបញ្ជីចេញ ហើយអនុវត្តពន្លឺមួយចំនួន margin
ដោយការរួមបញ្ចូលគ្នានៃថ្នាក់ពីរ .list-inline
និង .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
តម្រឹមពាក្យ និងការពិពណ៌នាដោយផ្ដេក ដោយប្រើថ្នាក់ដែលបានកំណត់ជាមុននៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង (ឬ mixins semantic) ។ សម្រាប់ពាក្យវែងជាង អ្នកអាចបន្ថែម .text-truncate
ថ្នាក់ជាជម្រើសដើម្បីកាត់អត្ថបទដោយរាងពងក្រពើ។
- បញ្ជីពិពណ៌នា
- បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
- អ៊ីស្មូដ
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit ។
Donec id elit non mi porta gravida នៅ eget metus។
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod ។
- ពាក្យកាត់ត្រូវបានកាត់ឱ្យខ្លី
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus។
- សំបុក
-
- បញ្ជីនិយមន័យដែលលាក់
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc ។
<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">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
ការវាយអក្សរដែលឆ្លើយតប សំដៅលើការធ្វើមាត្រដ្ឋានអត្ថបទ និងសមាសធាតុដោយគ្រាន់តែកែតម្រូវធាតុឫស font-size
នៅក្នុងស៊េរីនៃសំណួរមេឌៀ។ Bootstrap មិនធ្វើបែបនេះសម្រាប់អ្នកទេ ប៉ុន្តែវាងាយស្រួលក្នុងការបន្ថែមប្រសិនបើអ្នកត្រូវការវា។
នេះជាឧទាហរណ៍ក្នុងការអនុវត្ត។ ជ្រើសរើសអ្វីក៏ដោយ font-size
s និងសំណួរប្រព័ន្ធផ្សព្វផ្សាយដែលអ្នកចង់បាន។
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}