Προεπιλεγμένο πλέγμα

Το προεπιλεγμένο σύστημα πλέγματος που παρέχεται ως μέρος του Bootstrap είναι ένα πλέγμα 16 στηλών πλάτους 940 εικονοστοιχείων. Είναι μια γεύση του δημοφιλούς συστήματος πλέγματος 960, αλλά χωρίς το πρόσθετο περιθώριο/γεμίσματος στην αριστερή και τη δεξιά πλευρά.

Παράδειγμα σήμανσης πλέγματος

Όπως φαίνεται εδώ, μια βασική διάταξη μπορεί να δημιουργηθεί με δύο "στήλες", η καθεμία που καλύπτει έναν αριθμό από τις 16 θεμελιώδεις στήλες που ορίσαμε ως μέρος του συστήματος πλέγματος μας. Δείτε τα παρακάτω παραδείγματα για περισσότερες παραλλαγές.

<div class="row"> class = "σειρά" >
  <div class = "span6 στήλες" > 
    ...
  </div>
  <div class = "span10 στήλες" > 
    ...
  </div>
</div>

Σταθερή διάταξη

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

<σώμα>
  <div class = "container" > 
    ...
  </div>
</body>

Ρευστή διάταξη

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

<σώμα>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "περιεχόμενο" > 
      ...
    </div>
  </div>
</body>

Επικεφαλίδες και αντίγραφο

Μια τυπική τυπογραφική ιεραρχία για τη δόμηση των ιστοσελίδων σας.

h1. Επικεφαλίδα 1

h2. Επικεφαλίδα 2

h3. Κεφάλαιο 3

h4. Κεφάλαιο 4

h5. Κεφάλαιο 5

h6. Κεφάλαιο 6

Παράδειγμα παραγράφου

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Παράδειγμα επικεφαλίδας Έχει υποεπικεφαλίδα...

Μπορείτε επίσης να προσθέσετε υποτίτλους με το <strong>και<em>

Διάφορα. στοιχεία

Χρησιμοποιώντας έμφαση, διευθύνσεις και συντομογραφίες

<strong> <em> <address> <abbr>

Πότε να χρησιμοποιείται

Οι ετικέτες έμφασης ( <strong>και <em>) θα πρέπει να χρησιμοποιούνται για την προσθήκη οπτικής διάκρισης μεταξύ μιας λέξης ή φράσης και του αντιγράφου που την περιβάλλει. Χρησιμοποιήστε <strong>το για απλή παλιά προσοχή και <em>για κομψή προσοχή και τίτλους.

Έμφαση σε μια παράγραφο

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, μια pharetra augue.

Διευθύνσεις

Το addressστοιχείο χρησιμοποιείται για—το μαντέψατε!—διευθύνσεις. Δείτε πώς φαίνεται:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Σημείωση: Κάθε γραμμή σε ένα addressπρέπει να τελειώνει με μια αλλαγή γραμμής ( <br />) για να δομηθεί σωστά το περιεχόμενο όπως διαβάζεται στην πραγματική ζωή χωρίς να εφαρμόζονται στυλ.

Συντομογραφίες

Για συντομογραφίες και ακρωνύμια, χρησιμοποιήστε την abbrετικέτα ( acronymέχει καταργηθεί στην HTML5 ). Βάλτε τη φόρμα στενογραφίας μέσα στην ετικέτα και ορίστε έναν τίτλο για το πλήρες όνομα.

Μπλοκ εισαγωγικά

<blockquote> <p> <cite>

