Recientemente se anunció Bootstrap 4 alpha. Se trata de la cuarta versión de este framework frontend responsivo que se ha hecho muy popular sobre todo por la gran cantidad de plantillas disponibles que tiene, tanto gratuitas como de pago.
A pesar de que a Bootstrap 4 alpha le queda mucha documentación por completar, nosotros no hemos podido evitar probarlo y darle un repaso a sus componentes más importantes.
DESCARGAR BOOTSTRAP 4 Y PREPARAR EL PROYECTO
OPCIÓN 1: CLONANDO EL REPOSITORIO Y USANDO SASS (MODO PRO)
Si eres de los que trabajan con Bootstrap de forma modular usando Sass, puedes clonar el repositorio de github, ejecutar grunt y empezar a trastear Bootstrap 4. Para ello sigue estos pasos:
Usaremos Grunt para compilar Bootstrap Sass a css. Para ello debes tener node y Grunt.js instalados, en esta entrada tienes los pasos para hacerlo.
Ahora ejecuta estos comandos dentro de tu carpeta /bootstrap :
La configuración que trae el Gruntfile.js junto a la ejecución del comando grunt watch, hará que se gestionen muchas tareas. Como la compilación automática de los ficheros modulares en .scss a un solo fichero bootstrap.css situado en el directorio /dist, cada vez que hagas cambios.
Compilar con Grunt cuesta unos pocos segundos. Si no te sientes cómodo usando Grunt, puedes compila tus archivos .scss con otros compiladores de Sass que uses habitualmente.
Usar Sass con Bootstrap nos da la ventaja de trabajar de forma modular cada uno de los componentes .scss, personalizando así nuestro proyecto al máximo.
OPCIÓN 2: CARGAR LOS ENLACES CDN DE BOOTSTRAP 4 ALPHA Y LISTO (MODO FÁCIL)
El modo rápido para empezar a trastear Bootstrap sería cargar los enlaces CDN con los estilos ya compilados y el javascript de bootstrap en tu documento.
Copia y pega las hojas de estilos
<link> en tu <head> y añade jQuery y los plugins de bootstrap antes del cierre de la etiqueta </body>:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> </head> <body> <h1>Plantilla inicial</h1> <!-- jQuery primero, después Bootstrap JS. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> </body> </html> |
Simple y rápido.
0 Comentarios