ໃຊ້ໜ້ອຍກວ່າກັບ Bootstrap

ປັບແຕ່ງແລະຂະຫຍາຍ Bootstrap ດ້ວຍ LESS , CSS preprocessor, ເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, mixins, ແລະຫຼາຍທີ່ໃຊ້ໃນການສ້າງ CSS ຂອງ Bootstrap.

ເປັນຫຍັງ LESS?

Bootstrap ແມ່ນເຮັດດ້ວຍ LESS ຫຼັກຂອງມັນ, ເປັນພາສາສະໄຕລ໌ຊີດແບບເຄື່ອນໄຫວທີ່ສ້າງໂດຍເພື່ອນທີ່ດີຂອງພວກເຮົາ, Alexis Sellier . ມັນເຮັດໃຫ້ການພັດທະນາ CSS ທີ່ອີງໃສ່ລະບົບໄວຂຶ້ນ, ງ່າຍຂຶ້ນ, ແລະມ່ວນຫຼາຍ.

ມີຫຍັງແດ່?

ໃນຖານະເປັນສ່ວນຂະຫຍາຍຂອງ CSS, LESS ປະກອບມີຕົວແປ, mixins ສໍາລັບ snippets ທີ່ໃຊ້ຄືນໃຫມ່ຂອງລະຫັດ, ການດໍາເນີນງານສໍາລັບຄະນິດສາດງ່າຍດາຍ, ຮັງ, ແລະແມ້ກະທັ້ງການທໍາງານຂອງສີ.

ສຶກສາເພີ່ມເຕີມ

CSS ໜ້ອຍລົງ

ເຂົ້າເບິ່ງເວັບໄຊທ໌ທາງການຢູ່ທີ່ http://lesscss.org/ ເພື່ອສຶກສາເພີ່ມເຕີມ.

ຕົວແປ

ການຈັດການສີແລະຄ່າ pixels ລວງໃນ CSS ສາມາດເປັນຄວາມເຈັບປວດເລັກນ້ອຍ, ປົກກະຕິແລ້ວເຕັມໄປດ້ວຍການຄັດລອກແລະວາງ. ບໍ່ແມ່ນແຕ່ໜ້ອຍລົງ—ກຳນົດສີ ຫຼືຄ່າ pixels ໃຫ້ເປັນຕົວແປ ແລະປ່ຽນພວກມັນຄັ້ງດຽວ.

ມິກຊິນ

ເຫຼົ່ານີ້ສາມໃບປະກາດຂອບເຂດຊາຍແດນທີ່ທ່ານຈໍາເປັນຕ້ອງເຮັດໃນ CSS ປົກກະຕິ? ດຽວນີ້ພວກມັນຕົກຢູ່ແຖວໜຶ່ງດ້ວຍການຊ່ວຍເຫຼືອຂອງ mixins, snippets ຂອງລະຫັດທີ່ເຈົ້າສາມາດໃຊ້ຄືນໄດ້ທຸກທີ່.

ການດໍາເນີນງານ

ເຮັດໃຫ້ຕາຂ່າຍໄຟຟ້າຂອງທ່ານ, ນໍາພາ, ແລະມີຄວາມຍືດຫຍຸ່ນຫຼາຍໂດຍການເຮັດຄະນິດສາດໃນທັນທີດ້ວຍການດໍາເນີນການ. ຄູນ, ແບ່ງ, ເພີ່ມ, ແລະລົບວິທີການຂອງທ່ານໄປສູ່ CSS sanity.

Scaffolding ແລະການເຊື່ອມຕໍ່

@bodyBackground @white ສີພື້ນຫຼັງຂອງໜ້າ
@textColor @grayDark ສີຂໍ້ຄວາມເລີ່ມຕົ້ນສໍາລັບເນື້ອໃນທັງຫມົດ, ສ່ວນຫົວ, ແລະອື່ນໆ
@linkColor #08c ສີຂໍ້ຄວາມລິ້ງເລີ່ມຕົ້ນ
@linkColorHover darken(@linkColor, 15%) ວາງສີຂໍ້ຄວາມລິ້ງເລີ່ມຕົ້ນ

