ປິດເປີດໃໝ່

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 ຊ້າຍຍັງໄດ້ຮັບການປັບ

ນີ້ແມ່ນລາຍການຄໍາສັ່ງ
ມີລາຍການລາຍການຈໍານວນຫນຶ່ງ
ມັນມີລັກສະນະໂດຍລວມຄືກັນ
ໃນຖານະເປັນບັນຊີລາຍການ 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).

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

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

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

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

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

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

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

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

ຕົວຢ່າງເວລາ

ຕົວຢ່າງຜົນຜະລິດ 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ແທນ .