ပြန်ဖွင့်ပါ။

ဖိုင်တစ်ခုတည်းရှိ ဒြပ်စင်-သတ်သတ်မှတ်မှတ် CSS အပြောင်းအလဲများစုစည်းမှု ပြန်လည်စတင်ခြင်း၊ ပြေပြစ်သော၊ တသမတ်တည်းနှင့် ရိုးရှင်းသော အခြေခံအခြေခံကို ပံ့ပိုးပေးရန်အတွက် kickstart Bootstrap။

ရေးပါတယ်။

HTML ဒြပ်စင်များစွာကို အတန်ငယ်ထင်မြင်ယူဆထားသည့် ပုံစံများဖြင့် ပံ့ပိုးပေးသည့် Normalize ပေါ်တွင် ပြန်လည်စတင်ခြင်းကို တည်ဆောက်ပါသည်။ ထပ်လောင်းပုံစံကို အတန်းများနှင့်သာ ပြုလုပ်ပါသည်။ ဥပမာအားဖြင့်၊ <table>ကျွန်ုပ်တို့သည် ပိုမိုရိုးရှင်းသော အခြေခံလိုင်းအတွက် စတိုင်အချို့ကို ပြန်လည်စတင်ပြီး နောက်ပိုင်းတွင် .table, .table-bordered, နှင့် အခြားအရာများကို ပံ့ပိုးပေးပါသည်။

ဤသည်မှာ Reboot တွင် အစားထိုးရမည့်အရာကို ရွေးချယ်ခြင်းအတွက် ကျွန်ုပ်တို့၏လမ်းညွှန်ချက်များနှင့် အကြောင်းပြချက်များဖြစ်သည်-

အရွယ်တင်နိုင်သော အစိတ်အပိုင်းအကွာအဝေးအတွက် rems အစား s ကိုအသုံးပြုရန် အချို့သောဘရောက်ဆာ၏ မူရင်းတန်ဖိုးများကို အပ်ဒိတ်လုပ် ပါ။em
ရှောင် margin-topပါ။ ဒေါင်လိုက် အနားသတ်များသည် ပြိုကျနိုင်ပြီး မမျှော်လင့်ထားသော ရလဒ်များကို ထုတ်ပေးနိုင်သည်။ ပို၍အရေးကြီးသည်မှာ၊ ဦးတည်ချက်တစ်ခုတည်း marginသည် ပိုမိုရိုးရှင်းသော စိတ်ပိုင်းဆိုင်ရာပုံစံဖြစ်သည်။
စက်အရွယ်အစားများတစ်လျှောက် ပိုမိုလွယ်ကူစွာ ချဲ့ထွင်ရန်အတွက်၊ ပိတ်ဆို့သည့်အရာများကို rems အတွက် အသုံးပြုသင့်သည် margin။
ဖြစ်နိုင်သည့်အခါတိုင်း fontအသုံးပြု၍ -related properties ၏ ကြေငြာချက်များကို အနည်းဆုံးဖြစ်အောင်ထားပါ။inherit

စာမျက်နှာ ပုံသေများ

ပိုမိုကောင်းမွန်သော စာမျက်နှာကျယ်သော ပုံသေများကို ပေးဆောင်ရန် အစိတ်အပိုင်းများနှင့် အစိတ်အပိုင်းများကို အပ်ဒိတ်လုပ်ထား သည် <html>။ <body>ပို၍တိကျသည်-

နှင့် အပါအဝင် box-sizingအစိတ်အပိုင်းတိုင်းတွင် ၎င်းကို တစ်ကမ္ဘာလုံးတွင် သတ်မှတ်ထားသည် ။ ၎င်းသည် padding သို့မဟုတ် border ကြောင့် ကြေညာထားသော element ၏ width ကို ဘယ်သောအခါမျှ မကျော်လွန်ကြောင်း သေချာစေသည်။*::before*::afterborder-box
မည်သည့်အခြေခံ ကိုမျှ font-sizeကြေငြာ <html>ခြင်းမရှိသော်လည်း 16px(ဘရောက်ဆာမူရင်း) ဟုယူဆသည်။ font-size: 1remအသုံးပြု <body>သူများ၏ စိတ်ကြိုက်ရွေးချယ်မှုများကို လေးစားပြီး ပိုမိုလက်လှမ်းမီနိုင်သော ချဉ်းကပ်မှုကို သေချာစေစဉ်တွင် မီဒီယာမေးမြန်းချက်များမှတစ်ဆင့် တုံ့ပြန်မှုလွယ်ကူသော အမျိုးအစား-စကေးချဲ့ခြင်းအတွက် အသုံးပြုသည်။
<body>Global , font-family, line-heightand text-align. ဖောင့်ကွဲလွဲမှုများကို ကာကွယ်ရန် ၎င်းကို နောက်ပိုင်းတွင် ပုံစံဒြပ်စင်အချို့မှ အမွေဆက်ခံထားသည်။
ဘေးကင်းစေရန်အတွက်၊ <body>သတ်မှတ်ကြေငြာချက် background-colorတွင် #fffပါရှိသည်။

