Existen varias formas diferentes de empezar con Bootstrap, cada una orientada a un tipo de público en función de su nivel técnico.
Actualmente es posible acceder a internet de manera continua. Por tal motivo se utilizara la opcion de CDN.
Se usaran los recursos CDN de jsdelivr.net, a continuación se presentan los elementos necesarios, asi como su función:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!--
CSS Iconos Hoja de estilos del conjunto de iconos de Bootstrap.
Proporciona iconos vectoriales para utilizar en la página.
-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- CSS Hojas de estilos de Bootstrap.
Proporciona estilos predefinidos para layouts, componentes y elementos HTML.
El atributo integrity especifica la huella digital (hash) del archivo para verificar su integridad.
El atributo crossorigin permite que el navegador solicite el recurso desde un origen diferente.
-->
<link rel="stylesheet" href="https://bootswatch.com/3/darkly/bootstrap.min.css">
<!-- CSS Hoja de estilos de una variante de Bootstrap llamada Darkly, que ofrece un tema oscuro.
Sobrescribe algunos estilos de Bootstrap para adaptarlos al tema Darkly.
-->
<!-- ******************************************************************************************************* -->
<!-- ******************************************************************************************************* -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- SCRIPT Libreria JavaScript JQuery 3.7.1 ,
Proporciona funcionalidades para manipular el DOM, eventos y AJAX.
-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- SCRIPT Libreria JavaScript Bootstrap 3.4.1,
Requiere JQuery
Proporciona funcionalidades para componentes interactivos como acordeones, modales y menús desplegables.
El atributo integrity y crossorigin tienen el mismo propósito de confirmar que el contenido del archivo es correcto.
-->
Esta es la plantilla basica
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" >
<!-- ***** SECCION ESTILOS CSS PARA BOOTSTRAP ***************************** -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link id="tema_Activo" rel="stylesheet" href="https://bootswatch.com/3/darkly/bootstrap.min.css">
<!-- ***** SECCION JAVASCRIPT PARA BOOTSTRAP ****************************** -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<!-- ************* SECCION DEL CUERPO HTML ************* -->
<!-- ********* SELECT PARA CAMBIAR EL TEMA ************* -->
<div class="row"> <!-- Clase para renglon -->
<div class="col-xs-4"> <!-- Clase para 4 columnas-->
<select id="select_Tema" class="form-control" title="Tema para Bootstrap" >
<option value="" disabled>--NEGROS--</option>
<option value="Dark">Dark</option>
<option value="State">State</option>
<option value="Cyborg">Cyborg</option>
<option value="" disabled>--BLANCOS--</option>
<option value="Readable">Readable</option>
<option value="Cerelean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Lumen">Lumen</option>
<option value="Paper">Paper</option>
</select>
</div>
<div class="col-xs-8"> <!--Clase para 8 columnas -->
<center><h4>Codigo para pruebas </h4></center>
</div>
</div>
<p class="h6 text-uppercase">Botones</p>
<p class="bs-component">
<button class="btn btn-default">btn-default</button>
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
</p>
<p class="h6 text-uppercase">Tamaño de botones</p>
<p class="bs-component">
<button class="btn btn-primary btn-lg">btn-lg</button>
<button class="btn btn-primary">Default </button>
<button class="btn btn-primary btn-sm">btn-sm button</button>
<button class="btn btn-primary btn-xs">btn-xs button</button>
</p>
<p class="h6 text-uppercase">Tamaño de Fuentes</p>
<div class="bs-component">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
<p class="h6 text-uppercase">Clases de texto</p>
<div class="bs-component">
<p class="text-muted">class="text-muted" Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">class="text-primary" Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-warning">class="text-warning" Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">class="text-danger" Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">class="text-success" Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">class="text-info" Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<script>
//***** SECCION PARA VARIABLES Y CONSTANTES EXTERNAS / GLOBALES ****
//**************** SECCION PAGINA ESTE COMPLETAMENTE CARGADA *******
document.addEventListener('DOMContentLoaded', () =>
{ console.log("Pagina cargada y lista");
// Funcion que agrupara todos los eventos
escucharElementos();
});
//************* SECCION PARA INTERCEPTORES DE EVENTOS ***************
function escucharElementos()
{
document.getElementById('select_Tema').addEventListener('change', (evento) => { actualizarTema();});
//Otros objeto del DOM y su respectivos eventos
//...
}
//******************** SECCION DE FUNCIONES *************************
function actualizarTema()
{
let select_Tema = document.getElementById('select_Tema').value;
let css_Tema ='';
switch (select_Tema)
{
case 'Cerulean':css_Tema ='https://bootswatch.com/3/cerulean/bootstrap.min.css'; break;
case 'Cosmo' : css_Tema ='https://bootswatch.com/3/cosmo/bootstrap.min.css';break;
case 'Dark': css_Tema ='https://bootswatch.com/3/darkly/bootstrap.min.css'; break;
case 'Cyborg': css_Tema ='https://bootswatch.com/3/cyborg/bootstrap.min.css'; break;
case 'Flatly': css_Tema ='https://bootswatch.com/3/flatly/bootstrap.min.css'; break;
case 'Journal': css_Tema ='https://bootswatch.com/3/journal/bootstrap.min.css'; break;
case 'Lumen': css_Tema ='https://bootswatch.com/3/lumen/bootstrap.min.css'; break;
case 'Paper': css_Tema ='https://bootswatch.com/3/paper/bootstrap.min.css'; break;
case 'Readable': css_Tema ='https://bootswatch.com/3/readable/bootstrap.min.css'; break;
case 'State': css_Tema ='https://bootswatch.com/3/slate/bootstrap.min.css'; break;
case '': css_Tema =''; break;
case '': css_Tema =''; break;
case '': css_Tema =''; break;
case '': css_Tema =''; break;
}
document.getElementById('tema_Activo').href =css_Tema;
};
//********************************************************************
//FIN DEL SCRIPT
</script>
</body>
</html>
Prueba cambiando el tema [Select que dice Dark]
Objetivo: Copia y analiza el codigo.