in English

ປິດເປີດໃໝ່

Reboot, ການລວບລວມການປ່ຽນແປງ CSS ສະເພາະໃນໄຟລ໌ດຽວ, kickstart Bootstrap ເພື່ອໃຫ້ພື້ນຖານທີ່ສະຫງ່າງາມ, ສອດຄ່ອງ, ແລະງ່າຍດາຍທີ່ຈະສ້າງຂື້ນ.

ໃນໜ້ານີ້

ວິທີການ

Reboot ກໍ່ສ້າງຕາມ Normalize, ສະຫນອງອົງປະກອບ HTML ຫຼາຍຮູບແບບທີ່ມີຄວາມຄິດເຫັນບາງຢ່າງໂດຍໃຊ້ຕົວເລືອກອົງປະກອບເທົ່ານັ້ນ. ຄໍເຕົ້າໄຂ່ທີ່ເພີ່ມເຕີມແມ່ນເຮັດກັບຫ້ອງຮຽນເທົ່ານັ້ນ. ຕົວຢ່າງ, ພວກເຮົາປິດເປີດບາງ <table>ຮູບແບບສໍາລັບພື້ນຖານທີ່ງ່າຍກວ່າ ແລະຕໍ່ມາໃຫ້ .table, .table-bordered, ແລະອື່ນໆອີກ.

ນີ້ແມ່ນຂໍ້ແນະນຳ ແລະເຫດຜົນຂອງພວກເຮົາສຳລັບການເລືອກສິ່ງທີ່ຈະລົບລ້າງໃນ Reboot:

ອັບເດດບາງຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບເພື່ອໃຊ້ rems ແທນ ems ສໍາລັບໄລຍະຫ່າງອົງປະກອບທີ່ສາມາດຂະຫຍາຍໄດ້.
ຫຼີກເວັ້ນ margin-top. ຂອບແນວຕັ້ງສາມາດຍຸບລົງໄດ້, ໃຫ້ຜົນໄດ້ຮັບທີ່ບໍ່ຄາດຄິດ. ສິ່ງທີ່ ສຳ ຄັນກວ່ານັ້ນ, ທິດທາງດຽວ marginແມ່ນຮູບແບບທາງຈິດທີ່ງ່າຍດາຍກວ່າ.
ສໍາລັບການຂະຫຍາຍຂະຫນາດຂອງອຸປະກອນໄດ້ງ່າຍຂຶ້ນ, ອົງປະກອບບລັອກຄວນໃຊ້ rems ສໍາລັບ margins.
ຮັກສາການປະກາດຂອງ fontຄຸນສົມບັດທີ່ກ່ຽວຂ້ອງກັບຕໍາ່ສຸດທີ່, ການນໍາໃຊ້ inheritທຸກຄັ້ງທີ່ເປັນໄປໄດ້.

ຕົວແປ CSS

ເພີ່ມໃນ v5.2.0

ດ້ວຍ v5.1.1, ພວກເຮົາໄດ້ປັບມາດຕະຖານທີ່ຕ້ອງການຂອງພວກເຮົາ @importໃນທົ່ວຊຸດ CSS ທັງຫມົດຂອງພວກເຮົາ (ລວມທັງ bootstrap.css, bootstrap-reboot.css, ແລະ bootstrap-grid.css) ເພື່ອປະກອບມີ _root.scss. ນີ້ຈະເພີ່ມ :rootຕົວແປລະດັບ CSS ໃຫ້ກັບທຸກມັດ, ໂດຍບໍ່ຄໍານຶງເຖິງວິທີການຈໍານວນຫຼາຍຂອງພວກມັນຖືກນໍາໃຊ້ໃນມັດນັ້ນ. ໃນທີ່ສຸດ Bootstrap 5 ຈະສືບຕໍ່ເຫັນ ຕົວແປ CSS ເພີ່ມເຕີມໃນໄລຍະເວລາ, ເພື່ອສະຫນອງການປັບແຕ່ງໃນເວລາທີ່ແທ້ຈິງຫຼາຍຂຶ້ນໂດຍບໍ່ຈໍາເປັນຕ້ອງລວບລວມ Sass ສະເຫມີ. ວິທີການຂອງພວກເຮົາແມ່ນເພື່ອເອົາຕົວແປ Sass ຂອງພວກເຮົາແລະປ່ຽນມັນເຂົ້າໄປໃນຕົວແປ CSS. ດ້ວຍວິທີນັ້ນ, ເຖິງແມ່ນວ່າທ່ານບໍ່ໃຊ້ຕົວແປ CSS, ທ່ານຍັງມີອໍານາດທັງຫມົດຂອງ Sass. ນີ້ຍັງຢູ່ໃນຄວາມຄືບຫນ້າແລະຈະໃຊ້ເວລາເພື່ອປະຕິບັດຢ່າງເຕັມສ່ວນ.

