in English

ចាប់ផ្ដើមឡើងវិញ

ចាប់ផ្ដើមឡើងវិញ ដែលជាបណ្តុំនៃការផ្លាស់ប្តូរ CSS ជាក់លាក់នៃធាតុនៅក្នុងឯកសារតែមួយ ចាប់ផ្តើម Bootstrap ដើម្បីផ្តល់នូវបន្ទាត់មូលដ្ឋានដ៏ឆើតឆាយ ស្រប និងសាមញ្ញក្នុងការសាងសង់។

នៅលើទំព័រនេះ។

វិធីសាស្រ្ត

ការចាប់ផ្ដើមឡើងវិញបង្កើតនៅលើ Normalize ដោយផ្តល់នូវធាតុ HTML ជាច្រើនជាមួយនឹងរចនាប័ទ្មដែលយល់ឃើញខ្លះដោយប្រើតែឧបករណ៍ជ្រើសរើសធាតុប៉ុណ្ណោះ។ រចនាប័ទ្មបន្ថែមត្រូវបានធ្វើឡើងតែជាមួយថ្នាក់។ ជាឧទាហរណ៍ យើងចាប់ផ្ដើម <table>រចនាប័ទ្មមួយចំនួនឡើងវិញសម្រាប់បន្ទាត់មូលដ្ឋានដ៏សាមញ្ញ ហើយក្រោយមកផ្ដល់ជូន .table, .table-borderedនិងច្រើនទៀត។

នេះជាគោលការណ៍ណែនាំ និងហេតុផលរបស់យើងក្នុងការជ្រើសរើសអ្វីដែលត្រូវបដិសេធក្នុងការចាប់ផ្ដើមឡើងវិញ៖

ធ្វើបច្ចុប្បន្នភាពតម្លៃលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតមួយចំនួនដើម្បីប្រើ rems ជំនួសឱ្យ ems សម្រាប់គម្លាតសមាសភាគដែលអាចធ្វើមាត្រដ្ឋានបាន។
ជៀសវាង margin-top។ រឹមបញ្ឈរអាចដួលរលំ ផ្តល់លទ្ធផលដែលមិនរំពឹងទុក។ សំខាន់ជាងនេះទៅទៀត ទិសដៅតែមួយ marginគឺជាគំរូផ្លូវចិត្តដ៏សាមញ្ញ។
ដើម្បីងាយស្រួលធ្វើមាត្រដ្ឋានលើទំហំឧបករណ៍ ធាតុប្លុកគួរប្រើ rems សម្រាប់ margins ។
រក្សាការប្រកាសនៃ fontលក្ខណៈសម្បត្តិដែលទាក់ទងទៅអប្បបរមា ដោយប្រើ inheritនៅពេលណាដែលអាចធ្វើទៅបាន។

ទំព័រលំនាំដើម

ធាតុ <html>និង <body>ត្រូវបានអាប់ដេត ដើម្បីផ្តល់នូវលំនាំដើមពេញទំព័រកាន់តែប្រសើរ។ កាន់តែពិសេស៖

វា box-sizingត្រូវបានកំណត់ជាសកលលើគ្រប់ធាតុទាំងអស់ - រួមទាំង *::beforeនិង *::afterទៅ border-box. នេះធានាថាទទឹងនៃធាតុដែលបានប្រកាសគឺមិនលើសទេ ដោយសារទ្រនាប់ ឬស៊ុម។
- គ្មានមូលដ្ឋាន font-sizeត្រូវបានប្រកាសនៅលើ <html>, ប៉ុន្តែ 16pxត្រូវបានសន្មត់ (លំនាំដើមកម្មវិធីរុករក) ។ font-size: 1remត្រូវបានអនុវត្តលើការ <body>ធ្វើមាត្រដ្ឋានប្រភេទដែលងាយស្រួលឆ្លើយតបតាមរយៈសំណួរមេឌៀ ខណៈដែលគោរពតាមចំណង់ចំណូលចិត្តអ្នកប្រើ និងធានាបាននូវវិធីសាស្ត្រដែលអាចចូលប្រើប្រាស់បានច្រើនជាង។ លំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតនេះអាចត្រូវបានបដិសេធដោយការកែប្រែ $font-size-rootអថេរ។
វា <body>ក៏កំណត់ជាសកល font-family, font-weight, line-height, និង color. វាត្រូវបានទទួលមរតកនៅពេលក្រោយដោយធាតុទម្រង់មួយចំនួនដើម្បីការពារភាពមិនស៊ីគ្នានៃពុម្ពអក្សរ។
ដើម្បីសុវត្ថិភាព <body>មានការប្រកាស background-colorលំនាំដើមទៅ #fff.

