ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ປິດເປີດໃໝ່

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

ໃນໜ້ານີ້

ວິທີການ

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

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

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

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

<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,
  // 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;

ໃຫ້ສັງເກດວ່າເນື່ອງຈາກວ່າ 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

ລາຍການ

ລາຍຊື່ທັງໝົດ— <ul>, <ol>, ແລະ <dl>— ມີການ margin-topລຶບອອກ ແລະ margin-bottom: 1rem. ລາຍຊື່ທີ່ຊ້ອນກັນບໍ່ມີ margin-bottom. ພວກເຮົາຍັງໄດ້ຣີເຊັດການ padding-leftເປີດ <ul>ແລະ <ol>ອົງປະກອບ.

  • ລາຍຊື່ທັງໝົດມີຂອບເທິງສຸດຂອງພວກມັນອອກ
  • ແລະຂອບລຸ່ມຂອງເຂົາເຈົ້າ normalized
  • ລາຍຊື່ທີ່ຊ້ອນກັນບໍ່ມີຂອບລຸ່ມ
    • ດ້ວຍວິທີນີ້, ພວກມັນມີລັກສະນະຫຼາຍກວ່າເກົ່າ
    • ໂດຍສະເພາະໃນເວລາທີ່ຕິດຕາມດ້ວຍລາຍການລາຍການຫຼາຍ
  • padding ຊ້າຍຍັງໄດ້ຮັບການປັບ
  1. ນີ້ແມ່ນລາຍການຄໍາສັ່ງ
  2. ມີ​ລາຍ​ການ​ລາຍ​ການ​ຈໍາ​ນວນ​ຫນຶ່ງ​
  3. ມັນມີລັກສະນະໂດຍລວມຄືກັນ
  4. ໃນ​ຖາ​ນະ​ເປັນ​ບັນ​ຊີ​ລາຍ​ການ unordered ຜ່ານ​ມາ​

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

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

ລະຫັດໃນແຖວ

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

ຕົວຢ່າງ, <section>ຄວນຖືກຫໍ່ເປັນແຖວ. 
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>

<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 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

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

ໃຊ້ຕົວ <kbd>ຊີ້ບອກການປ້ອນຂໍ້ມູນທີ່ຖືກປ້ອນຜ່ານແປ້ນພິມ.

ເພື່ອສະຫຼັບໄດເລກະທໍລີ, ພິມ cdຕາມດ້ວຍຊື່ຂອງໄດເລກະທໍລີ.
ເພື່ອແກ້ໄຂການຕັ້ງຄ່າ, ກົດ ctrl + , 
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>ແທັກ.

ຂໍ້​ຄວາມ​ນີ້​ແມ່ນ​ຫມາຍ​ຄວາມ​ວ່າ​ຈະ​ໄດ້​ຮັບ​ການ​ປະ​ຕິ​ບັດ​ເປັນ​ຕົວ​ຢ່າງ​ຜົນ​ຜະ​ລິດ​ຈາກ​ໂຄງ​ການ​ຄອມ​ພິວ​ເຕີ​. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

ຕາຕະລາງ

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

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

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

100

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

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

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

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

ປຸ່ມອົງປະກອບທີ່ບໍ່ແມ່ນປຸ່ມ 
<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>ກອບໄດ້ຮັບການຈັດຮູບແບບພື້ນຖານເພື່ອເຮັດໃຫ້ມັນໂດດເດັ່ນໃນບັນດາຂໍ້ຄວາມຫຍໍ້ຫນ້າ.

Nulla attr vitae elit libero, a pharetra augue.

ສະຫຼຸບ

ຄ່າເລີ່ມຕົ້ນ 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 .