Extender · Bootstrap en español

Bootstrap está hecho con LESS en su núcleo, un lenguaje de hoja de estilo dinámico creado por nuestro buen amigo, Alexis Sellier . Hace que el desarrollo de CSS basado en sistemas sea más rápido, fácil y divertido.

¿Por qué MENOS?

Uno de los creadores de Bootstrap escribió una breve publicación de blog sobre esto , que se resume aquí:

Bootstrap compila más rápido ~ 6 veces más rápido con Less en comparación con Sass
Se escribe menos en JavaScript, lo que nos facilita sumergirnos y aplicar parches en comparación con Ruby con Sass.
Menos es más; queremos sentir que estamos escribiendo CSS y haciendo que Bootstrap sea accesible para todos.

¿Qué está incluido?

Como una extensión de CSS, LESS incluye variables, mixins para fragmentos de código reutilizables, operaciones para matemáticas simples, anidamiento e incluso funciones de color.

Aprende más

Visite el sitio web oficial en http://lesscss.org/ para obtener más información.

Dado que nuestro CSS está escrito con Less y utiliza variables y combinaciones, debe compilarse para la implementación de producción final. Así es cómo.

Nota: Si envía una solicitud de extracción a GitHub con CSS modificado, debe volver a compilar el CSS a través de cualquiera de estos métodos.

Herramientas para compilar

Línea de comando

Siga las instrucciones en el archivo Léame del proyecto en GitHub para compilar a través de la línea de comandos.

JavaScript

Descargue el Less.js más reciente e incluya la ruta (y Bootstrap) en el archivo <head>.

<enlace rel = "hoja de estilo/menos" href = "/ruta/a/bootstrap.less" > <script src = "/ruta/a/menos.js" ></script>

Para volver a compilar los archivos .less, simplemente guárdelos y vuelva a cargar su página. Less.js los compila y los almacena en el almacenamiento local.

Aplicación no oficial de Mac

La aplicación no oficial de Mac observa directorios de archivos .less y compila el código en archivos locales después de cada guardado de un archivo .less observado. Si lo desea, puede alternar las preferencias en la aplicación para la minimización automática y en qué directorio terminan los archivos compilados.

Más aplicaciones

Crujido

Crunch es un editor y compilador LESS de gran apariencia construido en Adobe Air.

Kit de código

Creado por el mismo tipo que la aplicación no oficial de Mac, CodeKit es una aplicación de Mac que compila LESS, SASS, Stylus y CoffeeScript.

Sencillo

Aplicación para Mac, Linux y Windows para compilar archivos LESS con arrastrar y soltar. Además, el código fuente está en GitHub .

Inicie rápidamente cualquier proyecto web colocando el CSS y el JS compilados o minimizados. Aplique capas en estilos personalizados por separado para facilitar las actualizaciones y el mantenimiento en el futuro.

Configuración de la estructura del archivo

Descargue el último Bootstrap compilado y colóquelo en su proyecto. Por ejemplo, podrías tener algo como esto:

  aplicación/
      diseños/
      plantillas/
  público/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      imagen/
          glyphicons-halflings.png
          glyphicons-halflings-blanco.png

Utilizar plantilla de inicio

Copie el siguiente HTML base para comenzar.

<html>
  <cabeza>
    <title> Plantilla Bootstrap 101 </title>
    <!-- Arranque -->
    <enlace href = "público/css/bootstrap.min.css" rel = "hoja de estilo" >  
  </cabeza>
  <cuerpo>
    <h1> ¡Hola, mundo! </h1>
    <!-- Arranque -->
    <script src = "público/js/bootstrap.min.js" ></script> 
  </cuerpo>
</html>

Capa en código personalizado

Trabaje en su CSS personalizado, JS y más según sea necesario para hacer que Bootstrap sea suyo con sus propios archivos CSS y JS separados.

<html>
  <cabeza>
    <title> Plantilla Bootstrap 101 </title>
    <!-- Arranque -->
    <enlace href = "público/css/bootstrap.min.css" rel = "hoja de estilo" >  
    <!-- Proyecto -->
    <enlace href = "público/css/aplicación.css" rel = "hoja de estilo" >  
  </cabeza>
  <cuerpo>
    <h1> ¡Hola, mundo! </h1>
    <!-- Arranque -->
    <script src = "público/js/bootstrap.min.js" ></script> 
    <!-- Proyecto -->
    <secuencia de comandos src = "público/js/aplicación.js" ></secuencia de comandos> 
  </cuerpo>
</html>

Ampliación de Bootstrap

Construido con MENOS