Tutorial básico Bootstrap

Plugins Bootstrap

Configuración del entorno de Bootstrap Tutoriales de Bootstrap

Introducción a Bootstrap

En este tutorial, aprenderá a usar Bootstrap 3 La versión compilada crea un plantilla básica de Bootstrap.

Introducción a Bootstrap

Aquí, aprenderá cuán fácil es crear páginas web con Bootstrap. Antes de comenzar, asegúrese de tener un editor de código y algunos conocimientos básicos de HTML y CSS.

Si solo está comenzando en el desarrollo web, por favorComience a aprender los fundamentos de HTML aquí»

Bien, vamos directamente al grano.

Descargar archivo Bootstrap

Hay dos versiones disponibles para descargarBootstrap compiladoyBootstrap fuentePuedeDescargue el archivo Bootstrap aquí

Descargue la versión compilada y reducida que contiene archivos CSS y JavaScript, así como iconos en formato de fuente, para desarrollar web más rápido y fácilmente, mientras que el código fuente contiene todos los archivos CSS y JavaScript en su versión original y una copia local del documento.

Para entender mejor, nos enfocaremos en los archivos Bootstrap compilados. Esto puede ahorrarle tiempo, ya que no tendrá que preocuparse por cada función individual, incluidos los archivos individuales. Cuando decida mover su sitio a un entorno de producción, ya que las solicitudes HTTP y los tamaños de descarga son más pequeños, ya que puede compilar y comprimir archivos, también puede mejorar el rendimiento del sitio web y ahorrar ancho de banda valioso.

Conozca la estructura de los archivos

Descomprima el archivo Bootstrap compilado después de la descarga para ver la estructura. Encontrará la siguiente estructura de archivos y contenido.

bootstrap/
|——　css/
|　　　|——　bootstrap.css
|　　　|——　bootstrap.min.css
|　　　|——　bootstrap-theme.css
|　　　|——　bootstrap-theme.min.css
|——　js/
|　　　|——　bootstrap.js
|　　　|——　bootstrap.min.js
|——　fonts/
|　　　|——　glyphicons-halflings-regular.eot
|　　　|——　glyphicons-halflings-regular.svg
|　　　|——　glyphicons-halflings-regular.ttf
|　　　|——　glyphicons-halflings-regular.woff