မူရင်းဖောင့်အတွဲ

မူရင်းဝဘ်ဖောင့်များ (Helvetica Neue, Helvetica, နှင့် Arial) ကို Bootstrap 4 တွင် ဖြုတ်ချခဲ့ပြီး စက်နှင့် OS တိုင်းတွင် အကောင်းဆုံး စာသားပြန်ဆိုရန်အတွက် "ဇာတိဖောင့်အတွဲ" ဖြင့် အစားထိုးထားသည်။ ဤ Smashing Magazine ဆောင်းပါးတွင် မူရင်းဖောင့်အတွဲ များအကြောင်း ပိုမိုဖတ်ရှုပါ ။

$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;

ဖောင့်အစုအဝေးတွင် အီမိုဂျီဖောင့်များပါ၀င်သောကြောင့် ဘုံသင်္ကေတ/dingbat ယူနီကုဒ်အက္ခရာများကို ရောင်စုံရုပ်ပုံများအဖြစ် ပြန်ဆိုမည်ကို သတိပြုပါ။ ၎င်းတို့၏အသွင်အပြင်သည် ဘရောက်ဆာ/ပလပ်ဖောင်း၏ မူရင်းအီမိုဂျီဖောင့်တွင် အသုံးပြုသည့်ပုံစံပေါ်မူတည်၍ ကွဲပြားမည်ဖြစ်ပြီး ၎င်းတို့သည် မည်သည့် CSS colorစတိုင်များကိုမျှ ထိခိုက်မည်မဟုတ်ပါ။

၎င်းကို Bootstrap တစ်လျှောက်လုံး ကမ္ဘာအနှံ့ အလိုအလျောက် အမွေဆက်ခံ font-familyခြင်းသို့ သက်ရောက်သည် ။ <body>ဂလိုဘယ်ကိုပြောင်းရန် font-family၊ အပ်ဒိတ်လုပ်ပြီး $font-family-baseBootstrap ကို ပြန်လည်စုစည်းပါ။

ခေါင်းစဉ်များနှင့် စာပိုဒ်များ

ခေါင်းစီးအစိတ်အပိုင်းများ—ဥပမာ — နှင့် ၎င်းတို့ကိုဖယ်ရှားရန် ပြန်လည် <h1>သတ်မှတ်ထားသည် ။ လွယ်ကူသောအကွာအဝေးအတွက် ခေါင်းစီးများ နှင့် စာပိုဒ် များ ပါရှိသည်။<p>margin-topmargin-bottom: .5remmargin-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၊ Nested စာရင်းများတွင် မရှိပါ margin-bottom။

စာရင်းအားလုံးတွင် ၎င်းတို့၏ ထိပ်တန်းအနားသတ်များကို ဖယ်ရှားထားသည်။
ပြီးတော့ သူတို့ရဲ့ အောက်ခြေအနားသတ်တွေကို ပုံမှန်ပြန်ဖြစ်သွားတယ်။
Nested စာရင်းများတွင် အောက်ခြေအနားသတ်မရှိပါ။
- ဤနည်းဖြင့် ၎င်းတို့သည် ပို၍ပင် အသွင်အပြင်ရှိသည်။
- အထူးသဖြင့် နောက်ထပ်စာရင်းဝင်သည့်အရာများနောက်တွင်
ဘယ်ဘက်အကွက်ကိုလည်း ပြန်လည်သတ်မှတ်ထားပါသည်။

ဤသည်မှာ မှာယူထားသောစာရင်းတစ်ခုဖြစ်သည်။
စာရင်းအချို့နှင့်အတူ
၎င်းတွင် တူညီသော အသွင်အပြင်ရှိသည်။
ယခင်စာရင်းမသွင်းရသေးသောစာရင်းအတိုင်း

