Sử dụng LESS với Bootstrap

Tùy chỉnh và mở rộng Bootstrap với LESS , một bộ tiền xử lý CSS, để tận dụng các biến, mixin và nhiều thứ khác được sử dụng để xây dựng CSS của Bootstrap.

Tại sao lại ÍT?

Bootstrap được tạo ra với LESS làm cốt lõi của nó, một ngôn ngữ biểu định kiểu động được tạo ra bởi người bạn tốt của chúng tôi, Alexis Sellier . Nó giúp phát triển CSS dựa trên hệ thống nhanh hơn, dễ dàng hơn và thú vị hơn.

Bao gồm những gì?

Là một phần mở rộng của CSS, LESS bao gồm các biến, mixin cho các đoạn mã có thể tái sử dụng, các phép toán cho phép toán đơn giản, lồng và thậm chí cả các hàm màu.

Tìm hiểu thêm

Truy cập trang web chính thức tại http://lesscss.org/ để tìm hiểu thêm.

Biến

Việc quản lý màu sắc và giá trị pixel trong CSS có thể hơi khó khăn, thường chỉ cần sao chép và dán. Tuy nhiên, không phải với LESS — chỉ định màu sắc hoặc giá trị pixel làm biến và thay đổi chúng một lần.

Mixin

Ba khai báo bán kính đường viền mà bạn cần phải thực hiện trong CSS thông thường? Giờ đây, chúng thành một dòng với sự trợ giúp của các mixin, các đoạn mã bạn có thể sử dụng lại ở bất cứ đâu.

Hoạt động

Làm cho lưới của bạn, hàng đầu và siêu linh hoạt hơn bằng cách thực hiện phép toán một cách nhanh chóng với các phép toán. Nhân, chia, cộng và trừ theo cách của bạn cho sự tỉnh táo của CSS.

Giàn giáo và liên kết

`@bodyBackground`	`@white`	Màu nền của trang
`@textColor`	`@grayDark`	Màu văn bản mặc định cho toàn bộ nội dung, tiêu đề, v.v.
`@linkColor`	`#08c`	Màu văn bản liên kết mặc định
`@linkColorHover`	`darken(@linkColor, 15%)`	Màu di chuột qua văn bản liên kết mặc định

Hệ thống lưới điện

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Kiểu chữ

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Chuyển phát nhanh mới", monospace
`@baseFontSize`	13px	Phải là pixel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Phải là pixel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Những cái bàn

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

Màu xám

`@black`	# 000
`@grayDarker`	# 222
`@grayDark`	# 333
`@gray`	# 555
`@grayLight`	# 999
`@grayLighter`	#eee
`@white`	#fff

Màu nhấn

`@blue`	# 049cdb
`@green`	# 46a546
`@red`	# 9d261d
`@yellow`	# ffc40d
`@orange`	# f89406
`@pink`	# c3325f
`@purple`	# 7a43b6

Các thành phần

nút

`@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`

Các hình thức

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

Trạng thái biểu mẫu và cảnh báo

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

Thanh điều hướng

`@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`

Trình đơn thả xuống

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

Đơn vị anh hùng

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Giới thiệu về mixin

Mixin cơ bản

Một mixin cơ bản về cơ bản là bao gồm hoặc một phần cho một đoạn CSS. Chúng được viết giống như một lớp CSS và có thể được gọi ở bất kỳ đâu.

. phần tử {
  . clearfix ();
}

Mixin tham số

Một mixin tham số giống như một mixin cơ bản, nhưng nó cũng chấp nhận các tham số (do đó có tên) với các giá trị mặc định tùy chọn.

. phần tử {
  . viền - bán kính ( 4px );
}

Dễ dàng thêm của riêng bạn

Gần như tất cả các mixin của Bootstrap đều được lưu trữ trong mixins.less, một tệp .less tiện ích tuyệt vời cho phép bạn sử dụng mixin trong bất kỳ tệp .less nào trong bộ công cụ.

Vì vậy, hãy tiếp tục và sử dụng những cái hiện có hoặc thoải mái thêm cái của riêng bạn khi bạn cần.

Mixin bao gồm

Tiện ích

