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

Nodo con makefile

Instale el compilador de línea de comandos LESS, JSHint, Recess y uglify-js globalmente con npm ejecutando el siguiente comando:

$ npm install -g menos jshint recreo uglify-js

Una vez instalado, simplemente ejecute makedesde la raíz de su directorio de arranque y ya está todo listo.

Además, si tiene instalado watchr , puede ejecutar make watchpara que bootstrap se reconstruya automáticamente cada vez que edite un archivo en la biblioteca de bootstrap (esto no es obligatorio, solo es un método conveniente).

Línea de comando

Instale la herramienta de línea de comandos LESS a través de Node y ejecute el siguiente comando:

$ menosc ./menos/bootstrap.less > bootstrap.css

¡ Asegúrese de incluir --compressen ese comando si está tratando de guardar algunos bytes!

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 -->
    <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>

Ampliación de Bootstrap

Construido con MENOS