Ampliar · Bootstrap en galego

Bootstrap está feito con LESS no seu núcleo, unha linguaxe de follas de estilo dinámica creada polo noso bo amigo, Alexis Sellier . Fai que o desenvolvemento de CSS baseado en sistemas sexa máis rápido, sinxelo e divertido.

Por que MENOS?

Un dos creadores de Bootstrap escribiu unha publicación rápida sobre isto , resumida aquí:

Bootstrap compila máis rápido ~6 veces máis rápido con Less en comparación con Sass
Menos está escrito en JavaScript, o que nos facilita mergullar e parchear en comparación con Ruby con Sass.
Menos é máis; queremos sentir que estamos escribindo CSS e facendo que Bootstrap sexa accesible para todos.

Que está incluído?

Como extensión de CSS, LESS inclúe variables, mesturas para fragmentos de código reutilizables, operacións para matemáticas sinxelas, anidamento e ata funcións de cor.

Aprender máis

Visita o sitio web oficial en http://lesscss.org/ para obter máis información.

Dado que o noso CSS está escrito con Less e utiliza variables e mixins, é necesario compilalo para a implementación da produción final. Aquí tes como.

Nota: se estás a enviar unha solicitude de extracción a GitHub con CSS modificado, debes recompilar o CSS mediante calquera destes métodos.

Ferramentas para compilar

Liña de comandos

Siga as instrucións do proxecto Readme en GitHub para compilar a través da liña de comandos.

JavaScript

Descarga o Less.js máis recente e inclúe o camiño (e Bootstrap) no ficheiro <head>.

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

Para recompilar os ficheiros .less, só tes que gardalos e volver cargar a túa páxina. Less.js compílaos e gárdaos no almacenamento local.

Aplicación non oficial para Mac

A aplicación non oficial para Mac mira directorios de ficheiros .less e compila o código en ficheiros locais despois de cada gardado dun ficheiro .less observado. Se queres, podes cambiar as preferencias na aplicación para a minificación automática e en que directorio acaban os ficheiros compilados.

Configurar a estrutura do ficheiro

Descarga o último Bootstrap compilado e colócao no teu proxecto. Por exemplo, podes ter algo así:

  aplicación/
      esquemas/
      modelos/
  público/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Utiliza o modelo de inicio

Copia o seguinte HTML base para comezar.

<html>
  <cabeza>
    <title> Modelo Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "folla de estilo" >  
  </cabeza>
  <corpo>
    <h1> Ola, mundo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </corpo>
</html>

Capa de código personalizado

Traballa no teu CSS, JS e moito máis personalizados segundo sexa necesario para facer o teu propio Bootstrap cos teus propios ficheiros CSS e JS separados.

<html>
  <cabeza>
    <title> Modelo Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "folla de estilo" >  
    <!-- Proxecto -->
    <link href = "public/css/application.css" rel = "folla de estilo" >  
  </cabeza>
  <corpo>
    <h1> Ola, mundo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Proxecto -->
    <script src = "public/js/application.js" ></script> 
  </corpo>
</html>

Ampliando Bootstrap

Construído con MENOS

Por que MENOS?

Que está incluído?

Aprender máis

Compilando Bootstrap con Less

Ferramentas para compilar

Liña de comandos

JavaScript

Aplicación non oficial para Mac

Máis aplicacións

Crunch

CodeKit

Sinxelo

Usar como activos estáticos

Configurar a estrutura do ficheiro

Utiliza o modelo de inicio

Capa de código personalizado