ចាប់ផ្ដើមឡើងវិញ
ចាប់ផ្ដើមឡើងវិញ ដែលជាបណ្តុំនៃការផ្លាស់ប្តូរ CSS ជាក់លាក់នៃធាតុនៅក្នុងឯកសារតែមួយ ចាប់ផ្តើម Bootstrap ដើម្បីផ្តល់នូវបន្ទាត់មូលដ្ឋានដ៏ឆើតឆាយ ស្រប និងសាមញ្ញក្នុងការសាងសង់។
វិធីសាស្រ្ត
ការចាប់ផ្ដើមឡើងវិញបង្កើតនៅលើ Normalize ដោយផ្តល់នូវធាតុ HTML ជាច្រើនជាមួយនឹងរចនាប័ទ្មដែលយល់ឃើញខ្លះដោយប្រើតែឧបករណ៍ជ្រើសរើសធាតុប៉ុណ្ណោះ។ រចនាប័ទ្មបន្ថែមត្រូវបានធ្វើឡើងតែជាមួយថ្នាក់។ ជាឧទាហរណ៍ យើងចាប់ផ្ដើម <table>
រចនាប័ទ្មមួយចំនួនឡើងវិញសម្រាប់បន្ទាត់មូលដ្ឋានដ៏សាមញ្ញ ហើយក្រោយមកផ្ដល់ជូន .table
, .table-bordered
និងច្រើនទៀត។
នេះជាគោលការណ៍ណែនាំ និងហេតុផលរបស់យើងក្នុងការជ្រើសរើសអ្វីដែលត្រូវបដិសេធក្នុងការចាប់ផ្ដើមឡើងវិញ៖
- ធ្វើបច្ចុប្បន្នភាពតម្លៃលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតមួយចំនួនដើម្បីប្រើ
rem
s ជំនួសឱ្យem
s សម្រាប់គម្លាតសមាសភាគដែលអាចធ្វើមាត្រដ្ឋានបាន។ - ជៀសវាង
margin-top
។ រឹមបញ្ឈរអាចដួលរលំ ផ្តល់លទ្ធផលដែលមិនរំពឹងទុក។ សំខាន់ជាងនេះទៅទៀត ទិសដៅតែមួយmargin
គឺជាគំរូផ្លូវចិត្តដ៏សាមញ្ញ។ - ដើម្បីងាយស្រួលធ្វើមាត្រដ្ឋានលើទំហំឧបករណ៍ ធាតុប្លុកគួរប្រើ
rem
s សម្រាប់margin
s ។ - រក្សាការប្រកាសនៃ
font
លក្ខណៈសម្បត្តិដែលទាក់ទងទៅអប្បបរមា ដោយប្រើinherit
នៅពេលណាដែលអាចធ្វើទៅបាន។
អថេរ CSS
បានបន្ថែមនៅក្នុង v5.1.1
ជាមួយនឹង v5.1.1 យើងបានកំណត់ស្តង់ដារនៃតម្រូវការរបស់យើង @import
នៅលើកញ្ចប់ CSS ទាំងអស់របស់យើង (រួមទាំង bootstrap.css
, bootstrap-reboot.css
, និង bootstrap-grid.css
ដើម្បីរួមបញ្ចូល _root.scss
។ វាបន្ថែម :root
អថេរ CSS កម្រិតទៅកញ្ចប់ទាំងអស់ ដោយមិនគិតពីចំនួននៃពួកវាត្រូវបានប្រើប្រាស់នៅក្នុងកញ្ចប់នោះ។ ទីបំផុត Bootstrap 5 នឹងបន្ត សូមមើលអថេរ CSS បន្ថែមទៀតដែលត្រូវបានបន្ថែមតាមពេលវេលា។
ទំព័រលំនាំដើម
ធាតុ <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 ឡើងវិញ។
អថេរ CSS
នៅពេលដែល Bootstrap 5 បន្តមានភាពចាស់ទុំ រចនាប័ទ្មកាន់តែច្រើននឹងត្រូវបានបង្កើតឡើងជាមួយនឹង អថេរ CSS ជាមធ្យោបាយមួយដើម្បីផ្តល់នូវការប្ដូរតាមបំណងតាមពេលវេលាជាក់ស្តែងបន្ថែមទៀត ដោយមិនចាំបាច់ចងក្រង Sass ឡើងវិញជានិច្ច។ វិធីសាស្រ្តរបស់យើងគឺយកអថេរ Sass ប្រភពរបស់យើង ហើយបំប្លែងពួកវាទៅជាអថេរ CSS ។ វិធីនោះ ទោះបីជាអ្នកមិនប្រើអថេរ CSS ក៏ដោយ អ្នកនៅតែមានថាមពលទាំងអស់របស់ Sass ។ វានៅតែស្ថិតក្នុងដំណើរការ ហើយនឹងត្រូវការពេលវេលាដើម្បីអនុវត្តឱ្យបានពេញលេញ។
ជាឧទាហរណ៍ សូមពិចារណា :root
អថេរ CSS ទាំងនេះសម្រាប់ <body>
រចនាប័ទ្មទូទៅ៖
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
នៅក្នុងការអនុវត្ត អថេរទាំងនោះត្រូវបានអនុវត្តនៅក្នុង Reboot ដូចតទៅ៖
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
ដែលអនុញ្ញាតឱ្យអ្នកធ្វើការប្ដូរតាមបំណងតាមពេលវេលាជាក់ស្តែង តាមតែអ្នកចូលចិត្ត៖
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
ចំណងជើង និងកថាខណ្ឌ
ធាតុក្បាលទាំងអស់ — ឧទាហរណ៍ <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>
ធាតុឡើងវិញផងដែរ។
- បញ្ជីទាំងអស់ត្រូវបានដកចេញរឹមកំពូលរបស់ពួកគេ។
- ហើយរឹមខាងក្រោមរបស់ពួកគេត្រូវបានធ្វើឱ្យធម្មតា។
- បញ្ជីដែលបានលាក់មិនមានរឹមបាតទេ។
- វិធីនេះ ពួកគេមានរូបរាងកាន់តែស្អាត
- ជាពិសេសនៅពេលតាមដានដោយធាតុបញ្ជីច្រើនទៀត
- បន្ទះខាងឆ្វេងក៏ត្រូវបានកំណត់ឡើងវិញផងដែរ។
- នេះគឺជាបញ្ជីដែលបានបញ្ជាទិញ
- ជាមួយនឹងធាតុបញ្ជីមួយចំនួន
- វាមានរូបរាងរួមដូចគ្នា។
- ជាបញ្ជីដែលមិនបានបញ្ជាទិញពីមុន
សម្រាប់រចនាប័ទ្មកាន់តែសាមញ្ញ ឋានានុក្រមច្បាស់លាស់ និងគម្លាតកាន់តែប្រសើរ បញ្ជីពិពណ៌នាបានធ្វើបច្ចុប្បន្នភាព margin
s ។ <dd>
កំណត់ឡើងវិញ margin-left
និង 0
បន្ថែម margin-bottom: .5rem
។ <dt>
s មានភាព ក្លាហាន ។
- បញ្ជីពិពណ៌នា
- បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
- រយៈពេល
- និយមន័យសម្រាប់ពាក្យ។
- និយមន័យទីពីរសម្រាប់ពាក្យដូចគ្នា។
- ពាក្យមួយទៀត
- និយមន័យសម្រាប់ពាក្យផ្សេងទៀតនេះ។
កូដក្នុងជួរ
រុំផ្នែកតូចៗនៃកូដក្នុងជួរជាមួយ <code>
. ត្រូវប្រាកដថាគេចចេញពីតង្កៀបមុំ HTML ។
<section>
គួរតែរុំជាជួរ។
For example, <code><section></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><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
អថេរ
សម្រាប់ការចង្អុលបង្ហាញអថេរ ប្រើ <var>
ស្លាក។
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ការបញ្ចូលអ្នកប្រើប្រាស់
ប្រើ <kbd>
ដើម្បីចង្អុលបង្ហាញការបញ្ចូលដែលជាធម្មតាត្រូវបានបញ្ចូលតាមរយៈក្តារចុច។
ដើម្បីកែសម្រួលការកំណត់សូមចុច 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)
.
ការផ្លាស់ប្តូរទាំងនេះ និងច្រើនទៀតត្រូវបានបង្ហាញខាងក្រោម។
ការគាំទ្រការបញ្ចូលកាលបរិច្ឆេទ និងពណ៌
សូមចាំថាការបញ្ចូលកាលបរិច្ឆេទ មិនត្រូវបានគាំទ្រពេញលេញ ដោយកម្មវិធីរុករកទាំងអស់នោះទេ ពោលគឺ 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 ឈ្មោះពេញ
[email protected]
ប្លុកសម្រង់
លំនាំដើម margin
នៅលើប្លុកសម្រង់គឺ 1em 40px
ដូច្នេះយើងកំណត់វាឡើងវិញ 0 0 1rem
សម្រាប់អ្វីមួយដែលស៊ីគ្នាជាមួយធាតុផ្សេងទៀត។
សម្រង់ដែលមានឈ្មោះល្បីមាននៅក្នុងធាតុសម្រង់ប្លុក។
នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
ធាតុក្នុងជួរ
ធាតុ <abbr>
ទទួលបានរចនាប័ទ្មមូលដ្ឋានដើម្បីធ្វើឱ្យវាលេចធ្លោក្នុងចំណោមអត្ថបទកថាខណ្ឌ។
សង្ខេប
លំនាំដើម 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
ជំនួសវិញ ។