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

ចាប់ផ្ដើមឡើងវិញ ដែលជាបណ្តុំនៃការផ្លាស់ប្តូរ 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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

វា 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។

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
ទទួលបាន porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

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

បញ្ជីពិពណ៌នា: បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
អ៊ីស្មូដ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem ។; Donec id elit non mi porta gravida នៅ eget metus។
Malesuada porta: Etiam porta sem malesuada magna mollis euismod ។

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

ធាតុ <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សម្រាប់អ្វីមួយដែលស៊ីគ្នាជាមួយធាតុផ្សេងទៀត។

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

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

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

ធាតុ <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 ជំនួសវិញ ។