ជង់ពុម្ពអក្សរដើម

Bootstrap ប្រើប្រាស់ "ជង់ពុម្ពអក្សរដើម" ឬ "ជង់ពុម្ពអក្សរប្រព័ន្ធ" សម្រាប់ការបង្ហាញអត្ថបទល្អបំផុតនៅលើគ្រប់ឧបករណ៍ និងប្រព័ន្ធប្រតិបត្តិការ។ ពុម្ពអក្សរប្រព័ន្ធទាំងនេះត្រូវបានរចនាឡើងជាពិសេសជាមួយឧបករណ៍នាពេលបច្ចុប្បន្ននេះក្នុងចិត្ត ជាមួយនឹងការធ្វើអោយប្រសើរឡើងនៅលើអេក្រង់ ការគាំទ្រពុម្ពអក្សរអថេរ និងច្រើនទៀត។ សូមអានបន្ថែមអំពី ជង់ពុម្ពអក្សរដើមនៅក្នុង អត្ថបទ ទស្សនាវដ្តី Smashing នេះ ។

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ចំណាំថាដោយសារតែជង់ពុម្ពអក្សររួមបញ្ចូលពុម្ពអក្សរ emoji និមិត្តសញ្ញាទូទៅជាច្រើន/តួអក្សរយូនីកូដ dingbat នឹងត្រូវបានបង្ហាញជារូបពហុពណ៌។ រូបរាងរបស់ពួកគេនឹងប្រែប្រួល អាស្រ័យលើរចនាប័ទ្មដែលបានប្រើនៅក្នុងពុម្ពអក្សរ emoji ដើមរបស់កម្មវិធីរុករក/វេទិកា ហើយពួកវានឹងមិនរងផលប៉ះពាល់ដោយ colorរចនាប័ទ្ម CSS ណាមួយឡើយ។

វា font-familyត្រូវបានអនុវត្តចំពោះ <body>និងទទួលមរតកដោយស្វ័យប្រវត្តិជាសកលនៅទូទាំង Bootstrap ។ ដើម្បីប្តូរសកល font-familyធ្វើបច្ចុប្បន្នភាព $font-family-baseនិងចងក្រង Bootstrap ឡើងវិញ។

ចំណងជើង និងកថាខណ្ឌ

ធាតុក្បាលទាំងអស់ — ឧទាហរណ៍ <h1>— ហើយ <p>ត្រូវបានកំណត់ឡើងវិញដើម្បីយករបស់វា margin-topចេញ។ ក្បាលមាន margin-bottom: .5remបន្ថែម និងកថាខណ្ឌ margin-bottom: 1remសម្រាប់គម្លាតងាយស្រួល។

ក្បាល	ឧទាហរណ៍
`<h1></h1>`	h1. ក្បាល Bootstrap
`<h2></h2>`	h2. ក្បាល Bootstrap
`<h3></h3>`	h3. ក្បាល Bootstrap
`<h4></h4>`	h4. ក្បាល Bootstrap
`<h5></h5>`	h5. ក្បាល Bootstrap
`<h6></h6>`	h6. ក្បាល Bootstrap

បញ្ជី

បញ្ជីទាំងអស់ — <ul>, <ol>, និង <dl>— margin-topត្រូវបានដកចេញ និង margin-bottom: 1rem. បញ្ជីដែលបានលាក់មិនមាន margin-bottom។ យើងក៏បានកំណត់ការ padding-leftបើក <ul>និង <ol>ធាតុឡើងវិញផងដែរ។