Como puede ver, la versión compilada de Bootstrap proporciona archivos CSS y JS compilados (bootstrap.*），así como CSS y JS compilados y comprimidos (bootstrap.min.*）。

archivos de fuente glyphicons-halflings-regular.*La carpeta contiene cuatro archivos de fuente () Estos archivos de fuente contienen glyphs de la colección Glyphicon Halflings,250 iconos.

Consejo:Esta es la forma más básica de Bootstrap, que se puede usar rápidamente en cualquier proyecto web. Tenga en cuenta que los complementos JavaScript de Bootstrap requieren que se incluya jQuery. Puede encontrarlos aquíhttps://jquery.com/descarga/Descargue la última versión de jQuery formulario.

Cree su primera página web con Bootstrap

Hasta ahora, ha entendido la estructura y el uso de los archivos Bootstrap, es hora de comenzar a usar Bootstrap. En esta sección, crearemos un plantilla básica de Bootstrap que incluya todo lo mencionado en la estructura del archivo.

Vamos a completar estos pasos paso a paso. Al final de este tutorial, creará un archivo HTML que muestre el mensaje “Hello world” en un navegador web.

Pasos1：Crear un archivo HTML básico

Abra su editor de código favorito y cree un nuevo archivo HTML. Comience con una ventana vacía, luego escriba el siguiente código y guárdelo como “basic.html” en su escritorio.

Ejemplo

<!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="utf-8">
　　　　<meta　http-equiv="X-UA-Compatible"　content="IE=edge">
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　　　Basic　HTML　File</title>
</head>
<body>
　　　　<h1>Hello,　world!</h1>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-get-started-1.html" class="btn btn-success btn-run">Prueba para ver‹/›</a></div><div class="alert alert-success"><p><strong>Consejo:</strong><title>Archivo HTML Básico<-UA-Siempre incluya la etiqueta <meta> de viewport en la sección de documento <head> para habilitar el zoom táctil y asegurar que se muestre correctamente en dispositivos móviles. Incluye también X</p></div><h2>Pasos2Compatible con el modo edge del etiqueta meta, que informa a Internet Explorer de que se debe mostrar la página web en el modo más alto disponible.</h2><p>: Configure este archivo HTML como plantilla de Bootstrap-Para configurar este archivo HTML como plantilla de Bootstrap, simplemente agregue los archivos CSS y JS de Bootstrap correspondientes. Debe agregar el archivo JavaScript en la parte inferior de la página<a href="/tags/tag-body.php"></a>etiqueta (es decir) antes de cerrar, para mejorar el rendimiento de la página web.</p><div class="example_code"><label class="example_title">Ejemplo</label><pre><!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="utf-8">
　　　　<meta　http-equiv="X-UA-Compatible"　content="IE=edge">
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　　　<title>Plantilla básica de Bootstrap</title>
　　　　<link　rel="stylesheet"　type="text/css"　href="/static/style/bootstrap.min.css">
　　　　<!--　Tema opcional de Bootstrap　-->
　　　　<link　rel="stylesheet"　href="/static/style/bootstrap-theme.min.css">
</head>
<body>
　　　　<h1>Hello,　world!</h1>
　　　　<script　src="/static/script/jquery-1.11.3.min.js"></script>
　　　　<script　src="/static/script/bootstrap.min.js"></script>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-get-started-2.html" class="btn btn-success btn-run">Prueba para ver‹/›</a></div><p><strong>¡Estamos listos!</strong>Después de agregar los archivos CSS y JS de Bootstrap y la biblioteca jQuery necesaria, podemos comenzar a desarrollar cualquier sitio o aplicación utilizando el framework Bootstrap.</p><h2>Pasos3: Guardar archivo</h2><p>Ahora, guarde el archivo como "bootstrap-template.html</p><div class="alert alert-info"><p><strong>Nota:</strong>Es importante especificar la extensión .html-Algunos editores de texto (como Bloc de notas) guardan automáticamente la extensión .txt.</p></div><p>Abra el archivo en el navegador. Navegue a su archivo y luego haga doble clic en él. Se abrirá en su navegador web predeterminado. (Si no tiene uno, abra el navegador y arrastre el archivo dentro de él.)</p><h2>Incluir archivos de Bootstrap a través de CDN</h2><p>Si no desea descargar y alojar el archivo de inicio o jQuery, también puede usar los enlaces CDN (Content Delivery Network) gratuitos para incluir los archivos CSS y JavaScript del archivo de inicio y los archivos de la biblioteca jQuery JavaScript en el documento.</p><p>El CDN puede proporcionar una ventaja en el rendimiento al reducir el tiempo de carga, ya que alberga los archivos de Bootstrap en múltiples servidores distribuidos por todo el mundo y cuando el usuario solicita un archivo, se proporciona desde el servidor más cercano a ellos.</p><div class="example_code"><label class="example_title">Ejemplo</label><pre><!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="utf-8">
　　　　<title>Plantilla básica de Bootstrap</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　　　<link　rel="stylesheet"　href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"　integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"　crossorigin="anonymous">
　　　　<!--　Tema opcional de Bootstrap　-->
　　　　<link　rel="stylesheet"　href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"　integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"　crossorigin="anonymous">
</head>
<body>
　　　　<h1>Hello,　world!</h1>
　　　　<script　src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
　　　　<script　src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"　integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"　crossorigin="anonymous"></script>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-get-started-3.html" class="btn btn-success btn-run">Prueba para ver‹/›</a></div><p>Para implementar la integridad de recursos secundarios (SRI), en Bootstrap 
Se ha añadido la propiedad 'integrity' y 'crossorigin' en el CDN. Es una función de seguridad que reduce el riesgo de ataques provenientes de CDN dañados, asegurando que los archivos obtenidos por su sitio web (desde CDN o cualquier otro lugar) se entreguen sin operaciones inesperadas. Su mecanismo de funcionamiento permite proporcionar una huella digital encriptada que debe coincidir con el archivo obtenido.<br/></p><p>Las propiedades 'integrity' y 'crossorigin' se han agregado a la implementación de CDN<strong>Integridad de recursos secundarios</strong>(SRI). Es una función de seguridad que le permite asegurarse de que los archivos obtenidos a través del sitio (desde CDN u otros lugares) no han sido procesados de manera inesperada, reduciendo el riesgo de ataque al CDN. Funciona permitiéndole proporcionar una huella criptográfica que debe coincidir con el archivo leído.</p><div class="alert alert-success"><p><strong>Consejo:</strong>Si los visitantes de su sitio ya han descargado los archivos de Bootstrap de otro sitio mientras visitan, se cargará desde la caché del navegador en lugar de volver a descargar, lo que acorta el tiempo de carga.</p></div><div class="col-md-12 mb10 bg-ef"><a class="fr pre-xs-show-right" href="/bootstrap/bootstrap-environment-setup.html">Configuración del entorno de Bootstrap</a><a class="fl pre-xs-show-left" href="/bootstrap/bootstrap-tutorial.html">Tutoriales de Bootstrap</a></div>
</div>
<div class="col-md-2 col-md-right">
<div class="panel panel-default">
</div>
<div class="panel panel-default">
</div>
</div>
</div> 
</div>
<script src="/static/script/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/static/script/hljs/styles/vs.css">
<script src="/static/script/hljs/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
$(document).ready(function(){
  $(".menu-icon").click(function(){
	$(".col-md-left").toggle();
	event=arguments.callee.caller.arguments[0] || window.event;
	event.stopPropagation();	
});
if($(".col-md-left").css("display")=="none"){
	$("html,body").click(function(){
		$(".col-md-left").hide();
	});
	}
});</script>
<div class="copyright" id="footer"><div class="container"><div class="row"><div class="col-sm-12"><span>Derechos de autor ©2025 <a href="https://es.oldtoolbag.com">Tutoriales básicos</a> oldtoolbag.com</span></div></div></div></div><a class="gotop" href="#top" title="Volver al inicio" style="display: none;"><span class="arrow"></span><span class="arrow lit"></span></a>
<a class="gotop" href="#top" title="Volver al inicio" style="display: none;"><span class="arrow"></span><span class="arrow lit"></span></a>
<script src="/myjs/tongji.js"></script>
</body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="4d64ab6bd3094b6c26a2dc7f-|49" defer></script>