ใช้น้อยกับ Bootstrap

ปรับแต่งและขยาย Bootstrap ด้วยLESSซึ่งเป็นตัวประมวลผลล่วงหน้าของ CSS เพื่อใช้ประโยชน์จากตัวแปร มิกซ์อิน และอื่นๆ ที่ใช้สร้าง CSS ของ Bootstrap

ทำไมน้อย?

Bootstrap สร้างขึ้นโดยเน้นที่ LESS ซึ่งเป็นภาษาสไตล์ชีตแบบไดนามิกที่สร้างโดยAlexis Sellier เพื่อนที่ดี ของ เรา มันทำให้การพัฒนา CSS ตามระบบเร็วขึ้น ง่ายขึ้น และสนุกมากขึ้น

รวมอะไรบ้าง?

LESS เป็นส่วนขยายของ CSS ประกอบด้วยตัวแปร มิกซ์อินสำหรับตัวอย่างโค้ดที่นำกลับมาใช้ใหม่ การดำเนินการสำหรับฟังก์ชันคณิตศาสตร์อย่างง่าย การซ้อน และแม้แต่ฟังก์ชันสี

เรียนรู้เพิ่มเติม

CSS น้อย

เยี่ยมชมเว็บไซต์อย่างเป็นทางการที่http://lesscss.org/เพื่อเรียนรู้เพิ่มเติม

ตัวแปร

การจัดการสีและค่าพิกเซลใน CSS อาจเป็นเรื่องยุ่งยาก ซึ่งมักจะเต็มไปด้วยการคัดลอกและวาง ไม่ใช่น้อยแต่กำหนดสีหรือค่าพิกเซลเป็นตัวแปรและเปลี่ยนครั้งเดียว

มิกซ์อิน

การประกาศรัศมีเส้นขอบทั้งสามนั้นที่คุณต้องทำใน CSS แบบปกติ? ตอนนี้มันเหลือบรรทัดเดียวด้วยความช่วยเหลือของมิกซ์อิน ตัวอย่างโค้ดที่คุณนำกลับมาใช้ใหม่ได้ทุกที่

ปฏิบัติการ

ทำให้กริดของคุณ เป็นผู้นำ และมีความยืดหยุ่นสูงสุดโดยการคำนวณทันทีด้วยการดำเนินการ คูณ หาร บวก และลบวิธีของคุณเพื่อ CSS สติ

นั่งร้านและลิงค์

@bodyBackground @white สีพื้นหลังของหน้า
@textColor @grayDark สีข้อความเริ่มต้นสำหรับทั้งเนื้อหา หัวเรื่อง และอื่นๆ
@linkColor #08c สีข้อความลิงก์เริ่มต้น
@linkColorHover darken(@linkColor, 15%) สีของข้อความลิงก์เริ่มต้นโฮเวอร์

ระบบกริด

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

วิชาการพิมพ์

@sansFontFamily "เฮลเวติกา นอยเอ", เฮลเวติกา, อาเรียล, ซานส์-เซริฟ
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, โมนาโก, "Courier New", monospace
@baseFontSize 13px ต้องเป็นพิกเซล
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ต้องเป็นพิกเซล
@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 #ffff

เน้นสี

@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

แถบนำทาง

@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

เกี่ยวกับมิกซ์อิน

ส่วนผสมพื้นฐาน

มิกซ์อินพื้นฐานนั้นเป็นการรวมหรือบางส่วนสำหรับตัวอย่าง CSS มันเขียนเหมือนกับคลาส CSS และสามารถเรียกได้ทุกที่

  1. . องค์ประกอบ{
  2. . clearfix ();
  3. }

พาราเมตริกมิกซ์อิน

Parametric mixin เหมือนกับมิกซ์อินพื้นฐาน แต่ยังยอมรับพารามิเตอร์ (ด้วยเหตุนี้ชื่อ) ด้วยค่าเริ่มต้นที่เลือกได้

  1. . องค์ประกอบ{
  2. . เส้นขอบ- รัศมี( 4px );
  3. }

เพิ่มของคุณเองได้อย่างง่ายดาย

มิกซ์อินของ Bootstrap เกือบทั้งหมดถูกเก็บไว้ใน mixins.less ซึ่งเป็นไฟล์ยูทิลิตี้ .less ที่ยอดเยี่ยม ซึ่งช่วยให้คุณใช้มิกซ์อินในไฟล์ .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 > #family > .sans-serif() ไม่มี ทำให้องค์ประกอบใช้กองฟอนต์ sans-serif
#font > #family > .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 ตั้งค่าตระกูลฟอนต์เป็นโมโนสเปซ และควบคุมขนาด น้ำหนัก และการนำหน้า

