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

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

ဤစာမျက်နှာတွင်

ရေးပါတယ်။

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

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

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

CSS ကိန်းရှင်များ

v5.2.0 တွင် ထည့်သွင်းထားသည်။

v5.1.1 ဖြင့် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ @importCSS အတွဲများ (အပါအဝင် bootstrap.css, bootstrap-reboot.css, နှင့် bootstrap-grid.css) အားလုံးကို စံပြုသတ်မှတ်ထား _root.scssပါသည်။ ၎င်းသည် ထို :rootအစုအဝေးတွင် မည်မျှအသုံးပြုသည်ဖြစ်စေ ၎င်းတို့ကို အတွဲအားလုံးတွင် အဆင့် CSS ကိန်းရှင်များကို ပေါင်းထည့်သည်။ အဆုံးစွန်အားဖြင့် Bootstrap 5 သည် Sass ကို အမြဲတမ်းပြန်လည်ပေါင်းစည်းရန်မလိုအပ်ဘဲ ပိုမိုအချိန်နှင့်တစ်ပြေးညီ စိတ်ကြိုက်ပြုပြင်မှုများကို ပံ့ပိုးပေးနိုင်ရန် အချိန်နှင့်အမျှ ထပ်ထည့်ထားသော CSS variable များကို ဆက်လက်မြင်တွေ့ရမည်ဖြစ်ပါသည် ။ ကျွန်ုပ်တို့၏ချဉ်းကပ်ပုံမှာ ကျွန်ုပ်တို့၏အရင်းအမြစ် Sass variable များကိုယူကာ ၎င်းတို့ကို CSS variable များအဖြစ်ပြောင်းလဲရန်ဖြစ်သည်။ ထိုနည်းအားဖြင့် သင်သည် CSS variable များကိုအသုံးမပြုသော်လည်း၊ သင့်တွင် Sass ၏ ပါဝါအားလုံးရှိနေသေးသည်။ ၎င်းသည် ဆက်လက်လုပ်ဆောင်ဆဲဖြစ်ပြီး အပြည့်အဝအကောင်အထည်ဖော်ရန် အချိန်ယူရမည်ဖြစ်သည်။

ဥပမာအားဖြင့်၊ :rootဘုံ <body>စတိုင်များအတွက် ဤ CSS variable များကို သုံးသပ်ကြည့်ပါ-

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

လက်တွေ့တွင်၊ အဆိုပါ variable များကို Reboot တွင်အသုံးပြုသည်-

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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

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

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

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

Bootstrap သည် စက်နှင့် OS တိုင်းတွင် အကောင်းဆုံးစာသားပြန်ဆိုရန်အတွက် "ဇာတိဖောင့်အစုစု" သို့မဟုတ် "စနစ်ဖောင့်အစုစု" ကို အသုံးပြုသည်။ ဤစနစ်ဖောင့်များကို ဖန်သားပြင်များပေါ်တွင် ပိုမိုကောင်းမွန်သော rendering၊ ပြောင်းလဲနိုင်သော ဖောင့်ပံ့ပိုးမှု နှင့် အခြားအရာများဖြင့် ယနေ့ခေတ် စက်ပစ္စည်းများဖြင့် အထူးဒီဇိုင်းထုတ်ထားပါသည်။ ဤ Smashing Magazine ဆောင်းပါးတွင် မူရင်းဖောင့်အတွဲ များအကြောင်း ပိုမိုဖတ်ရှုပါ ။

$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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 ခေါင်းစဉ်

အလျားလိုက်စည်းမျဉ်းများ

<hr>ဒြပ်စင်ကို ရိုးရှင်းအောင် ပြုလုပ်ထားသည် ။ ဘရောက်ဆာ ပုံသေများ နှင့် ဆင်တူသည်၊ <hr>s သည် ပုံသေပုံစံ border-topရှိသည် ၊ မိဘမှတစ်ဆင့် သတ်မှတ်ထား သည့်အချိန် အပါအဝင် ၎င်းတို့ မှတဆင့် opacity: .25အလိုအလျောက် အမွေဆက်ခံ သည်။ ၎င်းတို့ကို စာသား၊ ဘောင်နှင့် အလင်းပိတ်စနစ်များဖြင့် ပြုပြင်နိုင်သည်။border-colorcolorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

စာရင်းများ

စာရင်းအားလုံး— <ul>, <ol>, နှင့် <dl>— တို့ကို margin-topဖယ်ရှားထားပြီး margin-bottom: 1rem၊ Nested စာရင်းများတွင် မရှိပါ margin-bottom။ padding-leftOn <ul>နှင့် <ol>Element များကိုလည်း ပြန်လည်သတ်မှတ်ထား ပါသည်။

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

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

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

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