ລະບົບຕາຂ່າຍ

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

ຕົວພິມ

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px ຕ້ອງເປັນ pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ຕ້ອງເປັນ pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

ຕາຕະລາງ

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

ສີເທົາ

@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

ອົງປະກອບ

ປຸ່ມ

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

ແບບຟອມ

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

ຮູບແບບລັດແລະການແຈ້ງເຕືອນ

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Navbar

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

ເລື່ອນລົງ

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

ໜ່ວຍພະເອກ

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

ກ່ຽວກັບ mixins

ປະສົມພື້ນຖານ

ການປະສົມຂັ້ນພື້ນຖານແມ່ນເປັນສ່ວນລວມ ຫຼືສ່ວນໜຶ່ງຂອງ CSS. ພວກມັນຖືກຂຽນຄືກັບຫ້ອງຮຽນ CSS ແລະສາມາດເອີ້ນໄດ້ທຸກບ່ອນ.

  1. . ອົງປະກອບ {
  2. . clearfix ();
  3. }

Parametric mixins

A parametric mixin ແມ່ນຄືກັນກັບ mixin ພື້ນຖານ, ແຕ່ມັນຍັງຍອມຮັບພາລາມິເຕີ (ເພາະສະນັ້ນຊື່) ທີ່ມີຄ່າເລີ່ມຕົ້ນທາງເລືອກ.

  1. . ອົງປະກອບ {
  2. . border - radius ( 4px );
  3. }

ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ເພີ່ມ​ຂອງ​ທ່ານ​ເອງ​

