ใช้น้อยกับ Bootstrap

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

ทำไมน้อย?

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

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

LESS เป็นส่วนขยายของ 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 และสามารถเรียกได้ทุกที่

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

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

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

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

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

มิกซ์อินของ 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 ที่ดูทุกครั้ง

หากต้องการ คุณสามารถสลับการตั้งค่าในแอปสำหรับการลดขนาดอัตโนมัติและไดเร็กทอรีที่ไฟล์ที่คอมไพล์จะจบลง

สร้างด้วย LESS

ทำไมน้อย?

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

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

ตัวแปร

มิกซ์อิน

ปฏิบัติการ

ตัวแปร Bootstrap ตัวแปรLESS ค่าและแนวทางการใช้งาน

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

ระบบกริด

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

โต๊ะ

สีเทา

เน้นสี

ส่วนประกอบ

ปุ่ม

แบบฟอร์ม

แบบฟอร์มสถานะและการแจ้งเตือน

แถบนำทาง

ดรอปดาวน์

หน่วยฮีโร่

Bootstrap มิกซ์อิน

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

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

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

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

รวมมิกซ์อิน

สาธารณูปโภค

แบบฟอร์ม

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

ระบบกริด

คุณสมบัติ CSS3

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

รวบรวม Bootstrap ด้วย LESS

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

โหนดด้วย makefile

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

Javascript

แอพ Mac ที่ไม่เป็นทางการ

แอพ Mac เพิ่มเติม

กระทืบ

CodeKit

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