ປິດເປີດໃໝ່
Reboot, ການລວບລວມການປ່ຽນແປງ CSS ສະເພາະໃນໄຟລ໌ດຽວ, kickstart Bootstrap ເພື່ອໃຫ້ພື້ນຖານທີ່ສະຫງ່າງາມ, ສອດຄ່ອງ, ແລະງ່າຍດາຍທີ່ຈະສ້າງຂື້ນ.
ວິທີການ
Reboot ກໍ່ສ້າງຕາມ Normalize, ສະຫນອງອົງປະກອບ HTML ຈໍານວນຫຼາຍທີ່ມີຮູບແບບຄວາມຄິດເຫັນບາງຢ່າງໂດຍໃຊ້ຕົວເລືອກອົງປະກອບເທົ່ານັ້ນ. ຄໍເຕົ້າໄຂ່ທີ່ເພີ່ມເຕີມແມ່ນເຮັດກັບຫ້ອງຮຽນເທົ່ານັ້ນ. ຕົວຢ່າງ, ພວກເຮົາປິດເປີດບາງ <table>
ຮູບແບບສໍາລັບພື້ນຖານທີ່ງ່າຍກວ່າ ແລະຕໍ່ມາໃຫ້ .table
, .table-bordered
, ແລະອື່ນໆອີກ.
ນີ້ແມ່ນຂໍ້ແນະນຳ ແລະເຫດຜົນຂອງພວກເຮົາສຳລັບການເລືອກສິ່ງທີ່ຈະລົບລ້າງໃນ Reboot:
- ອັບເດດບາງຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບເພື່ອໃຊ້
rem
s ແທນem
s ສໍາລັບໄລຍະຫ່າງອົງປະກອບທີ່ສາມາດຂະຫຍາຍໄດ້. - ຫຼີກເວັ້ນ
margin-top
. ຂອບແນວຕັ້ງສາມາດຍຸບລົງໄດ້, ໃຫ້ຜົນໄດ້ຮັບທີ່ບໍ່ຄາດຄິດ. ສິ່ງທີ່ ສຳ ຄັນກວ່ານັ້ນ, ທິດທາງດຽວmargin
ແມ່ນຮູບແບບທາງຈິດທີ່ງ່າຍດາຍກວ່າ. - ສໍາລັບການຂະຫຍາຍຂະຫນາດຂອງອຸປະກອນໄດ້ງ່າຍຂຶ້ນ, ອົງປະກອບບລັອກຄວນໃຊ້
rem
s ສໍາລັບmargin
s. - ຮັກສາການປະກາດຂອງ
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 ຜ່ານມາ
ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່ງ່າຍກວ່າ, ລໍາດັບຊັ້ນທີ່ຊັດເຈນ, ແລະຊ່ອງຫວ່າງທີ່ດີກວ່າ, ລາຍຊື່ຄໍາອະທິບາຍໄດ້ປັບປຸງ margin
s. <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)
.
ການປ່ຽນແປງເຫຼົ່ານີ້, ແລະອື່ນໆອີກ, ແມ່ນສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້.
ຕົວຊີ້ໃສ່ປຸ່ມ
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>
.
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>
ກອບໄດ້ຮັບການຈັດຮູບແບບພື້ນຖານເພື່ອເຮັດໃຫ້ມັນໂດດເດັ່ນໃນບັນດາຂໍ້ຄວາມຫຍໍ້ຫນ້າ.
ສະຫຼຸບ
ຄ່າເລີ່ມຕົ້ນ 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
ແທນ .