វាយអក្សរ

ឯកសារ និងឧទាហរណ៍សម្រាប់ការវាយអក្សរ Bootstrap រួមទាំងការកំណត់សកល ចំណងជើង អត្ថបទតួ បញ្ជី និងច្រើនទៀត។

ការកំណត់សកល

Bootstrap កំណត់ការបង្ហាញសកលជាមូលដ្ឋាន វាយអក្សរ និងរចនាប័ទ្មតំណ។ នៅពេលត្រូវការការគ្រប់គ្រងបន្ថែមទៀត សូមពិនិត្យមើល ថ្នាក់ឧបករណ៍ប្រើប្រាស់អត្ថបទ ។

ប្រើ ជង់ពុម្ពអក្សរដើម ដែលជ្រើសរើសល្អបំផុត font-familyសម្រាប់ប្រព័ន្ធប្រតិបត្តិការ និងឧបករណ៍នីមួយៗ។
សម្រាប់មាត្រដ្ឋានប្រភេទដែលរួមបញ្ចូល និងអាចចូលប្រើបានកាន់តែច្រើន យើងប្រើឫសលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត font-size(ជាធម្មតា 16px) ដូច្នេះអ្នកទស្សនាអាចប្ដូរលំនាំដើមកម្មវិធីរុករកតាមបំណងតាមតម្រូវការ។
ប្រើ $font-family-base, $font-size-base, និង $line-height-baseគុណលក្ខណៈជាមូលដ្ឋានវាយអក្សររបស់យើងដែលបានអនុវត្តចំពោះ <body>.
កំណត់ពណ៌តំណសកលតាមរយៈ $link-colorនិងអនុវត្តការគូសបន្ទាត់ក្រោមតំណតែលើ :hover.
ប្រើ $body-bgដើម្បីកំណត់ a 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>ខណៈពេលដែលជៀសវាងការជាប់ពាក់ព័ន្ធអត្ថន័យដែលមិនចង់បានដែលស្លាកនឹងនាំមក។

ខណៈពេលដែលមិនបានបង្ហាញខាងលើ សូមមានអារម្មណ៍សេរីក្នុងការប្រើប្រាស់ <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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

ការដាក់ឈ្មោះប្រភព

បន្ថែម a <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>

ការតម្រឹមបញ្ជីពិពណ៌នា

តម្រឹមពាក្យ និងការពិពណ៌នាដោយផ្ដេក ដោយប្រើថ្នាក់ដែលបានកំណត់ជាមុននៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង (ឬ mixins semantic) ។ សម្រាប់ពាក្យវែងជាង អ្នកអាចបន្ថែម .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 យើងប្រើ Sass mixin ដើម្បីជំនួស font-sizeលក្ខណៈសម្បត្តិធម្មតារបស់យើង។ ទំហំពុម្ពអក្សរដែលឆ្លើយតបនឹងត្រូវបានចងក្រងជា calc()មុខងារដែលមានផ្នែកចម្រុះ remនិងច្រកមើល ដើម្បីបើកដំណើរការមាត្រដ្ឋានដែលឆ្លើយតប។ ព័ត៌មានបន្ថែមអំពី RFS និងការកំណត់រចនាសម្ព័ន្ធរបស់វាអាចរកបាននៅលើ ឃ្លាំង GitHub របស់វា ។