Source

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

ဖိုင်တစ်ခုတည်းရှိ ဒြပ်စင်-သတ်သတ်မှတ်မှတ် 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 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-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။

  • Lorem ipsum dolor ထိုင် amet
  • Consectetur adipiscing elit
  • Massa တွင် Integer molestie lorem
  • pretium nisl aliquet တွင် Facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean ထိုင် amet erat သီလရှင်
  • porttitor loem ကိုရယူပါ။
  1. Lorem ipsum dolor ထိုင် amet
  2. Consectetur adipiscing elit
  3. Massa တွင် Integer molestie lorem
  4. pretium nisl aliquet တွင် Facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean ထိုင် amet erat သီလရှင်
  8. porttitor loem ကိုရယူပါ။

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

ဖော်ပြချက်စာရင်းများ
ဖော်ပြချက်စာရင်းသည် ဝေါဟာရများကို သတ်မှတ်ရန်အတွက် ပြီးပြည့်စုံသည်။
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem။
Donec id elit non mi porta gravida at eget metus
Malesuada porta
Etiam porta sem malesuada magna mollis euismod။

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

၎င်းကို <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" စာမျက်နှာ အပြင်အဆင်ကို အလျားလိုက် အရွယ်အစားပြောင်းလဲခြင်းအဖြစ် ဒေါင်လိုက် အရွယ်အစားသာ ပြောင်းလဲနိုင်သော ဒေါင်လိုက်ဖြစ်အောင် ပြင်ဆင်ထားပါသည်။

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

ဥပမာ ဒဏ္ဍာရီ

၁၀၀

ထွေဒွ

လိပ်စာ

ဘ ရောက်ဆာ ကို မူရင်းအတိုင်း <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

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။

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

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အစား အတန်း အစားကို အသုံးပြုပါ။