ຕົວຢ່າງ, ພິຈາລະນາ :rootຕົວແປ CSS ເຫຼົ່ານີ້ສໍາລັບ <body>ຮູບແບບທົ່ວໄປ:

  @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};

ໃນທາງປະຕິບັດ, ຕົວແປເຫຼົ່ານັ້ນຖືກໃຊ້ໃນ 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ຖືກກໍານົດທົ່ວໂລກໃນທຸກໆອົງປະກອບ - ລວມທັງ *::beforeແລະ *::after, ກັບ border-box. ນີ້ຮັບປະກັນວ່າຄວາມກວ້າງຂອງອົງປະກອບທີ່ປະກາດຈະບໍ່ເກີນເນື່ອງຈາກ padding ຫຼືຊາຍແດນ.
- ບໍ່ມີພື້ນຖານ font-sizeຖືກປະກາດຢູ່ໃນ <html>, ແຕ່ 16pxຖືກສົມມຸດ (ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ). font-size: 1remຖືກນໍາໃຊ້ໃນການແກ້ໄຂ <body>ປະເພດທີ່ຕອບສະຫນອງໄດ້ງ່າຍໂດຍຜ່ານການສອບຖາມສື່ໃນຂະນະທີ່ເຄົາລົບຄວາມມັກຂອງຜູ້ໃຊ້ແລະຮັບປະກັນວິທີການທີ່ສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍຂຶ້ນ. ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບນີ້ສາມາດຖືກລົບລ້າງໂດຍການດັດ $font-size-rootແປງຕົວແປ.
ນອກ <body>ຈາກນີ້ຍັງກໍານົດລະດັບໂລກ font-family, font-weight, line-height, ແລະ color. ນີ້ແມ່ນການສືບທອດຕໍ່ມາໂດຍບາງອົງປະກອບແບບຟອມເພື່ອປ້ອງກັນຄວາມບໍ່ສອດຄ່ອງຂອງຕົວອັກສອນ.
ເພື່ອຄວາມປອດໄພ, <body>ມີການປະກາດ background-color, ເລີ່ມຕົ້ນເປັນ #fff.

stack ຟອນເດີມ

Bootstrap ໃຊ້ " stack font native" ຫຼື "system font stack" ສໍາລັບການສະແດງຂໍ້ຄວາມທີ່ດີທີ່ສຸດໃນທຸກອຸປະກອນແລະ OS. ຟອນລະບົບເຫຼົ່ານີ້ໄດ້ຮັບການອອກແບບໂດຍສະເພາະກັບອຸປະກອນຂອງມື້ນີ້ຢູ່ໃນໃຈ, ດ້ວຍການປັບປຸງການສະແດງຜົນໃນໜ້າຈໍ, ຮອງຮັບຟອນຕົວແປ ແລະອື່ນໆອີກ. ອ່ານເພີ່ມເຕີມກ່ຽວກັບ stacks ຕົວອັກສອນພື້ນເມືອງໃນ ບົດຄວາມ 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;

ໃຫ້ສັງເກດວ່າເນື່ອງຈາກວ່າ stack font ປະກອບມີຕົວອັກສອນ emoji, ສັນຍາລັກທົ່ວໄປຈໍານວນຫຼາຍ / dingbat ຕົວອັກສອນ Unicode ຈະຖືກສະແດງເປັນຮູບຫຼາຍສີ. ຮູບລັກສະນະຂອງພວກມັນຈະແຕກຕ່າງກັນ, ຂຶ້ນກັບຮູບແບບທີ່ໃຊ້ໃນຕົວອັກສອນ emoji ພື້ນເມືອງຂອງຕົວທ່ອງເວັບ / ເວທີ, ແລະພວກມັນຈະບໍ່ໄດ້ຮັບຜົນກະທົບຈາກ colorຮູບແບບ CSS ໃດໆ.

ອັນນີ້ font-familyຖືກນຳໃຊ້ກັບ <body>ແລະ ສືບທອດໂດຍອັດຕະໂນມັດທົ່ວໂລກຕະຫຼອດ Bootstrap. ເພື່ອປ່ຽນທົ່ວໂລກ 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

