ໃຊ້ໜ້ອຍກວ່າກັບ Bootstrap
ປັບແຕ່ງແລະຂະຫຍາຍ Bootstrap ດ້ວຍ LESS , CSS preprocessor, ເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, mixins, ແລະຫຼາຍທີ່ໃຊ້ໃນການສ້າງ CSS ຂອງ Bootstrap.
ສ້າງດ້ວຍ LESS
ເປັນຫຍັງ LESS?
Bootstrap ແມ່ນເຮັດດ້ວຍ LESS ຢູ່ທີ່ຫຼັກຂອງມັນ, ເປັນພາສາສະໄຕລ໌ຊີດແບບເຄື່ອນໄຫວທີ່ສ້າງໂດຍເພື່ອນທີ່ດີຂອງພວກເຮົາ, Alexis Sellier . ມັນເຮັດໃຫ້ການພັດທະນາ CSS ທີ່ອີງໃສ່ລະບົບໄວຂຶ້ນ, ງ່າຍຂຶ້ນ, ແລະມ່ວນຫຼາຍ.
ມີຫຍັງແດ່?
ໃນຖານະເປັນສ່ວນຂະຫຍາຍຂອງ CSS, LESS ປະກອບມີຕົວແປ, mixins ສໍາລັບ snippets ທີ່ໃຊ້ຄືນໃຫມ່ຂອງລະຫັດ, ການດໍາເນີນງານສໍາລັບຄະນິດສາດງ່າຍດາຍ, ຮັງ, ແລະແມ້ກະທັ້ງການທໍາງານຂອງສີ.
ຕົວແປ
ການຈັດການສີແລະຄ່າ pixels ລວງໃນ CSS ສາມາດເປັນຄວາມເຈັບປວດເລັກນ້ອຍ, ປົກກະຕິແລ້ວເຕັມໄປດ້ວຍການຄັດລອກແລະວາງ. ບໍ່ແມ່ນແຕ່ໜ້ອຍລົງ—ກຳນົດສີ ຫຼືຄ່າ pixels ໃຫ້ເປັນຕົວແປ ແລະປ່ຽນພວກມັນຄັ້ງດຽວ.
ມິກຊິນ
ເຫຼົ່ານີ້ສາມໃບປະກາດຂອບເຂດຊາຍແດນທີ່ທ່ານຈໍາເປັນຕ້ອງເຮັດໃນ CSS ປົກກະຕິ? ດຽວນີ້ພວກມັນຕົກຢູ່ແຖວໜຶ່ງດ້ວຍການຊ່ວຍເຫຼືອຂອງ mixins, snippets ຂອງລະຫັດທີ່ເຈົ້າສາມາດໃຊ້ຄືນໄດ້ທຸກທີ່.
ການດໍາເນີນງານ
ເຮັດໃຫ້ຕາຂ່າຍໄຟຟ້າຂອງທ່ານ, ນໍາພາ, ແລະມີຄວາມຍືດຫຍຸ່ນຫຼາຍໂດຍການເຮັດຄະນິດສາດໃນທັນທີດ້ວຍການດໍາເນີນການ. ຫຼາຍ, ແບ່ງ, ເພີ່ມ, ແລະລົບວິທີການຂອງທ່ານໄປສູ່ CSS sanity.
ຕົວແປ Bootstrap ຫນ້ອຍຕົວແປ, ຄຸນຄ່າຂອງມັນ, ແລະຂໍ້ແນະນໍາການນໍາໃຊ້
ລິ້ງເຊື່ອມໂຍງ
@linkColor |
#08 ຄ | ສີຂໍ້ຄວາມລິ້ງເລີ່ມຕົ້ນ | |
@linkColorHover |
darken(@linkColor, 15%) |
ວາງສີຂໍ້ຄວາມລິ້ງເລີ່ມຕົ້ນ |
ລະບົບຕາຂ່າຍ
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
ຕົວພິມ
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
ສີເທົາ
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ເອີ | |
@white |
#fff |
ສີທີ່ເນັ້ນສຽງ
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
ອົງປະກອບ
ປຸ່ມ
@primaryButtonBackground |
@linkColor |
ແບບຟອມ
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
ຮູບແບບລັດແລະການແຈ້ງເຕືອນ
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
ກ່ຽວກັບ mixins
ປະສົມພື້ນຖານ
ການປະສົມຂັ້ນພື້ນຖານແມ່ນເປັນສ່ວນລວມ ຫຼືສ່ວນໜຶ່ງຂອງ CSS. ພວກມັນຖືກຂຽນຄືກັບຫ້ອງຮຽນ CSS ແລະສາມາດເອີ້ນໄດ້ທຸກບ່ອນ.
- . ອົງປະກອບ {
- . clearfix ();
- }
Parametric mixins
A parametric mixin ແມ່ນຄືກັນກັບ mixin ພື້ນຖານ, ແຕ່ມັນຍັງຍອມຮັບພາລາມິເຕີ (ເພາະສະນັ້ນຊື່) ທີ່ມີຄ່າເລີ່ມຕົ້ນທາງເລືອກ.
- . ອົງປະກອບ {
- . border - radius ( 4px );
- }
ໄດ້ຢ່າງງ່າຍດາຍເພີ່ມຂອງທ່ານເອງ
ເກືອບທັງໝົດຂອງ mixins ຂອງ Bootstrap ຖືກເກັບໄວ້ໃນ mixins.less, ເປັນໄຟລ໌ .less ທີ່ເປັນປະໂຫຍດອັນດີເລີດທີ່ຊ່ວຍໃຫ້ທ່ານໃຊ້ mixin ໃນໄຟລ໌ .less ໃດໆໃນຊຸດເຄື່ອງມື.
ດັ່ງນັ້ນ, ສືບຕໍ່ເດີນຫນ້າແລະນໍາໃຊ້ສິ່ງທີ່ມີຢູ່ແລ້ວຫຼືມີຄວາມຮູ້ສຶກບໍ່ເສຍຄ່າເພື່ອເພີ່ມຂອງຕົນເອງຕາມທີ່ທ່ານຕ້ອງການ.
ລວມເອົາເຄື່ອງປະສົມ
ອຸປະໂພກ
| ມິກຊິນ | ພາລາມິເຕີ | ການນໍາໃຊ້ |
|---|---|---|
.clearfix() |
ບໍ່ມີ | ເພີ່ມໃສ່ພໍ່ແມ່ເພື່ອລຶບລ້າງການລອຍຢູ່ພາຍໃນ |
.tab-focus() |
ບໍ່ມີ | ນຳໃຊ້ຮູບແບບຈຸດສຸມຂອງ Webkit ແລະໂຄງຮ່າງຂອງ Firefox ຮອບ |
.center-block() |
ບໍ່ມີ | ອັດໂນມັດຈັດວາງອົງປະກອບລະດັບບລັອກໂດຍໃຊ້margin: auto |
.ie7-inline-block() |
ບໍ່ມີ | ໃຊ້ນອກເຫນືອໄປຈາກປົກກະຕິ display: inline-blockເພື່ອໄດ້ຮັບການສະຫນັບສະຫນູນ IE7 |
.size() |
@height: 5px, @width: 5px |
ກໍານົດຄວາມສູງແລະຄວາມກວ້າງຢ່າງໄວວາໃນຫນຶ່ງແຖວ |
.square() |
@size: 5px |
ສ້າງຂຶ້ນ .size()ເພື່ອກໍານົດຄວາມກວ້າງແລະຄວາມສູງເປັນຄ່າດຽວກັນ |
.opacity() |
@opacity: 100 |
ກໍານົດ, ໃນຈໍານວນທັງຫມົດ, ອັດຕາສ່ວນຄວາມໂປ່ງໃສ (ເຊັ່ນ, "50" ຫຼື "75") |
ແບບຟອມ
| ມິກຊິນ | ພາລາມິເຕີ | ການນໍາໃຊ້ |
|---|---|---|
.placeholder() |
@color: @placeholderText |
ກໍານົດ placeholderສີຂໍ້ຄວາມສໍາລັບການປ້ອນຂໍ້ມູນ |
ຕົວພິມ
| ມິກຊິນ | ພາລາມິເຕີ | ການນໍາໃຊ້ |
|---|---|---|
#font > #family > .serif() |
ບໍ່ມີ | ເຮັດໃຫ້ອົງປະກອບໃຊ້ serif font stack |
#font > #family > .sans-serif() |
ບໍ່ມີ | ສ້າງອົງປະກອບໃຫ້ໃຊ້ sans-serif font stack |
#font > #family > .monospace() |
ບໍ່ມີ | ເຮັດໃຫ້ອົງປະກອບໃຊ້ stack font monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ໄດ້ຢ່າງງ່າຍດາຍກໍານົດຂະຫນາດຕົວອັກສອນ, ນ້ໍາຫນັກ, ແລະນໍາພາ |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ຕັ້ງຄອບຄົວຕົວອັກສອນເປັນ serif, ແລະຄວບຄຸມຂະຫນາດ, ນ້ໍາຫນັກ, ແລະຊັ້ນນໍາ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ຕັ້ງຄອບຄົວຕົວອັກສອນເປັນ sans-serif, ແລະຄວບຄຸມຂະຫນາດ, ນ້ໍາຫນັກ, ແລະຊັ້ນນໍາ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ຕັ້ງຄອບຄົວຕົວອັກສອນເປັນ monospace, ແລະຄວບຄຸມຂະຫນາດ, ນ້ໍາຫນັກ, ແລະຊັ້ນນໍາ |
ລະບົບຕາຂ່າຍ
| ມິກຊິນ | ພາລາມິເຕີ | ການນໍາໃຊ້ |
|---|---|---|
.container-fixed() |
ບໍ່ມີ | ສະຫນອງຄວາມກວ້າງຄົງທີ່ (ທີ່ກໍານົດໄວ້ກັບ @siteWidth) container ສໍາລັບຖືເນື້ອຫາຂອງທ່ານ |
.columns() |
@columns: 1 |
ສ້າງຖັນຕາໜ່າງທີ່ຂະຫຍາຍຖັນໃດນຶ່ງ (ຄ່າເລີ່ມຕົ້ນເປັນ 1 ຖັນ) |
.offset() |
@columns: 1 |
ຊົດເຊີຍຖັນຕາໜ່າງທີ່ມີຂອບຊ້າຍທີ່ຂະຫຍາຍຖັນໃດນຶ່ງ |
.gridColumn() |
ບໍ່ມີ | ເຮັດໃຫ້ອົງປະກອບລອຍຂຶ້ນຄືກັບຖັນຕາຂ່າຍ |
CSS3 ຄຸນສົມບັດ
| ມິກຊິນ | ພາລາມິເຕີ | ການນໍາໃຊ້ |
|---|---|---|
.border-radius() |
@radius: 5px |
ຮອບມຸມຂອງອົງປະກອບ. ສາມາດເປັນຄ່າດຽວ ຫຼືສີ່ຄ່າທີ່ແຍກອອກຈາກຊ່ອງຫວ່າງ |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
ເພີ່ມເງົາລົງໃສ່ອົງປະກອບ |
.transition() |
@transition |
ເພີ່ມເອັບເຟັກການປ່ຽນ CSS3 (ເຊັ່ນ: all .2s linear) |
.rotate() |
@degrees |
ໝຸນອົງປະກອບ n ອົງສາ |
.scale() |
@ratio |
ຂະຫຍາຍອົງປະກອບເປັນ n ເທົ່າຂອງຂະຫນາດຕົ້ນສະບັບ |
.translate() |
@x: 0, @y: 0 |
ຍ້າຍອົງປະກອບຢູ່ໃນຍົນ x ແລະ y |
.background-clip() |
@clip |
ຕັດພື້ນຫຼັງຂອງອົງປະກອບ (ທີ່ເປັນປະໂຫຍດສໍາລັບ border-radius) |
.background-size() |
@size |
ຄວບຄຸມຂະໜາດຂອງພາບພື້ນຫຼັງຜ່ານ CSS3 |
.box-sizing() |
@boxmodel |
ປ່ຽນຮູບແບບກ່ອງສໍາລັບອົງປະກອບ (ເຊັ່ນ: border-boxສໍາລັບຄວາມກວ້າງເຕັມ input) |
.user-select() |
@select |
ຄວບຄຸມການເລືອກເຄີເຊີຂອງຂໍ້ຄວາມໃນໜ້າໃດໜຶ່ງ |
.resizable() |
@direction: both |
ເຮັດໃຫ້ອົງປະກອບໃດນຶ່ງສາມາດປັບຂະໜາດໄດ້ຢູ່ເບື້ອງຂວາ ແລະລຸ່ມ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ເຮັດໃຫ້ເນື້ອຫາຂອງອົງປະກອບໃດໆໃຊ້ຄໍລໍາ CSS3 |
ພື້ນຫຼັງ ແລະ gradients
| ມິກຊິນ | ພາລາມິເຕີ | ການນໍາໃຊ້ |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
ໃຫ້ອົງປະກອບເປັນສີພື້ນຫຼັງທີ່ໂປ່ງໃສ |
.#translucent > .border() |
@color: @white, @alpha: 1 |
ໃຫ້ອົງປະກອບເປັນສີຂອບໂປ່ງໃສ |
.#gradient > .vertical() |
@startColor, @endColor |
ສ້າງສີພື້ນຫຼັງແນວຕັ້ງຂ້າມບຣາວເຊີ |
.#gradient > .horizontal() |
@startColor, @endColor |
ສ້າງສີພື້ນຫຼັງລວງນອນຂ້າມຕົວທ່ອງເວັບ |
.#gradient > .directional() |
@startColor, @endColor, @deg |
ສ້າງສີພື້ນຫຼັງທິດທາງຂ້າມຕົວທ່ອງເວັບ |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
ສ້າງສີພື້ນຫຼັງສາມສີຂອງຕົວທ່ອງເວັບຂ້າມ |
.#gradient > .radial() |
@innerColor, @outerColor |
ສ້າງສີພື້ນຫຼັງ radial ຂ້າມ browser |
.#gradient > .striped() |
@color, @angle |
ສ້າງສີພື້ນຫຼັງແບບສີຂ້າມຕົວທ່ອງເວັບ |
.#gradientBar() |
@primaryColor, @secondaryColor |
ໃຊ້ສຳລັບປຸ່ມເພື່ອກຳນົດເສັ້ນສີ ແລະ ຂອບສີເຂັ້ມກວ່າເລັກນ້ອຍ |
ການລວບລວມ Bootstrap ດ້ວຍ LESS
ເຄື່ອງມືສໍາລັບການລວບລວມ
Node ກັບ makefile
ຕິດຕັ້ງຕົວ compiler ເສັ້ນຄໍາສັ່ງ LESS ດ້ວຍ npm ໂດຍການແລ່ນຄໍາສັ່ງຕໍ່ໄປນີ້:
$ npm ຕິດຕັ້ງຫນ້ອຍລົງ
ເມື່ອຕິດຕັ້ງແລ້ວພຽງແຕ່ດໍາເນີນການ makeຈາກຮາກຂອງໄດເລກະທໍລີ bootstrap ຂອງທ່ານແລະທ່ານກໍາລັງຕັ້ງທັງຫມົດ.
ນອກຈາກນັ້ນ, ຖ້າທ່ານມີ watchr ຕິດຕັ້ງ, ທ່ານອາດຈະດໍາເນີນການ make watchໃຫ້ມີ bootstrap ອັດຕະໂນມັດໃຫມ່ທຸກຄັ້ງທີ່ທ່ານແກ້ໄຂໄຟລ໌ໃນ bootstrap lib (ອັນນີ້ບໍ່ຈໍາເປັນ, ພຽງແຕ່ເປັນວິທີທີ່ສະດວກ).
ເສັ້ນຄໍາສັ່ງ
ຕິດຕັ້ງເຄື່ອງມືບັນທັດຄໍາສັ່ງ LESS ຜ່ານ Node ແລະດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້:
$ lessc ./lib/bootstrap.less > bootstrap.css
ໃຫ້ແນ່ໃຈວ່າຈະລວມ --compressຢູ່ໃນຄໍາສັ່ງນັ້ນຖ້າທ່ານພະຍາຍາມປະຫຍັດບາງ bytes!
Javascript
ດາວໂຫລດ Less.js ຫຼ້າສຸດ ແລະລວມເອົາເສັ້ນທາງໄປຫາມັນ (ແລະ Bootstrap) ໃນ <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
ເພື່ອລວບລວມໄຟລ໌ .less ຄືນໃໝ່, ພຽງແຕ່ບັນທຶກພວກມັນ ແລະໂຫຼດໜ້າຂອງທ່ານຄືນໃໝ່. Less.js ລວບລວມພວກມັນແລະເກັບຮັກສາພວກມັນໄວ້ໃນບ່ອນເກັບຂໍ້ມູນທ້ອງຖິ່ນ.
ແອັບ Mac ທີ່ບໍ່ເປັນທາງການ
ແອັບ Mac ທີ່ບໍ່ເປັນທາງການຈະ ເບິ່ງໄດເຣັກທໍຣີຂອງໄຟລ໌ .less ແລະລວບລວມລະຫັດໄປຍັງໄຟລ໌ທ້ອງຖິ່ນຫຼັງຈາກບັນທຶກໄຟລ໌ .less ທີ່ເບິ່ງແລ້ວທຸກຄັ້ງ.
ຖ້າທ່ານຕ້ອງການ, ທ່ານສາມາດສະຫຼັບການຕັ້ງຄ່າໃນແອັບຯສໍາລັບການຫຍໍ້ອັດຕະໂນມັດແລະໄດເລກະທໍລີໃດທີ່ໄຟລ໌ລວບລວມໄດ້ສິ້ນສຸດລົງ.
ແອັບ Mac ເພີ່ມເຕີມ
Crunch
Crunch ເປັນບັນນາທິການ ແລະຄອມພີວເຊີທີ່ເບິ່ງໜ້ອຍທີ່ສຸດທີ່ສ້າງຂຶ້ນໃນ Adobe Air.
CodeKit
ສ້າງໂດຍຜູ້ຊາຍດຽວກັນກັບແອັບຯ Mac ທີ່ບໍ່ເປັນທາງການ, CodeKit ເປັນແອັບຯ Mac ທີ່ລວບລວມຂໍ້ມູນ LESS, SASS, Stylus ແລະ CoffeeScript.
ບໍ່ງ່າຍດາຍ
ແອັບ Mac, Linux ແລະ PC ສຳລັບການລາກ ແລະວາງການລວບລວມໄຟລ໌ໜ້ອຍລົງ. ນອກຈາກນັ້ນ, ລະຫັດແຫຼ່ງແມ່ນຢູ່ໃນ GitHub .