La instalación de Bootstrap es muy fácil. Este artículo es un resumen de mis estudios, que es conveniente para futuras consultas y aprendizaje. Al mismo tiempo, espero ayudarte.
1. Descargar bootstrap
Puede descargar la última versión de Bootstrap de http://getbootstrap.com/. Cuando haga clic en este enlace, verá una página web como esta:
Verás dos botones:
Descargar Bootstrap: descargar bootstrap. Haga clic en este botón y puede descargar versiones comprimidas precompiladas de Bootstrap CSS, JavaScript y Fonts. Los documentos y los archivos de código fuente originales no están incluidos.
Descargar Fuente: Descargue el código fuente. Haga clic en este botón y puede obtener el último código fuente de Bootstrap y JavaScript directamente desde.
Si está utilizando el código fuente no compilado, debe compilar el archivo menos para generar archivos CSS reutilizables. Para compilar menos archivos, Bootstrap solo admite el recreo, que es el aviso de CSS menos basado en Twitter. JS.
Para una mejor comprensión y un uso más fácil, utilizaremos una versión precompilada de Bootstrap en este tutorial.
Dado que los archivos se compilan y se comprimen, no debe incluir estos archivos independientes cada vez en un desarrollo funcional independiente.
Esta nota de estudio es la última versión (Bootstrap 3).
2. Estructura de archivo
1. Bootstrap precompilado
Cuando descargue la versión compilada de Bootstrap y descomprima el archivo zip, verá la siguiente estructura de archivo/directorio:
Como se muestra en la imagen de arriba, puede ver el CSS y JS compilado (Bootstrap.*), Así como el CSS y JS compilado compilado (bootstrap.min.*). También incluye la fuente de Glyphicons, un tema de arranque opcional.
2. Código fuente de Bootstrap
Si descargó el código fuente de Bootstrap, la estructura del archivo se verá así:
Los archivos en Less/, JS/ y Fonts/ son los códigos fuente de Bootstrap CSS, JS e Fonts de iconos, respectivamente.
La carpeta DIST/ contiene los archivos y carpetas enumeradas en la sección de descarga precompilada anterior.
Docs-Assets/, ejemplos/y todos los archivos *.html son documentos de arranque.
3. Plantilla HTML
Una plantilla HTML básica usando Bootstrap se ve así:
<! Doctype html> <html> <fead> <title> Bootstrap Template </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escala = 1.0"> <!-Introducción de bootstrap-> <enlace href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim y responden El archivo no puede tener efecto-> <!-[if LT IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/responder.js/1.3.0/ corresponspes src = "https://code.jquery.com/jquery.js"> </script> <!-Incluye todos los complementos compilados-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
Aquí puede ver jQuery.js, bootstrap.min.js y archivos bootstrap.min.css que se utilizan para hacer de un archivo HTML regular una plantilla que usa bootstrap.
IV. Ejemplos
Ahora intentemos generar "¡Hola, mundo!" Usando bootstrap:
<! Doctype html> <html> <cead> <title> Pruebe la instancia de bootstrap en línea </title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "Stylesheet"> <Scrito src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.0/js/bootstrap.min.js"> </script> </script> <heding> <hed> <hed> <hed> <H1> World! </h1> </body> </html>
<!-Nuevo archivo CSS de Bootstrap Core-> <Link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "Stylesheet"> <!-Archivo de temas opcional (no se usa generalmente) src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-JQuery File. Asegúrese de introducir-> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.js"> <!-El último archivo JavaScript de Bootstrap Core-> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y construir correctamente el entorno de instalación de Bootstrap.