Χρήση LESS με το Bootstrap

Προσαρμόστε και επεκτείνετε το Bootstrap με το LESS , έναν προεπεξεργαστή CSS, για να επωφεληθείτε από τις μεταβλητές, τα mixins και άλλα που χρησιμοποιούνται για τη δημιουργία του CSS του Bootstrap.

Γιατί ΛΙΓΟΤΕΡΟ;

Το Bootstrap είναι κατασκευασμένο με LESS στον πυρήνα του, μια δυναμική γλώσσα φύλλου στυλ που δημιουργήθηκε από τον καλό μας φίλο, Alexis Sellier . Κάνει την ανάπτυξη CSS που βασίζεται σε συστήματα ταχύτερη, ευκολότερη και πιο διασκεδαστική.

Τι περιλαμβάνεται;

Ως επέκταση του CSS, το LESS περιλαμβάνει μεταβλητές, mixins για επαναχρησιμοποιήσιμα αποσπάσματα κώδικα, λειτουργίες για απλά μαθηματικά, ένθεση, ακόμη και συναρτήσεις χρώματος.

Μάθε περισσότερα

Επισκεφτείτε τον επίσημο ιστότοπο στη διεύθυνση http://lesscss.org/ για να μάθετε περισσότερα.

Μεταβλητές

Η διαχείριση των χρωμάτων και των τιμών των pixel στο CSS μπορεί να είναι λίγο επίπονη, συνήθως γεμάτη αντιγραφή και επικόλληση. Όχι όμως με LESS—αντιστοιχίστε χρώματα ή τιμές pixel ως μεταβλητές και αλλάξτε τα μία φορά.

Μίξεις

Αυτές οι τρεις δηλώσεις ακτίνας συνόρων πρέπει να κάνετε στο κανονικό CSS; Τώρα έχουν φτάσει σε μία γραμμή με τη βοήθεια mixins, αποσπάσματα κώδικα που μπορείτε να χρησιμοποιήσετε ξανά οπουδήποτε.

Λειτουργίες

Κάντε το πλέγμα σας, κορυφαίο και πιο σούπερ ευέλικτο κάνοντας τα μαθηματικά εν κινήσει με τις πράξεις. Πολλαπλασιάστε, διαιρέστε, προσθέστε και αφαιρέστε το δρόμο σας προς τη λογική CSS.

Σκαλωσιές και σύνδεσμοι

`@bodyBackground`	`@white`	Χρώμα φόντου σελίδας
`@textColor`	`@grayDark`	Προεπιλεγμένο χρώμα κειμένου για ολόκληρο το σώμα, επικεφαλίδες και άλλα
`@linkColor`	`#08c`	Προεπιλεγμένο χρώμα κειμένου συνδέσμου
`@linkColorHover`	`darken(@linkColor, 15%)`	Χρώμα αιώρησης προεπιλεγμένου κειμένου συνδέσμου

Σύστημα πλέγματος

`@gridColumns`	12
`@gridColumnWidth`	60 εικονοστοιχεία
`@gridGutterWidth`	20 εικονοστοιχεία
`@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`	13 εικονοστοιχεία	Πρέπει να είναι pixel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 εικονοστοιχεία	Πρέπει να είναι pixel
`@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`	40 εικονοστοιχεία
`@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

Βασικά μείγματα

Ένα βασικό mixin είναι ουσιαστικά ένα περιλαμβάνει ή ένα μερικό για ένα απόσπασμα του CSS. Είναι γραμμένα ακριβώς όπως μια τάξη CSS και μπορούν να καλούνται οπουδήποτε.

. στοιχείο {
  . clearfix ();
}

Παραμετρικές μίξεις

Μια παραμετρική μίξη είναι ακριβώς όπως μια βασική μίξη, αλλά δέχεται επίσης παραμέτρους (εξ ου και το όνομα) με προαιρετικές προεπιλεγμένες τιμές.

. στοιχείο {
  . περίγραμμα - ακτίνα ( 4px );
}

Προσθέστε εύκολα το δικό σας

Σχεδόν όλα τα mixin του Bootstrap αποθηκεύονται στο mixins.less, ένα υπέροχο αρχείο .less βοηθητικού προγράμματος που σας δίνει τη δυνατότητα να χρησιμοποιήσετε ένα mixin σε οποιοδήποτε από τα αρχεία .less της εργαλειοθήκης.

Επομένως, προχωρήστε και χρησιμοποιήστε τα υπάρχοντα ή μη διστάσετε να προσθέσετε τα δικά σας όπως χρειάζεστε.

Περιλαμβάνονται μείγματα

Βοηθητικά προγράμματα

Mixin	Παράμετροι	Χρήση
`.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")

Έντυπα

Mixin	Παράμετροι	Χρήση
`.placeholder()`	`@color: @placeholderText`	Ορίστε το `placeholder`χρώμα του κειμένου για εισόδους

Τυπογραφία