ກົດລະບຽບແນວນອນ

ອົງ ປະ <hr>ກອບໄດ້ຖືກເຮັດໃຫ້ງ່າຍດາຍ. ຄ້າຍກັບຄ່າເລີ່ມຕົ້ນຂອງບຣາວເຊີ, <hr>s ຖືກຈັດຮູບແບບຜ່ານ border-top, ມີຄ່າເລີ່ມຕົ້ນ opacity: .25, ແລະຈະສືບທອດຂອງພວກມັນ ໂດຍອັດຕະໂນມັດ border-colorຜ່ານ color, ລວມທັງເວລາທີ່ colorຕັ້ງຜ່ານພໍ່ແມ່. ພວກເຂົາສາມາດຖືກດັດແປງດ້ວຍຕົວຫນັງສື, ຂອບ, ແລະຄວາມໂປ່ງໃສ.

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. ລາຍຊື່ທີ່ຊ້ອນກັນບໍ່ມີ margin-bottom. ພວກເຮົາຍັງໄດ້ຣີເຊັດການ padding-leftເປີດ <ul>ແລະ <ol>ອົງປະກອບ.

ລາຍຊື່ທັງໝົດມີຂອບເທິງສຸດຂອງພວກມັນອອກ
ແລະຂອບລຸ່ມຂອງເຂົາເຈົ້າ normalized
ລາຍຊື່ທີ່ຊ້ອນກັນບໍ່ມີຂອບລຸ່ມ
- ດ້ວຍວິທີນີ້, ພວກມັນມີລັກສະນະຫຼາຍກວ່າເກົ່າ
- ໂດຍສະເພາະໃນເວລາທີ່ຕິດຕາມດ້ວຍລາຍການລາຍການຫຼາຍ
padding ຊ້າຍຍັງໄດ້ຮັບການປັບ

ນີ້ແມ່ນລາຍການຄໍາສັ່ງ
ມີລາຍການລາຍການຈໍານວນຫນຶ່ງ
ມັນມີລັກສະນະໂດຍລວມຄືກັນ
ໃນຖານະເປັນບັນຊີລາຍການ unordered ຜ່ານມາ

ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່ງ່າຍກວ່າ, ລໍາດັບຊັ້ນທີ່ຊັດເຈນ, ແລະຊ່ອງຫວ່າງທີ່ດີກວ່າ, ລາຍຊື່ຄໍາອະທິບາຍໄດ້ປັບປຸງ margins. <dd>s ປັບ margin-leftແລະ 0ເພີ່ມ margin-bottom: .5rem. <dt>s ແມ່ນ ກ້າຫານ .

ລາຍລະອຽດ: ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
ໄລຍະ: ຄໍານິຍາມສໍາລັບຄໍາສັບ.; ຄໍານິຍາມທີສອງສໍາລັບຄໍາດຽວກັນ.
ໄລຍະອື່ນ: ຄໍານິຍາມສໍາລັບຄໍາສັບອື່ນນີ້.

ລະຫັດໃນແຖວ

ຫໍ່ຕົວຫຍໍ້ຂອງລະຫັດໃນແຖວດ້ວຍ <code>. ໃຫ້ແນ່ໃຈວ່າຈະຫນີວົງເລັບມຸມ HTML.

ຕົວຢ່າງ, <section>ຄວນຖືກຫໍ່ເປັນແຖວ.

html

For example, <code>&lt;section&gt;</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>

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>ແທັກ.

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>ແທັກ.

ຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະໄດ້ຮັບການປະຕິບັດເປັນຕົວຢ່າງຜົນຜະລິດຈາກໂຄງການຄອມພິວເຕີ.

html

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

ຕາຕະລາງ

ຕາຕະລາງຖືກປັບເລັກນ້ອຍເປັນຮູບແບບ <caption>s, ຫຍໍ້ຂອບ, ແລະຮັບປະກັນຄວາມສອດຄ່ອງ text-alignຕະຫຼອດ. ການປ່ຽນແປງເພີ່ມເຕີມສໍາລັບຂອບເຂດ, padding, ແລະອື່ນໆມາກັບ ຫ້ອງ .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 ບໍ່ມີຂອບ, padding, ຫຼືຂອບດັ່ງນັ້ນເຂົາເຈົ້າສາມາດໄດ້ຮັບການນໍາໃຊ້ໄດ້ຢ່າງງ່າຍດາຍເປັນ wrappers ສໍາລັບແຕ່ລະ inputs ຫຼືກຸ່ມຂອງ inputs.
<legend>s, ເຊັ່ນ fieldsets, ຍັງໄດ້ຖືກປ່ຽນຮູບແບບເພື່ອສະແດງເປັນຫົວຂໍ້ຂອງການຈັດລຽງ.
<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).