ပိုမိုရိုးရှင်းသောပုံစံ၊ ရှင်းရှင်းလင်းလင်း အထက်တန်းအဆင့်နှင့် ပိုမိုကောင်းမွန်သောအကွာအဝေးအတွက်၊ ဖော်ပြချက်စာရင်းများကို အပ်ဒိတ်လုပ်ထားသည် margin။ <dd>s ကို reset margin-leftလုပ်ပြီး 0add ပါ margin-bottom: .5rem။ <dt>၎ ။ _

ဖော်ပြချက်စာရင်းများ: ဖော်ပြချက်စာရင်းသည် ဝေါဟာရများကို သတ်မှတ်ရန်အတွက် ပြီးပြည့်စုံသည်။
ဖိုးသူတော်: အသုံးအနှုန်းအတွက် အဓိပ္ပာယ်ဖွင့်ဆိုချက်။; တူညီသောအသုံးအနှုန်းအတွက် ဒုတိယအဓိပ္ပါယ်။
နောက်တစ်မျိုး: ဤအခြားအသုံးအနှုန်းအတွက် အဓိပ္ပာယ်ဖွင့်ဆိုချက်။

ကြိုတင်ဖော်မတ်ထားသော စာသား

၎င်းကို <pre>ဖယ်ရှားရန်နှင့် ၎င်း၏ အတွက် ယူနစ်များကို margin-topအသုံးပြုရန် အစိတ်အပိုင်းကို ပြန်လည်သတ်မှတ်ထားသည် ။remmargin-bottom