បញ្ជីទាំងអស់ត្រូវបានដកចេញរឹមកំពូលរបស់ពួកគេ។
ហើយរឹមខាងក្រោមរបស់ពួកគេត្រូវបានធ្វើឱ្យធម្មតា។
បញ្ជីដែលបានលាក់មិនមានរឹមបាតទេ។
- វិធីនេះ ពួកគេមានរូបរាងកាន់តែស្អាត
- ជាពិសេសនៅពេលតាមដានដោយធាតុបញ្ជីច្រើនទៀត
បន្ទះខាងឆ្វេងក៏ត្រូវបានកំណត់ឡើងវិញផងដែរ។

នេះគឺជាបញ្ជីដែលបានបញ្ជាទិញ
ជាមួយនឹងធាតុបញ្ជីមួយចំនួន
វាមានរូបរាងរួមដូចគ្នា។
ជាបញ្ជីដែលមិនបានបញ្ជាទិញពីមុន

សម្រាប់រចនាប័ទ្មកាន់តែសាមញ្ញ ឋានានុក្រមច្បាស់លាស់ និងគម្លាតកាន់តែប្រសើរ បញ្ជីពិពណ៌នាបានធ្វើបច្ចុប្បន្នភាព margins ។ <dd>កំណត់ឡើងវិញ margin-leftនិង 0បន្ថែម margin-bottom: .5rem។ <dt>s មានភាព ក្លាហាន ។

បញ្ជីពិពណ៌នា: បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
រយៈពេល: និយមន័យសម្រាប់ពាក្យ។; និយមន័យទីពីរសម្រាប់ពាក្យដូចគ្នា។
ពាក្យមួយទៀត: និយមន័យសម្រាប់ពាក្យផ្សេងទៀតនេះ។

កូដក្នុងជួរ

រុំផ្នែកតូចៗនៃកូដក្នុងជួរជាមួយ <code>. ត្រូវប្រាកដថាគេចចេញពីតង្កៀបមុំ HTML ។

ជាឧទាហរណ៍ <section>គួរតែរុំជាជួរ។

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ប្លុកកូដ

ប្រើ <pre>s សម្រាប់បន្ទាត់កូដច្រើន។ ជាថ្មីម្តងទៀត ត្រូវប្រាកដថាដើម្បីគេចចេញពីតង្កៀបមុំណាមួយនៅក្នុងកូដសម្រាប់ការបង្ហាញត្រឹមត្រូវ។ ធាតុ <pre>ត្រូវបានកំណត់ឡើងវិញដើម្បីយកវាចេញ margin-topហើយប្រើ remឯកតាសម្រាប់វា margin-bottom។

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

អថេរ

សម្រាប់ការចង្អុលបង្ហាញអថេរ ប្រើ <var>ស្លាក។

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ការបញ្ចូលអ្នកប្រើប្រាស់

ប្រើ <kbd>ដើម្បីចង្អុលបង្ហាញការបញ្ចូលដែលជាធម្មតាត្រូវបានបញ្ចូលតាមរយៈក្តារចុច។

ដើម្បីប្តូរថត សូមវាយ cdតាមឈ្មោះរបស់ថត។
ដើម្បីកែសម្រួលការកំណត់សូមចុច ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

លទ្ធផលគំរូ

សម្រាប់ការចង្អុលបង្ហាញលទ្ធផលគំរូពីកម្មវិធីប្រើ <samp>ស្លាក។

អត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកជាលទ្ធផលគំរូពីកម្មវិធីកុំព្យូទ័រ។

<samp>This text is meant to be treated as sample output from a computer program.</samp>

តុ

តារាងត្រូវបានកែសម្រួលបន្តិចទៅរចនាប័ទ្ម <caption>s, បង្រួមស៊ុម និងធានាថាមានភាពស៊ីសង្វាក់គ្នា text-align។ ការផ្លាស់ប្ដូរបន្ថែមសម្រាប់ស៊ុម ទ្រនាប់ និងច្រើនទៀតមក ជាមួយ ថ្នាក់ .table។

នេះគឺជាតារាងឧទាហរណ៍ ហើយនេះគឺជាចំណងជើងរបស់វា ដើម្បីពណ៌នាអំពីខ្លឹមសារ។
ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង
ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង
ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង
ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង

ទម្រង់

ធាតុទម្រង់ផ្សេងៗត្រូវបានចាប់ផ្តើមឡើងវិញសម្រាប់រចនាប័ទ្មមូលដ្ឋានសាមញ្ញជាង។ នេះគឺជាការផ្លាស់ប្តូរដ៏គួរឱ្យកត់សម្គាល់បំផុតមួយចំនួន៖

<fieldset>s មិនមានស៊ុម ទ្រនាប់ ឬរឹម ដូច្នេះពួកវាអាចប្រើយ៉ាងងាយស្រួលជាកញ្ចប់សម្រាប់ធាតុបញ្ចូលនីមួយៗ ឬក្រុមនៃធាតុបញ្ចូល។
<legend>s ដូចជា សំណុំវាល ត្រូវបានរៀបចំឡើងវិញផងដែរ ដើម្បីបង្ហាញជាចំណងជើងនៃប្រភេទ។
<label>s ត្រូវបានកំណត់ដើម្បី display: inline-blockអនុញ្ញាតឱ្យ marginអនុវត្ត។
<input>s, <select>s, <textarea>s, និង <button>s ភាគច្រើនត្រូវបានដោះស្រាយដោយ Normalize ប៉ុន្តែ Reboot លុបចោល marginនិងកំណត់ របស់ពួកគេ line-height: inheritផងដែរ។
<textarea>s ត្រូវបានកែប្រែឱ្យអាចប្ដូរទំហំបញ្ឈរបានតែប៉ុណ្ណោះ ខណៈដែលការប្ដូរទំហំផ្ដេកជាញឹកញាប់ "បំបែក" ប្លង់ទំព័រ។
<button>s និង <input>ធាតុប៊ូតុងមាន cursor: pointerពេល :not(:disabled).

ការផ្លាស់ប្តូរទាំងនេះ និងច្រើនទៀតត្រូវបានបង្ហាញខាងក្រោម។

ឧទាហរណ៍រឿងព្រេង

ការបញ្ចូលឧទាហរណ៍

ឧទាហរណ៍អ៊ីមែល

ឧទាហរណ៍ទូរស័ព្ទ

ឧទាហរណ៍ url

លេខឧទាហរណ៍

ការស្វែងរកឧទាហរណ៍

ជួរឧទាហរណ៍

ការបញ្ចូលឯកសារឧទាហរណ៍

ឧទាហរណ៍ជ្រើសរើស

ធីកប្រអប់ធីកនេះ។

ជម្រើសមួយគឺនេះនិងនោះ។ ជម្រើសទី 2 គឺជាអ្វីផ្សេងទៀតដែលវែងឆ្ងាយផងដែរដើម្បីបង្ហាញពីការរុំនៃការគ្រប់គ្រងទម្រង់ដ៏ប្រណិតទាំងនេះ។ ជម្រើសទីបីត្រូវបានបិទ

ឧទាហរណ៍តំបន់អត្ថបទ

ឧទាហរណ៍កាលបរិច្ឆេទ

ពេលវេលាឧទាហរណ៍

ឧទាហរណ៍ពាក្យសម្ងាត់

ឧទាហរណ៍កាលបរិច្ឆេទ - ក្នុងស្រុក

ឧទាហរណ៍សប្តាហ៍

ខែឧទាហរណ៍

ពណ៌ឧទាហរណ៍

លទ្ធផលឧទាហរណ៍ ១០០

ការគាំទ្រការបញ្ចូលកាលបរិច្ឆេទ និងពណ៌

សូមចាំថាការបញ្ចូលកាលបរិច្ឆេទ មិនត្រូវបានគាំទ្រពេញលេញ ដោយកម្មវិធីរុករកទាំងអស់នោះទេ ពោលគឺ Safari ។

ចង្អុលលើប៊ូតុង