ການປ່ຽນແປງເຫຼົ່ານີ້, ແລະອື່ນໆອີກ, ແມ່ນສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້.

ນິທານຕົວຢ່າງ

ການປ້ອນຂໍ້ມູນຕົວຢ່າງ

ຕົວຢ່າງອີເມວ

ຕົວຢ່າງໂທລະສັບ

ຕົວຢ່າງ url

ຕົວເລກຕົວຢ່າງ

ຄົ້ນຫາຕົວຢ່າງ

ຊ່ວງຕົວຢ່າງ

ຕົວຢ່າງການປ້ອນໄຟລ໌

ຕົວຢ່າງເລືອກ

ກວດເບິ່ງກ່ອງໝາຍນີ້

ທາງເລືອກຫນຶ່ງແມ່ນນີ້ແລະນັ້ນ ທາງເລືອກທີສອງແມ່ນບາງສິ່ງບາງຢ່າງທີ່ຍັງຍາວ super ເພື່ອສະແດງໃຫ້ເຫັນການຫໍ່ຂອງການຄວບຄຸມຮູບແບບ fancy ເຫຼົ່ານີ້. ທາງເລືອກທີສາມແມ່ນພິການ

ຕົວຢ່າງພື້ນທີ່ຂໍ້ຄວາມ

ວັນທີຕົວຢ່າງ

ຕົວຢ່າງເວລາ

ຕົວຢ່າງລະຫັດຜ່ານ

ຕົວຢ່າງວັນທີ-ທ້ອງຖິ່ນ

ຕົວຢ່າງອາທິດ

ຕົວຢ່າງເດືອນ

ຕົວຢ່າງສີ

ຕົວຢ່າງຜົນຜະລິດ 100

ຮອງຮັບການປ້ອນຂໍ້ມູນວັນທີ ແລະສີ

ຈື່ໄວ້ວ່າຂໍ້ມູນວັນທີ ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນ ໂດຍຕົວທ່ອງເວັບທັງຫມົດ, ຄື Safari.

ຕົວຊີ້ໃສ່ປຸ່ມ

Reboot ລວມມີການປັບປຸງສໍາລັບ role="button"ການປ່ຽນຕົວກະພິບເລີ່ມຕົ້ນເປັນ pointer. ເພີ່ມຄຸນລັກສະນະນີ້ໃສ່ອົງປະກອບເພື່ອຊ່ວຍຊີ້ບອກວ່າອົງປະກອບມີການໂຕ້ຕອບ. ບົດບາດນີ້ບໍ່ຈໍາເປັນສໍາລັບ <button>ອົງປະກອບ, ເຊິ່ງໄດ້ຮັບ cursorການປ່ຽນແປງຂອງຕົນເອງ.

ປຸ່ມອົງປະກອບທີ່ບໍ່ແມ່ນປຸ່ມ

html

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

ອົງປະກອບອື່ນໆ

ທີ່ຢູ່

ອົງ ປະ <address>ກອບໄດ້ຖືກປັບປຸງເພື່ອປັບຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ font-styleຈາກ italicໄປເປັນ normal. line-heightໃນປັດຈຸບັນຍັງໄດ້ຮັບການສືບທອດ, ແລະ margin-bottom: 1remໄດ້ຖືກເພີ່ມ. <address>s ແມ່ນສໍາລັບການນໍາສະເຫນີຂໍ້ມູນຕິດຕໍ່ສໍາລັບບັນພະບຸລຸດທີ່ໃກ້ທີ່ສຸດ (ຫຼືການເຮັດວຽກທັງຫມົດ). ຮັກສາການຈັດຮູບແບບໂດຍການລົງທ້າຍແຖວດ້ວຍ <br>.

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

ຊື່ເຕັມ
[email protected]

Blockquote

ຄ່າເລີ່ມຕົ້ນ marginຂອງ blockquotes ແມ່ນ 1em 40px, ດັ່ງນັ້ນພວກເຮົາ reset ທີ່ເປັນ 0 0 1remສໍາລັບບາງສິ່ງບາງຢ່າງທີ່ສອດຄ່ອງກັບອົງປະກອບອື່ນໆ.

ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ

ອົງປະກອບໃນແຖວ

ອົງ ປະ <abbr>ກອບໄດ້ຮັບການຈັດຮູບແບບພື້ນຖານເພື່ອເຮັດໃຫ້ມັນໂດດເດັ່ນໃນບັນດາຂໍ້ຄວາມຫຍໍ້ຫນ້າ.

ອົງ ປະກອບຂອງ ຕົວຫຍໍ້ HTML .

ສະຫຼຸບ

ຄ່າເລີ່ມຕົ້ນ cursorຂອງບົດສະຫຼຸບແມ່ນ text, ດັ່ງນັ້ນພວກເຮົາຕັ້ງມັນໃຫມ່ pointerເພື່ອບົ່ງບອກວ່າອົງປະກອບສາມາດພົວພັນກັບໄດ້ໂດຍການຄລິກໃສ່ມັນ.

ບາງລາຍລະອຽດ

ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບລາຍລະອຽດ.

ເຖິງແມ່ນວ່າລາຍລະອຽດເພີ່ມເຕີມ

ນີ້ແມ່ນແມ້ກະທັ້ງລາຍລະອຽດເພີ່ມເຕີມກ່ຽວກັບລາຍລະອຽດ.

`[hidden]`ຄຸນລັກສະນະ HTML5

HTML5 ເພີ່ມ ຄຸນສົມບັດທົ່ວໂລກໃຫມ່ທີ່ມີຊື່ວ່າ[hidden] , ເຊິ່ງຖືກຈັດຮູບແບບຕາມ display: noneຄ່າເລີ່ມຕົ້ນ. ການກູ້ຢືມຄວາມຄິດຈາກ PureCSS , ພວກເຮົາປັບປຸງຕາມຄ່າເລີ່ມຕົ້ນນີ້ໂດຍການເຮັດ [hidden] { display: none !important; }ເພື່ອຊ່ວຍປ້ອງກັນບໍ່ໃຫ້ມັນ displayຖືກ overridden ໂດຍບັງເອີນ.

<input type="text" hidden>

jQuery ບໍ່ເຂົ້າກັນໄດ້

[hidden]ບໍ່ເຂົ້າກັນໄດ້ກັບ jQuery $(...).hide()ແລະ $(...).show()ວິທີການ. ດັ່ງນັ້ນ, ໃນປັດຈຸບັນພວກເຮົາບໍ່ໄດ້ຮັບຮອງໂດຍສະເພາະ [hidden]ກ່ຽວກັບເຕັກນິກອື່ນໆສໍາລັບການຄຸ້ມຄອງ displayອົງປະກອບ.

ເພື່ອພຽງແຕ່ສະຫຼັບການເບິ່ງເຫັນຂອງອົງປະກອບ, ຊຶ່ງຫມາຍຄວາມວ່າມັນ displayບໍ່ໄດ້ຖືກດັດແກ້ແລະອົງປະກອບຍັງສາມາດສົ່ງຜົນກະທົບຕໍ່ການໄຫຼເຂົ້າຂອງເອກະສານ, ໃຫ້ໃຊ້ ຊັ້ນ ແທນ.invisible .

ປິດເປີດໃໝ່

ວິທີການ

ຕົວແປ CSS

ໜ້າເລີ່ມຕົ້ນ

stack ຟອນເດີມ

ຫົວຂໍ້ແລະວັກ

ກົດລະບຽບແນວນອນ

ລາຍການ

ລະຫັດໃນແຖວ

ບລັອກລະຫັດ

ຕົວແປ

ການປ້ອນຂໍ້ມູນຂອງຜູ້ໃຊ້

ຜົນຜະລິດຕົວຢ່າງ

ຕາຕະລາງ

ແບບຟອມ

ຮອງຮັບການປ້ອນຂໍ້ມູນວັນທີ ແລະສີ

ຕົວຊີ້ໃສ່ປຸ່ມ

ອົງປະກອບອື່ນໆ

ທີ່ຢູ່

Blockquote

ອົງປະກອບໃນແຖວ

ສະຫຼຸບ

[hidden]ຄຸນລັກສະນະ HTML5

jQuery ບໍ່ເຂົ້າກັນໄດ້

`[hidden]`ຄຸນລັກສະນະ HTML5