ระบบกริด

มิกซ์ซิน พารามิเตอร์ การใช้งาน
.container-fixed() ไม่มี สร้างคอนเทนเนอร์แนวนอนสำหรับเก็บเนื้อหาของคุณ
#grid > .core() @gridColumnWidth, @gridGutterWidth สร้างระบบตารางพิกเซล (คอนเทนเนอร์ แถว และคอลัมน์) ด้วยnคอลัมน์และรางน้ำกว้างx พิกเซล
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth สร้างระบบตารางเปอร์เซ็นต์ที่มีnคอลัมน์และรางน้ำกว้างx %
#grid > .input() @gridColumnWidth, @gridGutterWidth สร้างระบบกริดพิกเซลสำหรับinputองค์ประกอบ การบัญชีสำหรับการเติมและเส้นขอบ
.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สำหรับ full-width input)
.user-select() @select ควบคุมการเลือกเคอร์เซอร์ของข้อความบนหน้า
.backface-visibility() @visibility: visible ป้องกันการสั่นไหวของเนื้อหาเมื่อใช้การแปลง CSS 3D
.resizable() @direction: both ทำให้องค์ประกอบใด ๆ ปรับขนาดได้ทางด้านขวาและด้านล่าง
.content-columns() @columnCount, @columnGap: @gridGutterWidth ทำให้เนื้อหาขององค์ประกอบใด ๆ ใช้คอลัมน์ CSS3
.hyphens() @mode: auto ยัติภังค์ CSS3 เมื่อคุณต้องการ (รวมword-wrap: break-word)

พื้นหลังและการไล่ระดับสี

มิกซ์ซิน พารามิเตอร์ การใช้งาน
#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 สร้างการไล่ระดับสีพื้นหลังเรเดียลข้ามเบราว์เซอร์
#gradient > .striped() @color, @angle สร้างการไล่ระดับสีพื้นหลังลายทางข้ามเบราว์เซอร์
#gradientBar() @primaryColor, @secondaryColor ใช้สำหรับปุ่มเพื่อกำหนดการไล่ระดับสีและเส้นขอบที่เข้มขึ้นเล็กน้อย
หมายเหตุ:หากคุณกำลังส่งคำขอดึงไปยัง GitHub ด้วย CSS ที่แก้ไข คุณ ต้องคอมไพล์ CSS ใหม่โดยใช้วิธีการเหล่านี้

เครื่องมือสำหรับการคอมไพล์

โหนดด้วย makefile

ติดตั้งคอมไพเลอร์บรรทัดคำสั่ง LESS, JSHint, Recess และ uglify-js ทั่วโลกด้วย npm โดยรันคำสั่งต่อไปนี้:

$ npm install -g น้อยกว่า jshint recess uglify-js

เมื่อติดตั้งแล้ว ให้เรียกใช้makeจากรูทของไดเร็กทอรีบูตสแตรปของคุณ เท่านี้คุณก็พร้อมแล้ว

นอกจากนี้ หากคุณได้ ติดตั้ง watchrไว้ คุณอาจเรียกใช้make watchเพื่อให้ bootstrap สร้างใหม่โดยอัตโนมัติทุกครั้งที่คุณแก้ไขไฟล์ใน bootstrap lib (ไม่จำเป็น เพียงเป็นวิธีที่สะดวก)

บรรทัดคำสั่ง

ติดตั้งเครื่องมือบรรทัดคำสั่ง LESS ผ่าน Node และเรียกใช้คำสั่งต่อไปนี้:

$ lessc ./less/bootstrap.less > bootstrap.css

อย่าลืมรวม--compressไว้ในคำสั่งนั้นหากคุณพยายามบันทึกบางไบต์!

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 เป็นโปรแกรมแก้ไขและคอมไพเลอร์ LESS ที่ดูดีซึ่งสร้างจาก Adobe Air

CodeKit

CodeKit เป็นแอป Mac ที่รวบรวม LESS, SASS, Stylus และ CoffeeScript โดยคนคนเดียวกับแอป Mac ที่ไม่เป็นทางการ

ความเรียบง่าย

แอพ Mac, Linux และ PC สำหรับการลากและวางการรวบรวมไฟล์ LESS นอกจากนี้ซอร์สโค้ดยังอยู่บน GitHub