Επέκταση · Bootstrap στα ελληνικα

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

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

Ένας από τους δημιουργούς του Bootstrap έγραψε μια γρήγορη ανάρτηση ιστολογίου σχετικά με αυτό , που συνοψίζεται εδώ:

Το Bootstrap μεταγλωττίζεται πιο γρήγορα ~ 6 φορές πιο γρήγορα με το Less σε σύγκριση με το Sass
Γράφονται λιγότερα σε JavaScript, καθιστώντας μας ευκολότερο να βουτήξουμε και να επιδιορθώσουμε σε σύγκριση με το Ruby με Sass.
Λιγότερο είναι περισσότερο; Θέλουμε να νιώθουμε ότι γράφουμε CSS και κάνουμε το Bootstrap προσιτό σε όλους.

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

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

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

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

Δεδομένου ότι το CSS μας είναι γραμμένο με Less και χρησιμοποιεί μεταβλητές και mixins, πρέπει να μεταγλωττιστεί για την τελική υλοποίηση παραγωγής. Να πώς.

Σημείωση: Εάν υποβάλλετε αίτημα έλξης στο 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 που παρακολουθείτε. Εάν θέλετε, μπορείτε να αλλάξετε τις προτιμήσεις στην εφαρμογή για αυτόματη ελαχιστοποίηση και σε ποιον κατάλογο καταλήγουν τα μεταγλωττισμένα αρχεία.

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

Τραγάνισμα

Το Crunch είναι ένα υπέροχο πρόγραμμα επεξεργασίας και μεταγλωττιστής LESS που έχει δημιουργηθεί στο Adobe Air.

CodeKit

Δημιουργήθηκε από τον ίδιο τύπο με την ανεπίσημη εφαρμογή Mac, το CodeKit είναι μια εφαρμογή Mac που μεταγλωττίζει LESS, SASS, Stylus και CoffeeScript.

Απλή

Εφαρμογή Mac, Linux και Windows για μεταφορά και απόθεση μεταγλώττισης LESS αρχείων. Επιπλέον, ο πηγαίος κώδικας βρίσκεται στο GitHub .

Ξεκινήστε γρήγορα οποιοδήποτε έργο ιστού αποθέτοντας το μεταγλωττισμένο ή ελαχιστοποιημένο CSS και JS. Επίπεδο σε προσαρμοσμένα στυλ ξεχωριστά για εύκολες αναβαθμίσεις και συντήρηση.

Ρύθμιση δομής αρχείου

Κατεβάστε το πιο πρόσφατο μεταγλωττισμένο Bootstrap και τοποθετήστε το στο έργο σας. Για παράδειγμα, μπορεί να έχετε κάτι σαν αυτό:

  app/
      διατάξεις/
      πρότυπα/
  δημόσιο/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Χρησιμοποιήστε το πρότυπο εκκίνησης

Αντιγράψτε το ακόλουθο βασικό HTML για να ξεκινήσετε.

<html>
  <κεφάλι>
    Πρότυπο < title> Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "φύλλο στυλ" >  
  </head>
  <σώμα>
    <h1> Γεια σου, κόσμος! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
  </body>
</html>

Επίπεδο σε προσαρμοσμένο κώδικα

Εργαστείτε στο προσαρμοσμένο σας CSS, JS και άλλα όπως χρειάζεται για να κάνετε το Bootstrap δικό σας με τα δικά σας ξεχωριστά αρχεία CSS και JS.

<html>
  <κεφάλι>
    Πρότυπο < title> Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "φύλλο στυλ" >  
    <!-- Έργο -->
    <link href = "public/css/application.css" rel = "φύλλο στυλ" >  
  </head>
  <σώμα>
    <h1> Γεια σου, κόσμος! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
    <!-- Έργο -->
    <script src = "public/js/application.js" </script> 
  </body>
</html>

Επέκταση Bootstrap

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