Mixin	Thông số	Cách sử dụng
`.clearfix()`	không ai	Thêm vào bất kỳ phụ huynh nào để xóa các phao bên trong
`.tab-focus()`	không ai	Áp dụng kiểu tiêu điểm Webkit và làm tròn đường viền Firefox
`.center-block()`	không ai	Tự động căn giữa một phần tử cấp khối bằng cách sử dụng`margin: auto`
`.ie7-inline-block()`	không ai	Sử dụng ngoài việc thông thường `display: inline-block`để được hỗ trợ IE7
`.size()`	`@height @width`	Đặt nhanh chiều cao và chiều rộng trên một dòng
`.square()`	`@size`	Xây dựng trên `.size()`để đặt chiều rộng và chiều cao bằng cùng một giá trị
`.opacity()`	`@opacity`	Đặt phần trăm độ mờ theo số nguyên (ví dụ: "50" hoặc "75")

Các hình thức

Mixin	Thông số	Cách sử dụng
`.placeholder()`	`@color: @placeholderText`	Đặt `placeholder`màu văn bản cho đầu vào

Kiểu chữ

Mixin	Thông số	Cách sử dụng
`#font > #family > .serif()`	không ai	Tạo một phần tử bằng cách sử dụng ngăn xếp phông chữ serif
`#font > #family > .sans-serif()`	không ai	Tạo một phần tử bằng cách sử dụng ngăn xếp phông chữ sans-serif
`#font > #family > .monospace()`	không ai	Tạo một phần tử bằng cách sử dụng ngăn xếp phông chữ monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Dễ dàng đặt kích thước, trọng lượng và hàng đầu phông chữ
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Đặt họ phông chữ thành serif và kiểm soát kích thước, trọng lượng và hàng đầu
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Đặt họ phông chữ thành sans-serif và kiểm soát kích thước, trọng lượng và hàng đầu
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Đặt họ phông chữ thành monospace và kiểm soát kích thước, trọng lượng và hàng đầu

Hệ thống lưới điện

Mixin	Thông số	Cách sử dụng
`.container-fixed()`	không ai	Tạo một vùng chứa căn giữa theo chiều ngang để chứa nội dung của bạn
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Tạo hệ thống lưới pixel (vùng chứa, hàng và cột) với n cột và rãnh x pixel rộng
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Tạo hệ thống lưới sơ đồ với n cột và rãnh x % rộng
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Tạo hệ thống lưới pixel cho `input`các phần tử, tính đến phần đệm và đường viền
`.makeColumn`	`@columns: 1, @offset: 0`	Biến bất kỳ `div`thành cột lưới mà không có các `.span*`lớp

Thuộc tính CSS3

Mixin	Thông số	Cách sử dụng
`.border-radius()`	`@radius`	Làm tròn các góc của một phần tử. Có thể là một giá trị duy nhất hoặc bốn giá trị được phân tách bằng dấu cách
`.box-shadow()`	`@shadow`	Thêm bóng đổ vào một phần tử
`.transition()`	`@transition`	Thêm hiệu ứng chuyển tiếp CSS3 (ví dụ `all .2s linear`:)
`.rotate()`	`@degrees`	Xoay một phần tử n độ
`.scale()`	`@ratio`	Chia tỷ lệ một phần tử thành n lần kích thước ban đầu của nó
`.translate()`	`@x, @y`	Di chuyển một phần tử trên mặt phẳng x và y
`.background-clip()`	`@clip`	Cắt nền của một phần tử (hữu ích cho `border-radius`)
`.background-size()`	`@size`	Kiểm soát kích thước của hình nền thông qua CSS3
`.box-sizing()`	`@boxmodel`	Thay đổi mô hình hộp cho một phần tử (ví dụ: `border-box`cho toàn chiều rộng `input`)
`.user-select()`	`@select`	Kiểm soát lựa chọn con trỏ của văn bản trên một trang
`.backface-visibility()`	`@visibility: visible`	Ngăn nội dung nhấp nháy khi sử dụng các chuyển đổi 3D CSS
`.resizable()`	`@direction: both`	Làm cho bất kỳ phần tử nào có thể thay đổi kích thước ở bên phải và dưới cùng
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Làm cho nội dung của bất kỳ phần tử nào sử dụng các cột CSS3

