Bootstrap

Bootstrap esteso

Estendi Bootstrap per sfruttare gli stili e i componenti inclusi, oltre a LESS variabili e mixin.

Costruito con MENO

MENO CSS

Bootstrap è realizzato con LESS al suo interno, un linguaggio di fogli di stile dinamico creato dal nostro buon amico, Alexis Sellier . Rende lo sviluppo di CSS basati su sistemi più veloce, più facile e più divertente.

Perché MENO?

Uno dei creatori di Bootstrap ha scritto un breve post sul blog su questo , riassunto qui:

  • Bootstrap compila più velocemente ~6 volte più velocemente con Less rispetto a Sass
  • Meno è scritto in JavaScript, rendendoci più facile immergerci e applicare patch rispetto a Ruby con Sass.
  • Meno è di più; vogliamo sentirci come se stessimo scrivendo CSS e rendendo Bootstrap accessibile a tutti.

Cosa è incluso?

Come estensione di CSS, LESS include variabili, mixin per frammenti di codice riutilizzabili, operazioni per semplici funzioni matematiche, annidamento e persino funzioni di colore.

Scopri di più

Visita il sito ufficiale all'indirizzo http://lesscss.org/ per saperne di più.

Compilare Bootstrap con meno

Poiché il nostro CSS è scritto con Less e utilizza variabili e mixin, deve essere compilato per l'implementazione della produzione finale. Ecco come.

Nota: se stai inviando una richiesta pull a GitHub con CSS modificato, devi ricompilare il CSS tramite uno di questi metodi.

Strumenti per la compilazione

Nodo con makefile

Installa il compilatore della riga di comando LESS, JSHint, Recess e uglify-js a livello globale con npm eseguendo il comando seguente:

$ npm install -g less jshint recess uglify-js

Una volta installato, esegui semplicemente makedalla radice della tua directory di bootstrap e sei pronto.

Inoltre, se hai installato watchr , potresti correre make watchper ricostruire automaticamente bootstrap ogni volta che modifichi un file nella libreria bootstrap (questo non è richiesto, solo un metodo pratico).

Riga di comando

Installa lo strumento da riga di comando LESS tramite Node ed esegui il comando seguente:

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

Assicurati di includere --compressin quel comando se stai cercando di salvare alcuni byte!

Javascript

Scarica l'ultimo Less.js e includi il percorso (e Bootstrap) nel file <head>.

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

Per ricompilare i file .less, salvali e ricarica la pagina. Less.js li compila e li archivia nella memoria locale.

App per Mac non ufficiale

L'app per Mac non ufficiale controlla le directory dei file .less e compila il codice in file locali dopo ogni salvataggio di un file .less visualizzato. Se lo desideri, puoi attivare le preferenze nell'app per minimizzare automaticamente e in quale directory finiscono i file compilati.

Più applicazioni

Croccante

Crunch è un ottimo editor e compilatore LESS basato su Adobe Air.

CodeKit

Creata dallo stesso ragazzo dell'app per Mac non ufficiale, CodeKit è un'app per Mac che compila LESS, SASS, Stylus e CoffeeScript.

Semplice

App per Mac, Linux e Windows per la compilazione drag and drop di file LESS. Inoltre, il codice sorgente è su GitHub .

Utilizzare come risorse statiche

Avvia rapidamente qualsiasi progetto web inserendo CSS e JS compilati o minimizzati. Sovrapponi gli stili personalizzati separatamente per aggiornamenti e manutenzioni facili da portare avanti.

Imposta la struttura del file

Scarica l'ultimo Bootstrap compilato e inseriscilo nel tuo progetto. Ad esempio, potresti avere qualcosa del genere:

  app / ├── layout / └── modelli / public / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halfling . png
       └── glificon - halfling - bianco . png

Utilizza il modello iniziale

Copia il seguente codice HTML di base per iniziare.

    1. <html>
    2.   <testa>
    3.     <title> Modello Bootstrap 101 </title>
    4.     <!-- Bootstrap -->
    5.     <link href = "public/css/bootstrap.min.css" rel = "foglio di stile" >  
    6.   </testa>
    7.   <corpo>
    8.     <h1> Ciao, mondo! </h1>
    9.     <!-- Bootstrap -->
    10.     <script src = "public/js/bootstrap.min.js" ></script> 
    11.   </corpo>
    12. </html>

Strato sul codice personalizzato

Lavora nel tuo CSS personalizzato, JS e altro se necessario per rendere Bootstrap tuo con i tuoi file CSS e JS separati.

    1. <html>
    2.   <testa>
    3.     <title> Modello Bootstrap 101 </title>
    4.     <!-- Bootstrap -->
    5.     <link href = "public/css/bootstrap.min.css" rel = "foglio di stile" >  
    6.     <!-- Progetto -->
    7.     <link href = "public/css/application.css" rel = "stylesheet" >  
    8.   </testa>
    9.   <corpo>
    10.     <h1> Ciao, mondo! </h1>
    11.     <!-- Bootstrap -->
    12.     <script src = "public/js/bootstrap.min.js" ></script> 
    13.     <!-- Progetto -->
    14.     <script src = "public/js/application.js" ></script> 
    15.   </corpo>
    16. </html>