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>ធ្វើមាត្រដ្ឋានប្រភេទដែលងាយស្រួលឆ្លើយតបតាមរយៈសំណួរមេឌៀ ខណៈដែលគោរពតាមចំណង់ចំណូលចិត្តអ្នកប្រើ និងធានាបាននូវវិធីសាស្ត្រដែលអាចចូលប្រើប្រាស់បានច្រើនជាង។
វា <body>ក៏កំណត់ជាសកល font-family, line-height, និង text-align. នេះត្រូវបានទទួលមរតកនៅពេលក្រោយដោយធាតុទម្រង់មួយចំនួនដើម្បីការពារភាពមិនស៊ីសង្វាក់គ្នានៃពុម្ពអក្សរ។
ដើម្បីសុវត្ថិភាព <body>មានការប្រកាស background-colorលំនាំដើមទៅ #fff.

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

ពុម្ពអក្សរគេហទំព័រលំនាំដើម (Helvetica Neue, Helvetica និង Arial) ត្រូវបានទម្លាក់នៅក្នុង Bootstrap 4 ហើយត្រូវបានជំនួសដោយ "ជង់ពុម្ពអក្សរដើម" សម្រាប់ការបង្ហាញអត្ថបទល្អបំផុតនៅលើគ្រប់ឧបករណ៍ និងប្រព័ន្ធប្រតិបត្តិការ។ អានបន្ថែមអំពី ជង់ពុម្ពអក្សរដើមនៅក្នុង អត្ថបទ ទស្សនាវដ្តី Smashing នេះ ។

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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 និមិត្តសញ្ញាទូទៅជាច្រើន/តួអក្សរយូនីកូដនឹងត្រូវបានបង្ហាញជារូបពហុពណ៌។ រូបរាងរបស់ពួកគេនឹងប្រែប្រួល អាស្រ័យលើរចនាប័ទ្មដែលបានប្រើនៅក្នុងពុម្ពអក្សរ 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។

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

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

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

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

អត្ថបទដែលបានធ្វើទ្រង់ទ្រាយជាមុន

ធាតុ <pre>ត្រូវបានកំណត់ឡើងវិញដើម្បីយកវាចេញ margin-topហើយប្រើ remឯកតាសម្រាប់វា margin-bottom។

.example-ធាតុ {
  រឹម-បាត៖ 1rem;
}

តុ

តារាងត្រូវបានកែសម្រួលបន្តិចទៅរចនាប័ទ្ម <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).

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

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

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

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

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

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

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

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

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

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

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

ការចាប់ផ្ដើមឡើងវិញរួមបញ្ចូលទាំងការធ្វើឱ្យប្រសើរឡើងសម្រាប់ 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ពីការបដិសេធដោយចៃដន្យ។ ខណៈពេលដែល [hidden]មិនត្រូវបានគាំទ្រដោយ IE10 នោះការប្រកាសច្បាស់លាស់នៅក្នុង CSS របស់យើងទទួលបានជុំវិញបញ្ហានោះ។

<input type="text" hidden>

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

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

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