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>ປະເພດທີ່ຕອບສະຫນອງໄດ້ງ່າຍໂດຍຜ່ານການສອບຖາມສື່ໃນຂະນະທີ່ເຄົາລົບຄວາມມັກຂອງຜູ້ໃຊ້ແລະຮັບປະກັນວິທີການທີ່ສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍຂຶ້ນ.
  • ນອກ <body>ຈາກນີ້ຍັງກໍານົດລະດັບໂລກ font-family, line-height, ແລະ text-align. ນີ້ແມ່ນການສືບທອດຕໍ່ມາໂດຍບາງອົງປະກອບແບບຟອມເພື່ອປ້ອງກັນຄວາມບໍ່ສອດຄ່ອງຂອງຕົວອັກສອນ.
  • ເພື່ອຄວາມປອດໄພ, <body>ມີການປະກາດ background-color, ເລີ່ມຕົ້ນເປັນ #fff.

stack ຟອນເດີມ

ຟອນເວັບເລີ່ມຕົ້ນ (Helvetica Neue, Helvetica, ແລະ Arial) ໄດ້ຖືກລຸດລົງໃນ Bootstrap 4 ແລະແທນທີ່ດ້ວຍ "ຟອນເດີມ" ສໍາລັບການສະແດງຂໍ້ຄວາມທີ່ດີທີ່ສຸດໃນທຸກອຸປະກອນ ແລະ OS. ອ່ານເພີ່ມເຕີມກ່ຽວກັບ stacks ຕົວອັກສອນພື້ນເມືອງໃນ ບົດຄວາມ 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;

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

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

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

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

ຮູບແບບຂໍ້ຄວາມລ່ວງໜ້າ

ອົງ ປະ <pre>ກອບຖືກຕັ້ງຄືນໃໝ່ເພື່ອເອົາມັນອອກ margin-topແລະໃຊ້ remຫົວໜ່ວຍສໍາລັບມັນ margin-bottom.

.ຕົວຢ່າງ-ອົງປະກອບ {
  ຂອບ-ລຸ່ມ: 1rem;
}

ຕາຕະລາງ

ຕາຕະລາງຖືກປັບເລັກນ້ອຍໃຫ້ເປັນຮູບແບບ <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

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

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 ໂດຍບັງເອີນ. ໃນຂະນະທີ່ [hidden]ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍ IE10, ການປະກາດທີ່ຊັດເຈນໃນ CSS ຂອງພວກເຮົາໄດ້ຮັບບັນຫານັ້ນ.

<input type="text" hidden>
jQuery ບໍ່ເຂົ້າກັນໄດ້

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

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