វាយអក្សរ
ឯកសារ និងឧទាហរណ៍សម្រាប់ការវាយអក្សរ Bootstrap រួមទាំងការកំណត់សកល ចំណងជើង អត្ថបទតួ បញ្ជី និងច្រើនទៀត។
ការកំណត់សកល
Bootstrap កំណត់ការបង្ហាញសកលជាមូលដ្ឋាន វាយអក្សរ និងរចនាប័ទ្មតំណ។ នៅពេលដែលត្រូវការការគ្រប់គ្រងបន្ថែមទៀត សូមពិនិត្យមើល ថ្នាក់ឧបករណ៍ប្រើប្រាស់អត្ថបទ ។
- ប្រើ ជង់ពុម្ពអក្សរដើម ដែលជ្រើសរើសល្អបំផុត
font-family
សម្រាប់ប្រព័ន្ធប្រតិបត្តិការ និងឧបករណ៍នីមួយៗ។ - សម្រាប់មាត្រដ្ឋានប្រភេទដែលរួមបញ្ចូល និងអាចចូលប្រើបានកាន់តែច្រើន យើងប្រើឫសលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត
font-size
(ជាធម្មតា 16px) ដូច្នេះអ្នកទស្សនាអាចប្ដូរលំនាំដើមកម្មវិធីរុករកតាមបំណងតាមតម្រូវការ។ - ប្រើ
$font-family-base
,$font-size-base
, និង$line-height-base
គុណលក្ខណៈជាមូលដ្ឋានវាយអក្សររបស់យើងដែលបានអនុវត្តចំពោះ<body>
. - កំណត់ពណ៌តំណសកលតាមរយៈ
$link-color
. - ប្រើ
$body-bg
ដើម្បីកំណត់ abackground-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>
បង្ហាញចំណងជើង
ធាតុចំណងជើងបែបប្រពៃណីត្រូវបានរចនាឡើងដើម្បីដំណើរការល្អបំផុតនៅក្នុងសាច់នៃមាតិកាទំព័ររបស់អ្នក។ នៅពេលដែលអ្នកត្រូវការចំណងជើងដើម្បីលេចធ្លោ សូមពិចារណាប្រើ ចំណងជើងបង្ហាញ — រចនាប័ទ្មក្បាលដែលធំជាង និងមានគំនិតច្រើនជាងបន្តិច។
<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
ក្បាលបង្ហាញត្រូវបានកំណត់រចនាសម្ព័ន្ធតាមរយៈ $display-font-sizes
ផែនទី Sass និងអថេរពីរ $display-font-weight
និង $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
នាំមុខ
ធ្វើឱ្យកថាខណ្ឌលេចធ្លោដោយបន្ថែម .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>
តំណាងឱ្យមតិយោបល់ចំហៀង និងការបោះពុម្ពតូច ដូចជាអត្ថបទរក្សាសិទ្ធិ និងច្បាប់។<s>
តំណាងឱ្យធាតុដែលមិនពាក់ព័ន្ធ ឬមិនមានភាពត្រឹមត្រូវទៀតទេ។<u>
តំណាងឱ្យវិសាលភាពនៃអត្ថបទក្នុងជួរ ដែលគួរតែត្រូវបានបង្ហាញតាមរបៀបដែលបង្ហាញថាវាមានចំណារពន្យល់ដែលមិនមែនជាអត្ថបទ។
ប្រសិនបើអ្នកចង់ធ្វើរចនាប័ទ្មអត្ថបទរបស់អ្នក អ្នកគួរតែប្រើថ្នាក់ខាងក្រោមជំនួសវិញ៖
.mark
នឹងអនុវត្តរចនាប័ទ្មដូចគ្នានឹង<mark>
..small
នឹងអនុវត្តរចនាប័ទ្មដូចគ្នានឹង<small>
..text-decoration-underline
នឹងអនុវត្តរចនាប័ទ្មដូចគ្នានឹង<u>
..text-decoration-line-through
នឹងអនុវត្តរចនាប័ទ្មដូចគ្នានឹង<s>
.
ខណៈពេលដែលមិនបានបង្ហាញខាងលើ សូមមានអារម្មណ៍សេរីក្នុងការប្រើប្រាស់ <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 ណាមួយ ជាសម្រង់។
សម្រង់ដែលមានឈ្មោះល្បីមាននៅក្នុងធាតុសម្រង់ប្លុក។
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
ការដាក់ឈ្មោះប្រភព
លក្ខណៈបច្ចេកទេសរបស់ HTML តម្រូវឱ្យកំណត់គុណលក្ខណៈ blockquote ត្រូវបានដាក់នៅខាងក្រៅ <blockquote>
. នៅពេលផ្តល់គុណលក្ខណៈ សូមរុំរបស់អ្នក <blockquote>
ក្នុង a <figure>
និងប្រើ <figcaption>
ធាតុកម្រិតប្លុក (ឧ. <p>
) ជាមួយ .blockquote-footer
ថ្នាក់។ ត្រូវប្រាកដថាបានរុំឈ្មោះនៃប្រភពធ្វើការ <cite>
ផងដែរ។
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
ការតម្រឹម
ប្រើឧបករណ៍ប្រើប្រាស់អត្ថបទតាមតម្រូវការ ដើម្បីផ្លាស់ប្តូរការតម្រឹមនៃសម្រង់ប្លុករបស់អ្នក។
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
បញ្ជី
គ្មានរចនាប័ទ្ម
លុបលំនាំដើម 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>
ការតម្រឹមបញ្ជីពិពណ៌នា
តម្រឹមពាក្យ និងការពិពណ៌នាដោយផ្ដេកដោយប្រើថ្នាក់ដែលបានកំណត់ជាមុននៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង (ឬ mixins ន័យ) ។ សម្រាប់ពាក្យវែងជាងនេះ អ្នកអាចបន្ថែម .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>
ទំហំពុម្ពអក្សរដែលឆ្លើយតប
នៅក្នុង Bootstrap 5 យើងបានបើកទំហំពុម្ពអក្សរដែលឆ្លើយតបតាមលំនាំដើម ដែលអនុញ្ញាតឱ្យអត្ថបទធ្វើមាត្រដ្ឋានកាន់តែធម្មជាតិតាមទំហំឧបករណ៍ និងទិដ្ឋភាព។ សូមក្រឡេកមើល ទំព័រ RFS ដើម្បីស្វែងយល់ពីរបៀបដែលវាដំណើរការ។
សាស
អថេរ
ក្បាលមានអថេរជាក់លាក់មួយចំនួនសម្រាប់ទំហំ និងគម្លាត។
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
ធាតុវាយអក្សរផ្សេងៗដែលគ្របដណ្តប់នៅទីនេះ ហើយនៅក្នុង Reboot ក៏មានអថេរពិសេសផងដែរ។
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
ល្បាយ
មិនមាន mixins ជាក់លាក់សម្រាប់ការវាយអក្សរទេ ប៉ុន្តែ Bootstrap ប្រើ Responsive Font Sizing (RFS) ។