ចាប់ផ្ដើមឡើងវិញ
ចាប់ផ្ដើមឡើងវិញ ដែលជាបណ្តុំនៃការផ្លាស់ប្តូរ CSS ជាក់លាក់នៃធាតុនៅក្នុងឯកសារតែមួយ ចាប់ផ្តើម Bootstrap ដើម្បីផ្តល់នូវបន្ទាត់មូលដ្ឋានដ៏ឆើតឆាយ ស្រប និងសាមញ្ញក្នុងការសាងសង់។
ការចាប់ផ្ដើមឡើងវិញបង្កើតនៅលើ Normalize ដោយផ្តល់នូវធាតុ HTML ជាច្រើនជាមួយនឹងរចនាប័ទ្មដែលយល់ឃើញខ្លះដោយប្រើតែឧបករណ៍ជ្រើសរើសធាតុប៉ុណ្ណោះ។ រចនាប័ទ្មបន្ថែមត្រូវបានធ្វើឡើងតែជាមួយថ្នាក់។ ជាឧទាហរណ៍ យើងចាប់ផ្ដើម <table>
រចនាប័ទ្មមួយចំនួនឡើងវិញសម្រាប់បន្ទាត់មូលដ្ឋានដ៏សាមញ្ញ ហើយក្រោយមកផ្ដល់ជូន .table
, .table-bordered
និងច្រើនទៀត។
នេះជាគោលការណ៍ណែនាំ និងហេតុផលរបស់យើងក្នុងការជ្រើសរើសអ្វីដែលត្រូវបដិសេធក្នុងការចាប់ផ្ដើមឡើងវិញ៖
- ធ្វើបច្ចុប្បន្នភាពតម្លៃលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតមួយចំនួនដើម្បីប្រើ
rem
s ជំនួសឱ្យem
s សម្រាប់គម្លាតសមាសភាគដែលអាចធ្វើមាត្រដ្ឋានបាន។ - ជៀសវាង
margin-top
។ រឹមបញ្ឈរអាចដួលរលំ ផ្តល់លទ្ធផលដែលមិនរំពឹងទុក។ សំខាន់ជាងនេះទៅទៀត ទិសដៅតែមួយmargin
គឺជាគំរូផ្លូវចិត្តដ៏សាមញ្ញ។ - ដើម្បីងាយស្រួលធ្វើមាត្រដ្ឋានលើទំហំឧបករណ៍ ធាតុប្លុកគួរប្រើ
rem
s សម្រាប់margin
s ។ - រក្សាការប្រកាសនៃ
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 OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (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;
ដើម្បីប្តូរសកល ធ្វើបច្ចុប្បន្នភាព និងចងក្រង Bootstrap ឡើងវិញ។font-family
<body>
font-family
$font-family-base
ធាតុក្បាលទាំងអស់ — ឧទាហរណ៍ <h1>
— ហើយ <p>
ត្រូវបានកំណត់ឡើងវិញដើម្បីយករបស់វា margin-top
ចេញ។ ក្បាលមាន margin-bottom: .5rem
បន្ថែម និងកថាខណ្ឌ margin-bottom: 1rem
សម្រាប់គម្លាតងាយស្រួល។
ក្បាល | ឧទាហរណ៍ |
---|---|
|
h1. ក្បាល Bootstrap |
|
h2. ក្បាល Bootstrap |
|
h3. ក្បាល Bootstrap |
|
h4. ក្បាល Bootstrap |
|
h5. ក្បាល Bootstrap |
|
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
- Eget 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
- Eget porttitor lorem
សម្រាប់រចនាប័ទ្មកាន់តែសាមញ្ញ ឋានានុក្រមច្បាស់លាស់ និងគម្លាតកាន់តែប្រសើរ បញ្ជីពិពណ៌នាបានធ្វើបច្ចុប្បន្នភាព margin
s ។ <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 ត្រូវបានកែប្រែឱ្យអាចប្ដូរទំហំបញ្ឈរបានតែប៉ុណ្ណោះ ខណៈដែលការប្ដូរទំហំផ្ដេកជាញឹកញាប់ "បំបែក" ប្លង់ទំព័រ។
ការផ្លាស់ប្តូរទាំងនេះ និងច្រើនទៀតត្រូវបានបង្ហាញខាងក្រោម។
ធាតុ <address>
ត្រូវបានធ្វើបច្ចុប្បន្នភាពដើម្បីកំណត់លំនាំដើមកម្មវិធីរុករកឡើងវិញ font-style
ពី italic
ទៅ normal
. line-height
ឥឡូវនេះក៏ត្រូវបានទទួលមរតក ហើយ margin-bottom: 1rem
ត្រូវបានបន្ថែម។ <address>
s គឺសម្រាប់បង្ហាញព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុត (ឬផ្នែកទាំងមូលនៃការងារ)។ រក្សាទម្រង់ដោយបញ្ចប់បន្ទាត់ជាមួយ <br>
.
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>
ទទួលបានរចនាប័ទ្មមូលដ្ឋានដើម្បីធ្វើឱ្យវាលេចធ្លោក្នុងចំណោមអត្ថបទកថាខណ្ឌ។
លំនាំដើម cursor
នៅលើការសង្ខេបគឺ text
ដូច្នេះយើងកំណត់វាឡើងវិញ pointer
ដើម្បីបង្ហាញថាធាតុអាចត្រូវបានធ្វើអន្តរកម្មដោយចុចលើវា។
ព័ត៌មានលម្អិតមួយចំនួន
ព័ត៌មានបន្ថែមអំពីព័ត៌មានលម្អិត។
ព័ត៌មានលម្អិតបន្ថែមទៀត
នេះគឺជាព័ត៌មានលម្អិតបន្ថែមទៀតអំពីព័ត៌មានលម្អិត។
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
ជំនួសវិញ ។