ការចាប់ផ្ដើមឡើងវិញរួមបញ្ចូលទាំងការធ្វើឱ្យប្រសើរឡើងសម្រាប់ role="button"ការផ្លាស់ប្តូរទស្សន៍ទ្រនិចលំនាំដើមទៅជា pointer. បន្ថែមគុណលក្ខណៈនេះទៅធាតុ ដើម្បីជួយបង្ហាញថាធាតុមានអន្តរកម្ម។ តួនាទីនេះមិនចាំបាច់សម្រាប់ <button>ធាតុដែលទទួលការ cursorផ្លាស់ប្តូររបស់ពួកគេផ្ទាល់។

ប៊ូតុងធាតុដែលមិនមែនជាប៊ូតុង

<span role="button" tabindex="0">Non-button element button</span>

ធាតុផ្សេងៗ

អាស័យដ្ឋាន

ធាតុ <address>ត្រូវបានធ្វើបច្ចុប្បន្នភាពដើម្បីកំណត់លំនាំដើមកម្មវិធីរុករកឡើងវិញ font-styleពី italicទៅ normal. line-heightឥឡូវនេះក៏ត្រូវបានទទួលមរតក ហើយ margin-bottom: 1remត្រូវបានបន្ថែម។ <address>s គឺសម្រាប់បង្ហាញព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុត (ឬផ្នែកទាំងមូលនៃការងារ)។ រក្សាទម្រង់ដោយបញ្ចប់បន្ទាត់ជាមួយ <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

ឈ្មោះពេញ
[email protected]

ប្លុកសម្រង់

លំនាំដើម marginនៅលើប្លុកសម្រង់គឺ 1em 40pxដូច្នេះយើងកំណត់វាឡើងវិញ 0 0 1remសម្រាប់អ្វីមួយដែលស៊ីគ្នាជាមួយធាតុផ្សេងទៀត។

សម្រង់ដែលមានឈ្មោះល្បីមាននៅក្នុងធាតុសម្រង់ប្លុក។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព

ធាតុក្នុងជួរ

ធាតុ <abbr>ទទួលបានរចនាប័ទ្មមូលដ្ឋានដើម្បីធ្វើឱ្យវាលេចធ្លោក្នុងចំណោមអត្ថបទកថាខណ្ឌ។

Nulla attr vitae elit libero, a pharetra auggue ។

សង្ខេប

លំនាំដើម cursorនៅលើការសង្ខេបគឺ textដូច្នេះយើងកំណត់វាឡើងវិញ pointerដើម្បីបង្ហាញថាធាតុអាចត្រូវបានធ្វើអន្តរកម្មដោយចុចលើវា។

ព័ត៌មានលម្អិតមួយចំនួន

ព័ត៌មានបន្ថែមអំពីព័ត៌មានលម្អិត។

ព័ត៌មានលម្អិតបន្ថែមទៀត

នេះគឺជាព័ត៌មានលម្អិតបន្ថែមទៀតអំពីព័ត៌មានលម្អិត។

`[hidden]`គុណលក្ខណៈ HTML5

HTML5 បន្ថែម គុណលក្ខណៈសកលថ្មីមួយដែលមានឈ្មោះថា[hidden] ដែលត្រូវបានរចនា display: noneតាមលំនាំដើម។ ការខ្ចីគំនិតពី PureCSS យើងកែលម្អតាមលំនាំដើមនេះ ដោយបង្កើត [hidden] { display: none !important; }ដើម្បីជួយការពារវា displayពីការបដិសេធដោយចៃដន្យ។

<input type="text" hidden>

ភាពមិនឆបគ្នារបស់ jQuery

[hidden]មិនឆបគ្នាជាមួយ jQuery $(...).hide()និង $(...).show()វិធីសាស្រ្ត។ ដូច្នេះហើយ បច្ចុប្បន្ននេះ យើងមិនគាំទ្រជាពិសេស [hidden]លើបច្ចេកទេសផ្សេងទៀតសម្រាប់ការគ្រប់គ្រង displayធាតុនោះទេ។

ដើម្បីគ្រាន់តែបិទបើកការមើលឃើញនៃធាតុ មានន័យថាវា displayមិនត្រូវបានកែប្រែ ហើយធាតុនៅតែអាចប៉ះពាល់ដល់លំហូរនៃឯកសារ សូមប្រើ ថ្នាក់.invisible ជំនួសវិញ ។