လိုင်းကုဒ်

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

ဥပမာအားဖြင့် <section>inline အဖြစ်ထုပ်ပိုးသင့်သည်။

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ကုတ်တုံး

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

ကိန်းရှင်များ

ကိန်းရှင်များကိုညွှန်ပြရန်အတွက် <var>tag ကိုသုံးပါ။

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

အသုံးပြုသူ ထည့်သွင်းမှု

<kbd>ပုံမှန်အားဖြင့် ကီးဘုတ်မှတစ်ဆင့် ထည့်သွင်းသည့် ထည့်သွင်းမှုကို ညွှန်ပြရန်အတွက် အသုံးပြုပါ ။

လမ်းညွှန်များကို ပြောင်းရန်၊ လမ်းညွှန် cd၏အမည်ကို နောက်တွင် ရိုက်ထည့်ပါ။
ဆက်တင်များကို တည်းဖြတ်ရန် နှိပ်ပါ။ ctrl + ,

html

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>tag ကို အသုံးပြုပါ။

ဤစာသားကို ကွန်ပြူတာပရိုဂရမ်တစ်ခုမှ နမူနာထွက်ရှိမှုအဖြစ် သတ်မှတ်ရန် ရည်ရွယ်သည်။

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

စားပွဲများ

ဇယားများကို ပုံစံ <caption>s သို့ အနည်းငယ် ချိန်ညှိထားပြီး၊ ဘောင်များ ပြိုကျကာ တစ်လျှောက်လုံး တသမတ်တည်း ဖြစ်စေရန် သေချာသည် text-align။ ဘောင်များ၊ အကွက်များနှင့် အခြားအရာများအတွက် ထပ်လောင်းပြောင်းလဲမှုများ သည် .tableအတန်း နှင့်အတူ လာပါသည် ။

၎င်းသည် နမူနာဇယားတစ်ခုဖြစ်ပြီး ၎င်းသည် အကြောင်းအရာများကိုဖော်ပြရန် ၎င်း၏စာတန်းဖြစ်သည်။
ဇယားခေါင်းစဉ်	ဇယားခေါင်းစဉ်	ဇယားခေါင်းစဉ်	ဇယားခေါင်းစဉ်
ဇယားဆဲလ်	ဇယားဆဲလ်	ဇယားဆဲလ်	ဇယားဆဲလ်
ဇယားဆဲလ်	ဇယားဆဲလ်	ဇယားဆဲလ်	ဇယားဆဲလ်
ဇယားဆဲလ်	ဇယားဆဲလ်	ဇယားဆဲလ်	ဇယားဆဲလ်

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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)ရှိသည် ။

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

ဥပမာ ဒဏ္ဍာရီ

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

နမူနာအီးမေးလ်

ဥပမာ တယ်လီဖုန်း

နမူနာ url

နမူနာနံပါတ်

နမူနာရှာဖွေမှု

ဥပမာ အပိုင်းအခြား

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

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

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

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

ဥပမာ Textarea

ဥပမာ ရက်စွဲ

နမူနာအချိန်

ဥပမာ စကားဝှက်

ဥပမာ datetime-local

နမူနာအပတ်

ဥပမာလ

နမူနာအရောင်

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

ရက်စွဲနှင့် အရောင်ထည့်သွင်းမှု ပံ့ပိုးမှု

Safari အမည်ရ ဘရောက်ဆာအားလုံးမှ ရက်စွဲထည့်သွင်းမှုများကို အပြည့်အဝ မပံ့ပိုး နိုင်သည်ကို သတိပြုပါ။

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

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

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

html

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

HTML အတိုကောက် အစိတ်အပိုင်း ။

အကျဉ်းချုပ်

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

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

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

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

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

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

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

<input type="text" hidden>

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

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

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

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

ရေးပါတယ်။

CSS ကိန်းရှင်များ

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

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

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

အလျားလိုက်စည်းမျဉ်းများ

စာရင်းများ

လိုင်းကုဒ်

ကုတ်တုံး

ကိန်းရှင်များ

အသုံးပြုသူ ထည့်သွင်းမှု

နမူနာအထွက်

စားပွဲများ

ပုံစံများ

ရက်စွဲနှင့် အရောင်ထည့်သွင်းမှု ပံ့ပိုးမှု

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

ထွေဒွ

လိပ်စာ

Blockquote

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

အကျဉ်းချုပ်

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

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

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