Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Introducción a CSS de Bootstrap Introducción a Bootstrap

Configuración del entorno de Bootstrap

La instalación de Bootstrap es muy sencilla. Este capítulo explicará cómo descargar e instalar Bootstrap, discutir la estructura de archivos de Bootstrap y mostrar su uso a través de un ejemplo.

descargar Bootstrap

Puede descargar la última versión de Bootstrap desde https://getbootstrap.com/docs/3.4/ Descargar la última versión de Bootstrap en

Haga clic en el enlace "Descargar Bootstrap" para ingresar a la siguiente página:

Verá dos botones:

Descargar Bootstrap：Descargar Bootstrap. Haga clic en este botón para descargar la versión precompilada y comprimida de Bootstrap CSS, JavaScript y fuentes. No incluye documentos y archivos de código fuente originales.
Descargar fuente：Descargar el código fuente. Haga clic en este botón para obtener el código fuente más reciente de Bootstrap LESS y JavaScript directamente desde el from.

Si utiliza el código fuente sin compilar, debe compilar los archivos LESS para generar archivos CSS reutilizables. Para compilar archivos LESS, Bootstrap oficial solo admite Recess，que es una base en less.js indicaciones de CSS.

Para entender mejor y usarlo más convenientemente, utilizaremos la versión precompilada de Bootstrap en este tutorial.

Debido a que los archivos están compilados y comprimidos, no es necesario incluir estos archivos independientes cada vez en el desarrollo funcional independiente.

Este tutorial se escribió utilizando la última versión (Bootstrap 3）。

estructura de archivos

Bootstrap precompilado

Al descargar la versión precompilada de Bootstrap, descomprimir el archivo ZIP, verá los siguientes archivos/Estructura de directorio:

Como se muestra en la imagen superior, se pueden ver CSS y JS compilados (bootstrap.*）。Además, incluye CSS y JS compilados y comprimidos (bootstrap.min.*）。Además, incluye fuentes de Glyphicons, que es un tema opcional de Bootstrap.

Código fuente de Bootstrap

Si descargó el código fuente de Bootstrap, la estructura de los archivos será como se muestra a continuación:

less/、js/ y fonts/ los archivos bajo el directorio son el código fuente de CSS, JS y fuentes de iconos de Bootstrap.
dist/ los directorios contienen los archivos y carpetas enumerados en la parte de descarga precompilada anterior.
docs-assets/、examples/ y todos los *.html el archivo es el documento de Bootstrap.

Plantilla HTML

Un ejemplo básico de plantilla HTML que utiliza Bootstrap se muestra a continuación:

Ejemplo

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<title>Plantilla Bootstrap</title>
　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　　　<!--　para introducir Bootstrap　-->
　　　　　　<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/"bootstrap.min.css" rel="stylesheet">
　
　　　　　　<!--　HTML5　Shiv y Respond.js se utilizan para que IE8　que soportan HTML5los elementos y las consultas de medios　-->
　　　　　　<!--　Nota: Si se introduce a través de file://　　El archivo de Respond.js no puede tener efecto si se introduce　-->
　　　　　　<!--[if lt IE　9]>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5<script src="shiv.js"></script>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/respond.js/1.3.0/<script src="respond.min.js"></script>
　　　　　　<![endif]-->
　　　</<head>
　　　<body>
　　　　　　<h1>Hello, world!</h1>
　
　　　　　　<!--　jQuery (Se necesita introducir jQuery para que los complementos JavaScript de Bootstrap funcionen)　-->
　　　　　　<script　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 que contiene jquery.js、bootstrap.min.js y bootstrap.min.css El archivo, que se utiliza para convertir un archivo HTML común en un patrón que utiliza Bootstrap.

Los detalles de cada elemento en el segmento de código anterior se explicarán en Resumen de CSS de Bootstrap Explicación detallada del capítulo.

Ejemplo en línea

Ahora intentemos usar Bootstrap para generar "Hello, world!":