.ဥပမာ-ဒြပ်စင် {
  အနားသတ်-အောက်ခြေ- 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နှင့် sets များကိုလည်း ဖယ်ရှားသည် line-height: inherit။
<textarea>s ကို မကြာခဏ "breaks" စာမျက်နှာ အပြင်အဆင်ကို အလျားလိုက် အရွယ်အစားပြောင်းလဲခြင်းအဖြစ် ဒေါင်လိုက် အရွယ်အစားသာ ပြောင်းလဲနိုင်သော ဒေါင်လိုက်ဖြစ်အောင် ပြင်ဆင်ထားပါသည်။
<button>s နှင့် <input>ခလုတ် အစိတ်အပိုင်းများ သည် မည် cursor: pointerသည့်အချိန်တွင် :not(:disabled)ရှိသည် ။

ဤပြောင်းလဲမှုများနှင့် အခြားအရာများကို အောက်တွင် သရုပ်ပြထားပါသည်။

ဥပမာ ဒဏ္ဍာရီ

နမူနာထည့်သွင်းခြင်း။

နမူနာကို ရွေးပါ။

ဤ checkbox ကိုစစ်ဆေးပါ။

ရွေးချယ်စရာတစ်ခုကတော့ ဒါပါပဲ။ ရွေးချယ်စရာနှစ်ခုသည် ဤဖန်စီပုံစံထိန်းချုပ်မှုများကို ထုပ်ပိုးပြသရန် အလွန်ရှည်လျားသော အခြားအရာတစ်ခုဖြစ်သည်။ ရွေးချယ်ခွင့် သုံးခုကို ပိတ်ထားသည်။

ဥပမာ Textarea

ဥပမာ ရက်စွဲ

နမူနာအချိန်

နမူနာ အထွက် ၁၀၀

ခလုတ်များပေါ်တွင် ညွှန်ပြချက်များ

Reboot တွင် role="button"မူရင်း cursor ကို ပြောင်းလဲရန် အတွက် မြှင့်တင်မှုတစ်ခု ပါဝင်သည် pointer။ ဒြပ်စင်များသည် အပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသည်ကိုထောက်ပြရန် ဤအရည်အချင်းကို ဒြပ်စင်များသို့ထည့်ပါ။ ၎င်းတို့၏ကိုယ်ပိုင် ပြောင်းလဲမှု <button>ကိုရရှိသည့် အစိတ်အပိုင်းများ အတွက် ဤအခန်းကဏ္ဍသည် မလိုအပ်ပါ ။cursor

ခလုတ်မဟုတ်သောဒြပ်စင်ခလုတ်

<span role="button" tabindex="0">Non-button element button</span>

ထွေဒွ

လိပ်စာ

ဘ ရောက်ဆာ ကို မူရင်းအတိုင်း <address>ပြန်လည်သတ်မှတ်ရန် အစိတ်အပိုင်းကို အပ်ဒိတ်လုပ်ထား သည် ။ အခုလည်း အမွေဆက်ခံ ပြီး ထပ်ဖြည့်ထားပါတယ်။ s သည် အနီးဆုံးဘိုးဘေး (သို့မဟုတ် အလုပ်တစ်ခုလုံး) အတွက် ဆက်သွယ်ရန်အချက်အလက်များကို တင်ပြရန်ဖြစ်သည်။ စာကြောင်းများဖြင့် အဆုံးသတ်ခြင်းဖြင့် ဖော်မတ်ချခြင်းကို ထိန်းသိမ်းပါ ။font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

အမည်အပြည့်အစုံ
[email protected]

Blockquote

marginblockquotes ၏ ပုံသေ သည် ဖြစ်သောကြောင့် အခြားအရာများနှင့် ပိုမိုကိုက်ညီသည့်အရာအတွက် 1em 40px၎င်းကို ပြန်လည်သတ်မှတ် ပါသည်။0 0 1rem

blockquote element တွင်ပါရှိသော နာမည်ကြီးကိုးကား။

အရင်းအမြစ်ခေါင်းစဉ် တွင် ကျော်ကြားသူတစ်ဦး

Inline ဒြပ်စင်များ

<abbr>စာပိုဒ်စာသားများကြားတွင် ထင်ရှားစေရန်အတွက် အခြေခံပုံစံကို ဒြပ်စင်က လက်ခံရရှိသည် ။

Nulla attr vitae elit libero၊ a pharetra augue။

အကျဉ်းချုပ်

အနှစ်ချုပ်၏ ပုံသေ cursorမှာ ဖြစ်သည် text၊ ထို့ကြောင့် ၎င်းကို pointerနှိပ်ခြင်းဖြင့် ဒြပ်စင်နှင့် အပြန်အလှန် တုံ့ပြန်နိုင်သည်ကို ဖော်ပြရန်အတွက် ကျွန်ုပ်တို့ ပြန်လည်သတ်မှတ်သည်။

အချို့အသေးစိတ်

အသေးစိတ်အချက်အလက်များနှင့် ပတ်သက်၍ ပိုမိုသိရှိရန်။

ပိုတောင်အသေးစိတ်

ဤတွင်အသေးစိတ်အချက်များအကြောင်းအသေးစိတ်။

HTML5 `[hidden]`ရည်ညွှန်းချက်

HTML5 သည် မူရင်းအတိုင်း ပုံစံချထားသည့် ကမ္ဘာလုံးဆိုင်ရာ ရည်ညွှန်းချက်အသစ်ကို ထည့်သွင်းထားသည်။ [hidden]PureCSSdisplay: none ထံမှ အကြံဥာဏ်တစ်ခု ချေး ယူခြင်းဖြင့် ၎င်းကို မတော်တဆ လွှမ်းမိုးခြင်းမှ ကာကွယ်ရန် ကူညီ ခြင်းဖြင့် ကျွန်ုပ်တို့သည် ဤမူလပုံစံအတိုင်း တိုးတက်ကောင်းမွန် လာပါသည်။ IE10 မှ မူရင်းအတိုင်း မပံ့ပိုး ထားသော်လည်း ကျွန်ုပ်တို့၏ CSS တွင် ပြတ်သားသော ကြေငြာချက်သည် ထိုပြဿနာကို ပြေလည်သွားစေသည်။[hidden] { display: none !important; }display[hidden]

<input type="text" hidden>

jQuery နှင့် မကိုက်ညီပါ။

[hidden]$(...).hide()jQuery နှင့် $(...).show()နည်းလမ်းများ နှင့် ကိုက်ညီမှုမရှိပါ ။ ထို့ကြောင့်၊ ကျွန်ုပ်တို့သည် ဒြပ်စင်များကို [hidden]စီမံခန့်ခွဲရန် အခြားနည်းပညာများကို လောလောဆယ်တွင် အထူးသဖြင့် ထောက်ခံခြင်းမရှိပါ။display

ဒြပ်စင်တစ်ခု၏ မြင်နိုင်စွမ်းကို ပြောင်းရုံမျှသာဖြစ်ပြီး၊ ၎င်းသည် displayမပြုပြင်မွမ်းမံထားပြီး ဒြပ်စင်သည် စာရွက်စာတမ်း၏စီးဆင်းမှုကို သက်ရောက်မှုရှိနေဆဲဖြစ်သောကြောင့်၊ ၎င်း .invisibleအစား အတန်း အစားကို အသုံးပြုပါ။