Estendi · Bootstrap in italiano

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, rendendo più facile per noi 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ù.

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 trascina e rilascia di file LESS. Inoltre, il codice sorgente è su GitHub .

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/
  pubblico/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      immagine/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Utilizza il modello iniziale

Copia il seguente codice HTML di base per iniziare.

<html>
  <testa>
    <title> Modello Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "foglio di stile" >  
  </testa>
  <corpo>
    <h1> Ciao, mondo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </corpo>
</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.

<html>
  <testa>
    <title> Modello Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "foglio di stile" >  
    <!-- Progetto -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>

Bootstrap esteso

Costruito con MENO