Mixin	Παράμετροι	Χρήση
`#font > #family > .serif()`	κανένας	Κάντε ένα στοιχείο να χρησιμοποιεί μια στοίβα γραμματοσειρών serif
`#font > #family > .sans-serif()`	κανένας	Κάντε ένα στοιχείο να χρησιμοποιεί μια στοίβα γραμματοσειρών sans-serif
`#font > #family > .monospace()`	κανένας	Κάντε ένα στοιχείο να χρησιμοποιεί μια στοίβα γραμματοσειρών 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`	Ρυθμίστε την οικογένεια γραμματοσειρών σε μονοδιάστημα και ελέγξτε το μέγεθος, το βάρος και το βασικό

Σύστημα πλέγματος

Mixin	Παράμετροι	Χρήση
`.container-fixed()`	κανένας	Δημιουργήστε ένα οριζόντια κεντραρισμένο κοντέινερ για τη διατήρηση του περιεχομένου σας
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Δημιουργήστε ένα σύστημα πλέγματος εικονοστοιχείων (κοντέινερ, σειρά και στήλες) με n στήλες και x ευρεία υδρορροή pixel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Δημιουργήστε ένα ποσοστό συστήματος πλέγματος με n στήλες και x % πλάτος υδρορροή
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Δημιουργήστε το σύστημα πλέγματος εικονοστοιχείων για `input`στοιχεία, λαμβάνοντας υπόψη τις επενδύσεις και τα περιγράμματα
`.makeColumn`	`@columns: 1, @offset: 0`	Μετατρέψτε οποιαδήποτε `div`σε στήλη πλέγματος χωρίς τις `.span*`κλάσεις

Ιδιότητες CSS3

Mixin	Παράμετροι	Χρήση
`.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
`.resizable()`	`@direction: both`	Κάντε οποιοδήποτε στοιχείο με δυνατότητα αλλαγής μεγέθους δεξιά και κάτω
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Κάντε το περιεχόμενο οποιουδήποτε στοιχείου να χρησιμοποιεί στήλες CSS3
`.hyphens()`	`@mode: auto`	Συλλαβισμός CSS3 όταν το θέλετε (περιλαμβάνει `word-wrap: break-word`)

Φόντα και κλίσεις

Mixin	Παράμετροι	Χρήση
`#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 εγκατάσταση -g λιγότερο jshint recess uglify-js

Μόλις εγκατασταθεί, εκτελέστε απλώς makeαπό τη ρίζα του καταλόγου εκκίνησης και είστε έτοιμοι.

Επιπλέον, εάν έχετε εγκαταστήσει το watchr , μπορείτε να εκτελέσετε make watchτην αυτόματη ανακατασκευή του bootstrap κάθε φορά που επεξεργάζεστε ένα αρχείο στο bootstrap lib (αυτό δεν απαιτείται, απλώς μια βολική μέθοδος).

Γραμμή εντολών

Εγκαταστήστε το εργαλείο γραμμής εντολών LESS μέσω του Node και εκτελέστε την ακόλουθη εντολή:

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

Φροντίστε να συμπεριλάβετε --compressσε αυτήν την εντολή εάν προσπαθείτε να αποθηκεύσετε μερικά byte!

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 που παρακολουθείτε.

Εάν θέλετε, μπορείτε να αλλάξετε τις προτιμήσεις στην εφαρμογή για αυτόματη ελαχιστοποίηση και σε ποιον κατάλογο καταλήγουν τα μεταγλωττισμένα αρχεία.

Χτισμένο με ΛΙΓΟΤΕΡΟ

Γιατί ΛΙΓΟΤΕΡΟ;

Τι περιλαμβάνεται;

Μάθε περισσότερα

Μεταβλητές

Μίξεις

Λειτουργίες

Μεταβλητές Bootstrap Μεταβλητές LESS, οι τιμές τους και οδηγίες χρήσης

Σκαλωσιές και σύνδεσμοι

Σύστημα πλέγματος

Τυπογραφία

Πίνακες

Χρώματα σε κλίμακα του γκρι

Χρώματα έμφασης

Συστατικά

Κουμπιά

Έντυπα

Σχηματίστε καταστάσεις και ειδοποιήσεις

Navbar

Αναπτυσσόμενα

Μονάδα ηρώων

Μίξεις Bootstrap

Σχετικά με τα mixins

Βασικά μείγματα

Παραμετρικές μίξεις

Προσθέστε εύκολα το δικό σας

Περιλαμβάνονται μείγματα

Βοηθητικά προγράμματα

Έντυπα

Τυπογραφία

Σύστημα πλέγματος

Ιδιότητες CSS3

Φόντα και κλίσεις

Μεταγλώττιση Bootstrap με LESS

Εργαλεία για τη μεταγλώττιση

Κόμβος με makefile

Γραμμή εντολών

Javascript

Ανεπίσημη εφαρμογή Mac

Περισσότερες εφαρμογές Mac

Τραγάνισμα

CodeKit

Απλή