Source

ປິດເປີດໃໝ່

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

ອັນນີ້ 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ໃນ pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ຢູ່
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ໃນ pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

ລາຍລະອຽດ: ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

ຮູບແບບຂໍ້ຄວາມກ່ອນ

ອົງ ປະ <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 ຖືກດັດແປງພຽງແຕ່ສາມາດປັບຂະຫນາດໄດ້ຕາມແນວຕັ້ງຍ້ອນວ່າການປັບຂະຫນາດຕາມແນວນອນມັກຈະ "ແຕກ" ຮູບແບບຫນ້າ.

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

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

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

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

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

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

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

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

ຕົວຢ່າງເວລາ

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

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

ທີ່ຢູ່

ອົງ ປະ <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ສໍາລັບບາງສິ່ງບາງຢ່າງທີ່ສອດຄ່ອງກັບອົງປະກອບອື່ນໆ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

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

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

ອົງ ປະ <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ບໍ່ໄດ້ຖືກດັດແກ້ແລະອົງປະກອບຍັງສາມາດສົ່ງຜົນກະທົບຕໍ່ການໄຫຼເຂົ້າຂອງເອກະສານ, ໃຫ້ໃຊ້ ຊັ້ນ ແທນ.invisible .