Βεβαιωθείτε ότι έχετε τυλίξει blockquoteκαι ετικέτες paragraph. citeΌταν αναφέρετε μια πηγή, χρησιμοποιήστε το citeστοιχείο. Το CSS θα προλογίσει αυτόματα ένα όνομα με μια παύλα em (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Ο γιατρός Τζούλιους Χίμπερτ

Χωρίς παραγγελία<ul>

• Τζέρεμι Μπίξμπι
• Robert Dezure
• Τζος Ουάσιγκτον
• Άντον Καπρέσι
• Οι φίλοι της ομάδας μου
  • Τζορτζ Καστάνζα
  • Τζέρι Σάινφελντ
  • Cosmo Kramer
  • Ελέιν Μπένις
  • Νέος άντρας
• John Jacob
• Πολ Πιρς
• Κέβιν Γκάρνετ

Αστυλ<ul.unstyled>

• Τζέρεμι Μπίξμπι
• Robert Dezure
• Τζος Ουάσιγκτον
• Άντον Καπρέσι
• Οι φίλοι της ομάδας μου
  • Τζορτζ Καστάνζα
  • Τζέρι Σάινφελντ
  • Cosmo Kramer
  • Ελέιν Μπένις
  • Νέος άντρας
• John Jacob
• Πολ Πιρς
• Κέβιν Γκάρνετ

Διέταξε<ol>

1. Τζέρεμι Μπίξμπι
2. Robert Dezure
3. Τζος Ουάσιγκτον
4. Άντον Καπρέσι
5. Οι φίλοι της ομάδας μου
   1. Τζορτζ Καστάνζα
   2. Τζέρι Σάινφελντ
   3. Cosmo Kramer
   4. Ελέιν Μπένις
   5. Νέος άντρας
6. John Jacob
7. Πολ Πιρς
8. Κέβιν Γκάρνετ

Περιγραφήdl

Λίστες περιγραφής

Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Τραπέζια δόμησης

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Τα τραπέζια είναι υπέροχα—για πολλά πράγματα. Οι υπέροχοι πίνακες, ωστόσο, χρειάζονται λίγη αγάπη σήμανσης για να είναι χρήσιμοι, επεκτάσιμοι και ευανάγνωστοι (σε ​​επίπεδο κώδικα). Ακολουθούν μερικές συμβουλές για να βοηθήσετε.

Πάντα να τυλίγετε τις κεφαλίδες των στηλών σας theadέτσι ώστε η ιεραρχία να είναι thead> tr> th.

Παρόμοια με τις κεφαλίδες στηλών, όλο το περιεχόμενο του σώματος του πίνακα σας θα πρέπει να είναι τυλιγμένο σε ένα tbody, ώστε η ιεραρχία σας να είναι tbody> tr> td.

Παράδειγμα: Προεπιλεγμένα στυλ πίνακα

Όλοι οι πίνακες θα διαμορφωθούν αυτόματα με μόνο τα βασικά περιγράμματα για να διασφαλιστεί η αναγνωσιμότητα και η διατήρηση της δομής. Δεν χρειάζεται να προσθέσετε επιπλέον κλάσεις ή χαρακτηριστικά.

#	Ονομα	Επίθετο	Γλώσσα
1	Μερικοί	Ενας	Αγγλικά
2	Τζο	Κοιλιακοί	Αγγλικά
3	Stu	Βαθούλωμα	Κώδικας

<table class="common-table"> class = "common-table" >
  ...
</table>

Παράδειγμα: Ζέβρα-ριγέ

Διασκεδάστε λίγο με τα τραπέζια σας προσθέτοντας ζέβρα-απλώς προσθέστε την .zebra-stripedτάξη.

#	Ονομα	Επίθετο	Γλώσσα
1	Μερικοί	Ενας	Αγγλικά
2	Τζο	Κοιλιακοί	Αγγλικά
3	Stu	Βαθούλωμα	Κώδικας

<table class="common-table zebra-striped"> class = "common-table zebra-striped" >
...
</table>

Παράδειγμα: Zebra-striped w/ TableSorter.js

Λαμβάνοντας το προηγούμενο παράδειγμα, βελτιώνουμε τη χρησιμότητα των πινάκων μας παρέχοντας λειτουργικότητα ταξινόμησης μέσω του jQuery και της προσθήκης Tablesorter . Κάντε κλικ στην κεφαλίδα οποιασδήποτε στήλης για να αλλάξετε την ταξινόμηση.

#	Ονομα	Επίθετο	Γλώσσα
1	Τα δικα σου	Ενας	Αγγλικά
2	Τζο	Κοιλιακοί	Αγγλικά
3	Stu	Βαθούλωμα	Κώδικας

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" </script> 
< τύπος script = "text/javascript" > 
  $ ( έγγραφο ). έτοιμο ( συνάρτηση () { 
    $ ( "table# sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Προεπιλεγμένα στυλ

Σε όλες τις φόρμες δίνονται προεπιλεγμένα στυλ για να παρουσιάζονται με ευανάγνωστο και κλιμακωτό τρόπο. Παρέχονται στυλ για εισαγωγή κειμένου, επιλεγμένες λίστες, περιοχές κειμένου, κουμπιά επιλογής και πλαίσια ελέγχου και κουμπιά.

Παράδειγμα φόρμας υπόμνημα

X-Large Είσοδος

Επιλέγω

1 2 3 4 5

Επιλέγω

1 2 3 4 5

Μη επεξεργάσιμη είσοδος

Κάποια αξία εδώ

Απενεργοποιημένη είσοδος

X-Large Είσοδος

Μικρό απόσπασμα κειμένου βοήθειας

Παράδειγμα φόρμας υπόμνημα

Προτεινόμενο κείμενο

@

Προτεινόμενο πλαίσιο ελέγχου

Προστέθηκε πλαίσιο ελέγχου

Εισαγωγή αρχείου

Παράδειγμα φόρμας υπόμνημα

Λίστα επιλογών

• Η πρώτη επιλογή είναι αυτό και αυτό - φροντίστε να συμπεριλάβετε γιατί είναι υπέροχο
• Η επιλογή δύο μπορεί επίσης να ελεγχθεί και να συμπεριληφθεί στα αποτελέσματα της φόρμας
• Η επιλογή τρία μπορεί —ναι, το μαντέψατε— επίσης να ελεγχθεί και να συμπεριληφθεί στα αποτελέσματα της φόρμας
• Η επιλογή τέσσερα δεν μπορεί να ελεγχθεί καθώς είναι απενεργοποιημένη.

Σημείωση: Οι ετικέτες περιβάλλουν όλες τις επιλογές για πολύ μεγαλύτερες περιοχές κλικ και μια πιο χρησιμοποιήσιμη φόρμα.

Εύρος ημερομηνιών

προς την Όλες οι ώρες εμφανίζονται ως Ώρα Ειρηνικού (GMT -08:00).

Textarea

Μπλοκ του κειμένου βοήθειας για την περιγραφή του παραπάνω πεδίου, εάν χρειάζεται.

Λίστα επιλογών

• Η πρώτη επιλογή είναι αυτό και αυτό - φροντίστε να συμπεριλάβετε γιατί είναι υπέροχο
• Η επιλογή δύο μπορεί επίσης να ελεγχθεί και να συμπεριληφθεί στα αποτελέσματα της φόρμας

Αποθήκευσε τις αλλαγές Ματαίωση

Στοιβαγμένες φόρμες

Προσθέστε .form-stackedστο HTML της φόρμας σας και θα έχετε ετικέτες πάνω από τα πεδία τους αντί στα αριστερά τους. Αυτό λειτουργεί εξαιρετικά εάν οι φόρμες σας είναι σύντομες ή έχετε δύο στήλες εισόδων για πιο βαριές φόρμες.

Παράδειγμα φόρμας υπόμνημα

X-Large Είσοδος

Επιλέγω

1 2 3 4 5

Παράδειγμα φόρμας υπόμνημα

Λίστα επιλογών

• Η πρώτη επιλογή είναι αυτό και αυτό - φροντίστε να συμπεριλάβετε γιατί είναι υπέροχο
• Η επιλογή δύο μπορεί επίσης να ελεγχθεί και να συμπεριληφθεί στα αποτελέσματα της φόρμας

Σημείωση: Οι ετικέτες περιβάλλουν όλες τις επιλογές για πολύ μεγαλύτερες περιοχές κλικ και μια πιο χρησιμοποιήσιμη φόρμα.

Αποθήκευσε τις αλλαγές Ματαίωση

Κουμπιά

Κατά κανόνα, τα κουμπιά χρησιμοποιούνται για ενέργειες ενώ οι σύνδεσμοι για αντικείμενα. Για παράδειγμα, η "Λήψη" θα μπορούσε να είναι ένα κουμπί και η "πρόσφατη δραστηριότητα" θα μπορούσε να είναι ένας σύνδεσμος.

Όλα τα κουμπιά έχουν προεπιλεγμένο στυλ ανοιχτό γκρι, αλλά .primaryείναι διαθέσιμη μια κατηγορία μπλε. Επιπλέον, το να κάνεις τα δικά σου στυλ είναι εύκολο.

Παράδειγμα κουμπιά

Τα στυλ κουμπιών μπορούν να εφαρμοστούν σε οτιδήποτε με το .btnεφαρμοσμένο. Συνήθως, θα θέλετε να τα εφαρμόσετε μόνο σε στοιχεία a, button, και επιλέξτε input. Δείτε πώς φαίνεται:

Εναλλακτικά μεγέθη

Θέλετε μεγαλύτερα ή μικρότερα κουμπιά; Να το έχετε!

Κατάσταση αναπηρίας

Για κουμπιά που δεν είναι ενεργά ή είναι απενεργοποιημένα από την εφαρμογή για τον ένα ή τον άλλο λόγο, χρησιμοποιήστε την κατάσταση απενεργοποίησης. Αυτό είναι .disabledγια συνδέσμους και :disabledγια buttonστοιχεία.

Συνδέσεις

Κουμπιά

Τι είναι αυτό

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

Προσαρμόσιμο

Όλα τα στοιχεία μέσα, καθώς και ολόκληρη η επάνω γραμμή, είναι προαιρετικά. Μπορείτε να επιλέξετε να συμπεριλάβετε ένα λογότυπο/όνομα, μια πλοήγηση, μια αναζήτηση και μια δευτερεύουσα πλοήγηση—ή οποιονδήποτε συνδυασμό αυτών.

Περιλαμβάνονται αναπτυσσόμενα

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

Ταμπλέτες και χάπια

Δημιουργήστε απλή δευτερεύουσα πλοήγηση με ένα ul. Εναλλάξτε μεταξύ καρτελών ή χαπιών προσθέτοντας την κατάλληλη κατηγορία.

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

• Σπίτι
• Προφίλ
• Μηνύματα
• Ρυθμίσεις
• Επικοινωνία

<ul class="tabs"> class = "καρτέλες" >
  <li class = "active" ><a href = "" > Αρχική σελίδα </a></li>  
  <li><a href = "" > Προφίλ </a></li> 
  <li><a href = "" > Μηνύματα </a></li> 
  <li><a href = "" > Ρυθμίσεις </a></li> 
  <li><a href = "" > Επικοινωνήστε με </a></li> 
</ul>

• Σπίτι
• Προφίλ
• Μηνύματα
• Ρυθμίσεις
• Επικοινωνία

<ul class="pills"> class = «χάπια» >
  <li class = "active" ><a href = "" > Αρχική σελίδα </a></li>  
  <li><a href = "" > Προφίλ </a></li> 
  <li><a href = "" > Μηνύματα </a></li> 
  <li><a href = "" > Ρυθμίσεις </a></li> 
  <li><a href = "" > Επικοινωνήστε με </a></li> 
</ul>

Σελιδοποίηση

Εξαιρετικά απλοϊκή και μινιμαλιστική σελιδοποίηση εμπνευσμένη από το Rdio. Το μεγάλο μπλοκ είναι δύσκολο να το χάσετε, εύκολα κλιμακώνεται και παρέχει μεγάλες περιοχές κλικ.

<div class="σελιδοποίηση"> class = "σελιδοποίηση" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Προηγούμενο </a></li>  
    <li class = "active" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 ​​</a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "next" ><a href = "" > Επόμενο → </a></li>  
  </ul>
</div>

Βασικές ειδοποιήσεις

Μηνύματα μιας γραμμής για την επισήμανση της αποτυχίας, πιθανής αποτυχίας ή επιτυχίας μιας ενέργειας. Ιδιαίτερα χρήσιμο για φόρμες.

Αποκλεισμός μηνυμάτων

Για μηνύματα που απαιτούν λίγη εξήγηση, έχουμε ειδοποιήσεις στυλ παραγράφου. Αυτά είναι ιδανικά για τη δημιουργία φυσαλίδων μεγαλύτερης διάρκειας μηνυμάτων σφάλματος, την προειδοποίηση ενός χρήστη για μια ενέργεια σε εκκρεμότητα ή απλώς την παρουσίαση πληροφοριών για μεγαλύτερη έμφαση στη σελίδα.

Modals

Τα Modals—διάλογοι ή lightbox—είναι ιδανικά για ενέργειες με βάση τα συμφραζόμενα σε καταστάσεις όπου είναι σημαντικό να διατηρηθεί το περιβάλλον φόντου.

Popovers

Χρησιμοποιήστε popover για να παρέχετε υποκειμενικές πληροφορίες σε μια σελίδα χωρίς να επηρεάζετε τη διάταξη.

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

Δείτε πώς χρησιμοποιήσαμε το Preboot στο Bootstrap και πώς μπορείτε να το χρησιμοποιήσετε εάν επιλέξετε να εκτελέσετε το Less στο επόμενο έργο σας.

Πως να το χρησιμοποιήσεις

Χρησιμοποιήστε αυτήν την επιλογή για να αξιοποιήσετε πλήρως τις μεταβλητές Less του Bootstrap, mixins και ένθεση σε CSS μέσω javascript στο πρόγραμμα περιήγησής σας.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" </script>  

Δεν αισθάνεστε τη λύση .js; Δοκιμάστε την εφαρμογή Less Mac ή χρησιμοποιήστε το Node.js για μεταγλώττιση κατά την ανάπτυξη του κώδικά σας.

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

Εδώ είναι μερικά από τα σημαντικότερα σημεία του τι περιλαμβάνεται στο Twitter Bootstrap ως μέρος του Bootstrap. Μεταβείτε στον ιστότοπο του Bootstrap ή στη σελίδα του έργου Github για λήψη και μάθετε περισσότερα.

Μεταβλητές χρώματος

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

// Συνδέσεις
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
// Γκρι
@μαύρο : #000;             
@grayDark :           lighten ( @black , 25 %); 
@γκρι :               ανοιχτόχρωμο ( @μαύρο , 50 %); 
@grayLight :          ανοιχτόχρωμο ( @μαύρο , 70 %); 
@grayLighter :        lighten ( @black , 90 %); 
@white : #fff ;             
// Χρώματα έμφασης
@μπλε : #08b5fb ;              
@green : #46a546;             
@red : #9d261d;               
@κίτρινο : #ffc40d ;            
@πορτοκαλί : #f89406 ;            
@pink : #c3325f;              
@μωβ : #7a43b6 ;            
// Βασική γραμμή
@baseline : 20px ;          

Σχολιάζοντας

Το Less παρέχει επίσης ένα άλλο στυλ σχολιασμού εκτός από την κανονική /* ... */σύνταξη του CSS.

// Αυτό είναι ένα σχόλιο
/* Αυτό είναι επίσης ένα σχόλιο */

Ανακατεύει το wazoo

Οι μίξεις είναι βασικά ενσωματωμένες ή επιμέρους για CSS, επιτρέποντάς σας να συνδυάσετε ένα μπλοκ κώδικα σε ένα. Είναι ιδανικά για ιδιότητες με πρόθεμα προμηθευτή όπως box-shadow, διαβαθμίσεις μεταξύ προγραμμάτων περιήγησης, στοίβες γραμματοσειρών και πολλά άλλα. Παρακάτω είναι ένα δείγμα των mixins που περιλαμβάνονται στο Bootstrap.

Στοίβες γραμματοσειρών

#font {
  . συντομογραφία ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
μέγεθος     γραμματοσειράς : @size ; _ 
    γραμματοσειρά - βάρος : @weight ; 
    γραμμή - ύψος : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    γραμματοσειρά - οικογένεια : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
μέγεθος     γραμματοσειράς : @size ; _ 
    γραμματοσειρά - βάρος : @weight ; 
    γραμμή - ύψος : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    γραμματοσειρά - οικογένεια : "Georgia" , Times New Roman , Times , sans - serif ;     
μέγεθος     γραμματοσειράς : @size ; _ 
    γραμματοσειρά - βάρος : @weight ; 
    γραμμή - ύψος : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    γραμματοσειρά - οικογένεια : "Monaco" , Courier New , monospace ;   
μέγεθος     γραμματοσειράς : @size ; _ 
    γραμματοσειρά - βάρος : @weight ; 
    γραμμή - ύψος : @lineHeight ; 
  }
}

Διαβαθμίσεις

#βαθμίδα {
  . οριζόντια ( @startColor : #555, @endColor: #333) { 
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
    background-image: linear-gradient(@startColor, @endColor); // The standard
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    ...
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
    ...
  }
}

Λειτουργίες και σύστημα δικτύου

Φανταστείτε και εκτελέστε μερικά μαθηματικά για να δημιουργήσετε ευέλικτα και ισχυρά mixins όπως το παρακάτω.

// Griditude
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
// Grid System
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  display: inline;
  float: left;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  margin-left: @gridGutterWidth;
  &:first-child {
    margin-left: 0;
  }
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}