Nền và độ dốc

Mixin	Thông số	Cách sử dụng
`#translucent > .background()`	`@color: @white, @alpha: 1`	Tạo màu nền mờ cho một phần tử
`#translucent > .border()`	`@color: @white, @alpha: 1`	Cung cấp cho một phần tử màu đường viền mờ
`#gradient > .vertical()`	`@startColor, @endColor`	Tạo gradient nền dọc trên nhiều trình duyệt
`#gradient > .horizontal()`	`@startColor, @endColor`	Tạo gradient nền ngang trên nhiều trình duyệt
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Tạo gradient nền định hướng trên nhiều trình duyệt
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Tạo gradient nền ba màu trên nhiều trình duyệt
`#gradient > .radial()`	`@innerColor, @outerColor`	Tạo gradient nền xuyên tâm trên nhiều trình duyệt
`#gradient > .striped()`	`@color, @angle`	Tạo gradient nền sọc trên nhiều trình duyệt
`#gradientBar()`	`@primaryColor, @secondaryColor`	Được sử dụng cho các nút để chỉ định một đường viền gradient và tối hơn một chút

Lưu ý: Nếu bạn đang gửi yêu cầu kéo tới GitHub với CSS đã sửa đổi, bạn phải biên dịch lại CSS thông qua bất kỳ phương pháp nào trong số này.

Công cụ để biên dịch

Nút với makefile

Cài đặt trình biên dịch dòng lệnh LESS và uglify-js trên toàn cầu với npm bằng cách chạy lệnh sau:

$ npm install -g less uglify-js

Sau khi cài đặt, chỉ cần chạy maketừ thư mục gốc của thư mục bootstrap của bạn và bạn đã hoàn tất.

Ngoài ra, nếu bạn đã cài đặt watchr , bạn có thể chạy make watchđể bootstrap tự động xây dựng lại mỗi khi bạn chỉnh sửa tệp trong bootstrap lib (điều này không bắt buộc, chỉ là một phương pháp tiện lợi).

Dòng lệnh

Cài đặt công cụ dòng lệnh LESS qua Node và chạy lệnh sau:

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

Hãy chắc chắn bao gồm --compresstrong lệnh đó nếu bạn đang cố gắng tiết kiệm một số byte!

Javascript

Tải xuống Less.js mới nhất và bao gồm đường dẫn đến nó (và Bootstrap) trong <head>.

<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>

Để biên dịch lại các tệp .less, chỉ cần lưu chúng và tải lại trang của bạn. Less.js biên dịch chúng và lưu trữ trong bộ nhớ cục bộ.

Ứng dụng Mac không chính thức

Ứng dụng Mac không chính thức xem thư mục của các tệp .less và biên dịch mã thành các tệp cục bộ sau mỗi lần lưu tệp .less đã xem.

Nếu muốn, bạn có thể chuyển đổi các tùy chọn trong ứng dụng để thu nhỏ tự động và thư mục nào mà các tệp đã biên dịch kết thúc.

Được xây dựng với LESS

Tại sao lại ÍT?

Bao gồm những gì?

Tìm hiểu thêm

Biến

Mixin

Hoạt động

Biến Bootstrap Các biến ÍT, giá trị của chúng và hướng dẫn sử dụng

Giàn giáo và liên kết

Hệ thống lưới điện

Kiểu chữ

Những cái bàn

Màu xám

Màu nhấn

Các thành phần

nút

Các hình thức

Trạng thái biểu mẫu và cảnh báo

Thanh điều hướng

Trình đơn thả xuống

Đơn vị anh hùng

Bootstrap mixin

Giới thiệu về mixin

Mixin cơ bản

Mixin tham số

Dễ dàng thêm của riêng bạn

Mixin bao gồm

Tiện ích

Các hình thức

Kiểu chữ

Hệ thống lưới điện

Thuộc tính CSS3

Nền và độ dốc

Biên dịch Bootstrap với LESS

Công cụ để biên dịch

Nút với makefile

Dòng lệnh

Javascript

Ứng dụng Mac không chính thức

Các ứng dụng Mac khác

Crunch

CodeKit

Đơn giản