Source

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

ចាប់ផ្ដើមឡើងវិញ ដែលជាបណ្តុំនៃការផ្លាស់ប្តូរ 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. ចំនួនគត់ molestie lorem និង massa
  4. Facilisis នៅក្នុង Pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. ទទួលបាន 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).

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

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

១០០

ធាតុផ្សេងៗ

អាស័យដ្ឋាន

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