ပြန်ဖွင့်ပါ။
ဖိုင်တစ်ခုတည်းရှိ ဒြပ်စင်-သတ်သတ်မှတ်မှတ် CSS အပြောင်းအလဲများစုစည်းမှု ပြန်လည်စတင်ခြင်း၊ ပြေပြစ်သော၊ တသမတ်တည်းနှင့် ရိုးရှင်းသော အခြေခံအခြေခံကို ပံ့ပိုးပေးရန်အတွက် kickstart Bootstrap။
ရေးပါတယ်။
HTML ဒြပ်စင်များစွာကို အတန်ငယ်ထင်မြင်ယူဆထားသည့် ပုံစံများဖြင့် ပံ့ပိုးပေးသည့် Normalize ပေါ်တွင် ပြန်လည်စတင်ခြင်းကို တည်ဆောက်ပါသည်။ ထပ်လောင်းပုံစံကို အတန်းများနှင့်သာ ပြုလုပ်ပါသည်။ ဥပမာအားဖြင့်၊ <table>
ကျွန်ုပ်တို့သည် ပိုမိုရိုးရှင်းသော အခြေခံလိုင်းအတွက် စတိုင်အချို့ကို ပြန်လည်စတင်ပြီး နောက်ပိုင်းတွင် .table
, .table-bordered
, နှင့် အခြားအရာများကို ပံ့ပိုးပေးပါသည်။
ဤသည်မှာ Reboot တွင် အစားထိုးရမည့်အရာကို ရွေးချယ်ခြင်းအတွက် ကျွန်ုပ်တို့၏လမ်းညွှန်ချက်များနှင့် အကြောင်းပြချက်များဖြစ်သည်-
- အရွယ်တင်နိုင်သော အစိတ်အပိုင်းအကွာအဝေးအတွက်
rem
s အစား s ကိုအသုံးပြုရန် အချို့သောဘရောက်ဆာ၏ မူရင်းတန်ဖိုးများကို အပ်ဒိတ်လုပ် ပါ။em
- ရှောင်
margin-top
ပါ။ ဒေါင်လိုက် အနားသတ်များသည် ပြိုကျနိုင်ပြီး မမျှော်လင့်ထားသော ရလဒ်များကို ထုတ်ပေးနိုင်သည်။ ပို၍အရေးကြီးသည်မှာ၊ ဦးတည်ချက်တစ်ခုတည်းmargin
သည် ပိုမိုရိုးရှင်းသော စိတ်ပိုင်းဆိုင်ရာပုံစံဖြစ်သည်။ - စက်အရွယ်အစားများတစ်လျှောက် ပိုမိုလွယ်ကူစွာ ချဲ့ထွင်ရန်အတွက်၊ ပိတ်ဆို့သည့်အရာများကို
rem
s အတွက် အသုံးပြုသင့်သည်margin
။ - ဖြစ်နိုင်သည့်အခါတိုင်း
font
အသုံးပြု၍ -related properties ၏ ကြေငြာချက်များကို အနည်းဆုံးဖြစ်အောင်ထားပါ။inherit
စာမျက်နှာ ပုံသေများ
ပိုမိုကောင်းမွန်သော စာမျက်နှာကျယ်သော ပုံသေများကို ပေးဆောင်ရန် အစိတ်အပိုင်းများနှင့် အစိတ်အပိုင်းများကို အပ်ဒိတ်လုပ်ထား သည် <html>
။ <body>
ပို၍တိကျသည်-
- နှင့် အပါအဝင်
box-sizing
အစိတ်အပိုင်းတိုင်းတွင် ၎င်းကို တစ်ကမ္ဘာလုံးတွင် သတ်မှတ်ထားသည် ။ ၎င်းသည် padding သို့မဟုတ် border ကြောင့် ကြေညာထားသော element ၏ width ကို ဘယ်သောအခါမျှ မကျော်လွန်ကြောင်း သေချာစေသည်။*::before
*::after
border-box
- မည်သည့်အခြေခံ ကိုမျှ
font-size
ကြေငြာ<html>
ခြင်းမရှိသော်လည်း16px
(ဘရောက်ဆာမူရင်း) ဟုယူဆသည်။font-size: 1rem
အသုံးပြု<body>
သူများ၏ စိတ်ကြိုက်ရွေးချယ်မှုများကို လေးစားပြီး ပိုမိုလက်လှမ်းမီနိုင်သော ချဉ်းကပ်မှုကို သေချာစေစဉ်တွင် မီဒီယာမေးမြန်းချက်များမှတစ်ဆင့် တုံ့ပြန်မှုလွယ်ကူသော အမျိုးအစား-စကေးချဲ့ခြင်းအတွက် အသုံးပြုသည်။ <body>
Global ,font-family
,line-height
andtext-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-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
၊ Nested စာရင်းများတွင် မရှိပါ margin-bottom
။
- စာရင်းအားလုံးတွင် ၎င်းတို့၏ ထိပ်တန်းအနားသတ်များကို ဖယ်ရှားထားသည်။
- ပြီးတော့ သူတို့ရဲ့ အောက်ခြေအနားသတ်တွေကို ပုံမှန်ပြန်ဖြစ်သွားတယ်။
- Nested စာရင်းများတွင် အောက်ခြေအနားသတ်မရှိပါ။
- ဤနည်းဖြင့် ၎င်းတို့သည် ပို၍ပင် အသွင်အပြင်ရှိသည်။
- အထူးသဖြင့် နောက်ထပ်စာရင်းဝင်သည့်အရာများနောက်တွင်
- ဘယ်ဘက်အကွက်ကိုလည်း ပြန်လည်သတ်မှတ်ထားပါသည်။
- ဤသည်မှာ မှာယူထားသောစာရင်းတစ်ခုဖြစ်သည်။
- စာရင်းအချို့နှင့်အတူ
- ၎င်းတွင် တူညီသော အသွင်အပြင်ရှိသည်။
- ယခင်စာရင်းမသွင်းရသေးသောစာရင်းအတိုင်း
ပိုမိုရိုးရှင်းသောပုံစံ၊ ရှင်းရှင်းလင်းလင်း အထက်တန်းအဆင့်နှင့် ပိုမိုကောင်းမွန်သောအကွာအဝေးအတွက်၊ ဖော်ပြချက်စာရင်းများကို အပ်ဒိတ်လုပ်ထားသည် margin
။ <dd>
s ကို reset margin-left
လုပ်ပြီး 0
add ပါ margin-bottom: .5rem
။ <dt>
၎ ။ _
- ဖော်ပြချက်စာရင်းများ
- ဖော်ပြချက်စာရင်းသည် ဝေါဟာရများကို သတ်မှတ်ရန်အတွက် ပြီးပြည့်စုံသည်။
- ဖိုးသူတော်
- အသုံးအနှုန်းအတွက် အဓိပ္ပာယ်ဖွင့်ဆိုချက်။
- တူညီသောအသုံးအနှုန်းအတွက် ဒုတိယအဓိပ္ပါယ်။
- နောက်တစ်မျိုး
- ဤအခြားအသုံးအနှုန်းအတွက် အဓိပ္ပာယ်ဖွင့်ဆိုချက်။
ကြိုတင်ဖော်မတ်ထားသော စာသား
၎င်းကို <pre>
ဖယ်ရှားရန်နှင့် ၎င်း၏ အတွက် ယူနစ်များကို margin-top
အသုံးပြုရန် အစိတ်အပိုင်းကို ပြန်လည်သတ်မှတ်ထားသည် ။rem
margin-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)
ရှိသည် ။
ဤပြောင်းလဲမှုများနှင့် အခြားအရာများကို အောက်တွင် သရုပ်ပြထားပါသည်။
ခလုတ်များပေါ်တွင် ညွှန်ပြချက်များ
Reboot တွင် role="button"
မူရင်း cursor ကို ပြောင်းလဲရန် အတွက် မြှင့်တင်မှုတစ်ခု ပါဝင်သည် pointer
။ ဒြပ်စင်များသည် အပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသည်ကိုထောက်ပြရန် ဤအရည်အချင်းကို ဒြပ်စင်များသို့ထည့်ပါ။ ၎င်းတို့၏ကိုယ်ပိုင် ပြောင်းလဲမှု <button>
ကိုရရှိသည့် အစိတ်အပိုင်းများ အတွက် ဤအခန်းကဏ္ဍသည် မလိုအပ်ပါ ။cursor
<span role="button" tabindex="0">Non-button element button</span>
ထွေဒွ
လိပ်စာ
ဘ ရောက်ဆာ ကို မူရင်းအတိုင်း <address>
ပြန်လည်သတ်မှတ်ရန် အစိတ်အပိုင်းကို အပ်ဒိတ်လုပ်ထား သည် ။ အခုလည်း အမွေဆက်ခံ ပြီး ထပ်ဖြည့်ထားပါတယ်။ s သည် အနီးဆုံးဘိုးဘေး (သို့မဟုတ် အလုပ်တစ်ခုလုံး) အတွက် ဆက်သွယ်ရန်အချက်အလက်များကို တင်ပြရန်ဖြစ်သည်။ စာကြောင်းများဖြင့် အဆုံးသတ်ခြင်းဖြင့် ဖော်မတ်ချခြင်းကို ထိန်းသိမ်းပါ ။font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 အမည်အပြည့်အစုံ
[email protected]
Blockquote
margin
blockquotes ၏ ပုံသေ သည် ဖြစ်သောကြောင့် အခြားအရာများနှင့် ပိုမိုကိုက်ညီသည့်အရာအတွက် 1em 40px
၎င်းကို ပြန်လည်သတ်မှတ် ပါသည်။0 0 1rem
blockquote element တွင်ပါရှိသော နာမည်ကြီးကိုးကား။
Inline ဒြပ်စင်များ
<abbr>
စာပိုဒ်စာသားများကြားတွင် ထင်ရှားစေရန်အတွက် အခြေခံပုံစံကို ဒြပ်စင်က လက်ခံရရှိသည် ။
အကျဉ်းချုပ်
အနှစ်ချုပ်၏ ပုံသေ 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
အစား အတန်း အစားကို အသုံးပြုပါ။