ເກືອບທັງໝົດຂອງ 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 @width ກໍານົດຄວາມສູງແລະຄວາມກວ້າງຢ່າງໄວວາໃນຫນຶ່ງແຖວ
.square() @size ສ້າງຂຶ້ນ .size()ເພື່ອກໍານົດຄວາມກວ້າງແລະຄວາມສູງເປັນຄ່າດຽວກັນ
.opacity() @opacity ກໍານົດ, ໃນຈໍານວນທັງຫມົດ, ອັດຕາສ່ວນຄວາມໂປ່ງໃສ (ເຊັ່ນ, "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() ບໍ່ມີ ສ້າງຕູ້ຄອນເທນເນີທີ່ມີສູນກາງແນວນອນສໍາລັບການຖືເນື້ອຫາຂອງທ່ານ
#grid > .core() @gridColumnWidth, @gridGutterWidth ສ້າງລະບົບຕາຂ່າຍ pixels (ບັນຈຸ, ແຖວ, ແລະຖັນ) ທີ່ມີ n ຖັນແລະ x pixel gutter ກວ້າງ
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth ສ້າງລະບົບຕາຂ່າຍໄຟຟ້າສ່ວນຮ້ອຍທີ່ມີ ຖັນ n ແລະ x % gutter ກວ້າງ
#grid > .input() @gridColumnWidth, @gridGutterWidth ສ້າງລະບົບຕາຂ່າຍໄຟຟ້າ pixels ສໍາລັບ inputອົງປະກອບ, ບັນຊີສໍາລັບ padding ແລະຊາຍແດນ
.makeColumn @columns: 1, @offset: 0 ປ່ຽນອັນໃດ divນຶ່ງເປັນຖັນຕາຂ່າຍທີ່ບໍ່ມີ .span*ຊັ້ນຮຽນ

CSS3 ຄຸນສົມບັດ

ມິກຊິນ ພາລາມິເຕີ ການ​ນໍາ​ໃຊ້
.border-radius() @radius ຮອບມຸມຂອງອົງປະກອບ. ສາມາດເປັນຄ່າດຽວ ຫຼືສີ່ຄ່າທີ່ແຍກອອກຈາກຊ່ອງຫວ່າງ
.box-shadow() @shadow ເພີ່ມເງົາລົງໃສ່ອົງປະກອບ
.transition() @transition ເພີ່ມເອັບເຟັກການປ່ຽນ CSS3 (ເຊັ່ນ: all .2s linear)
.rotate() @degrees ໝຸນອົງປະກອບ n ອົງສາ
.scale() @ratio ຂະຫຍາຍອົງປະກອບເປັນ n ເທົ່າຂະຫນາດຕົ້ນສະບັບຂອງມັນ
.translate() @x, @y ຍ້າຍອົງປະກອບຢູ່ໃນຍົນ x ແລະ y
.background-clip() @clip ຕັດພື້ນຫຼັງຂອງອົງປະກອບ (ທີ່ເປັນປະໂຫຍດສໍາລັບ border-radius)
.background-size() @size ຄວບຄຸມຂະໜາດຂອງພາບພື້ນຫຼັງຜ່ານ CSS3
.box-sizing() @boxmodel ປ່ຽນຮູບແບບກ່ອງສໍາລັບອົງປະກອບ (ເຊັ່ນ: border-boxສໍາລັບຄວາມກວ້າງເຕັມ input)
.user-select() @select ຄວບຄຸມການເລືອກເຄີເຊີຂອງຂໍ້ຄວາມໃນໜ້າໃດໜຶ່ງ
.backface-visibility() @visibility: visible ປ້ອງກັນການກະພິບຂອງເນື້ອຫາໃນເວລາທີ່ໃຊ້ CSS 3D transforms
.resizable() @direction: both ເຮັດໃຫ້ອົງປະກອບໃດນຶ່ງສາມາດປັບຂະໜາດໄດ້ຢູ່ເບື້ອງຂວາ ແລະລຸ່ມ
.content-columns() @columnCount, @columnGap: @gridGutterWidth ເຮັດໃຫ້ເນື້ອຫາຂອງອົງປະກອບໃດໆໃຊ້ຄໍລໍາ CSS3
.hyphens() @mode: auto ການຍັບຍັ້ງ CSS3 ເມື່ອທ່ານຕ້ອງການມັນ (ລວມທັງ word-wrap: break-word)

ພື້ນຫຼັງ ແລະ 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 ໃຊ້ສຳລັບປຸ່ມຕ່າງໆເພື່ອກຳນົດເສັ້ນສີ ແລະ ຂອບສີເຂັ້ມກວ່າເລັກນ້ອຍ
ຫມາຍເຫດ: ຖ້າທ່ານກໍາລັງສົ່ງຄໍາຮ້ອງຂໍການດຶງໄປຫາ GitHub ດ້ວຍ CSS ທີ່ຖືກດັດແປງ, ທ່ານ ຕ້ອງ ລວບລວມ CSS ຜ່ານວິທີການເຫຼົ່ານີ້.

ເຄື່ອງມືສໍາລັບການລວບລວມ

Node ກັບ makefile

ຕິດຕັ້ງຕົວລວບລວມຄໍາສັ່ງ LESS, JSHint, Recess, ແລະ uglify-js ທົ່ວໂລກດ້ວຍ npm ໂດຍການແລ່ນຄໍາສັ່ງຕໍ່ໄປນີ້:

$ npm ຕິດຕັ້ງ -g ຫນ້ອຍ jshint recess uglify-js

ເມື່ອຕິດຕັ້ງແລ້ວພຽງແຕ່ດໍາເນີນການ makeຈາກຮາກຂອງໄດເລກະທໍລີ bootstrap ຂອງທ່ານແລະທ່ານກໍາລັງຕັ້ງທັງຫມົດ.

ນອກຈາກນັ້ນ, ຖ້າທ່ານມີ watchr ຕິດຕັ້ງ, ທ່ານອາດຈະດໍາເນີນການ make watchໃຫ້ມີ bootstrap ອັດຕະໂນມັດໃຫມ່ທຸກຄັ້ງທີ່ທ່ານແກ້ໄຂໄຟລ໌ໃນ bootstrap lib (ອັນນີ້ບໍ່ຈໍາເປັນ, ພຽງແຕ່ເປັນວິທີທີ່ສະດວກ).

ເສັ້ນຄໍາສັ່ງ

ຕິດຕັ້ງເຄື່ອງມືບັນທັດຄໍາສັ່ງ LESS ຜ່ານ Node ແລະດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້:

$ lessc ./less/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 .