Skip to content
Logo de la documentación HoneyCode

Bootstrap

Bootstrap Configuración

Section titled “Bootstrap ”

Instalación Paso 1

Section titled “Instalación ”
Terminal window
npm install bootstrap @popperjs/core

Integración Paso 2

Section titled “Integración ”

HTML Básico

Section titled “HTML Básico”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="path/to/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <h1>¡Hola Bootstrap!</h1>
</div>


<script src="path/to/bootstrap.bundle.min.js"></script>
</body>
</html>

Vue.js

Section titled “Vue.js”
App.vue
<template>
<div class="container">
  <button class="btn btn-primary">Botón Bootstrap</button>
</div>
</template>


<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'


export default {
name: 'App'
}
</script>

Angular

Section titled “Angular”
// angular.json
{
"projects": {
  "your-app": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
          "scripts": [
            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
          ]
        }
      }
    }
  }
}
}


// app.component.html
<div class="container">
<button class="btn btn-primary">Botón Bootstrap</button>
</div>

Personalización Paso 3

Section titled “Personalización ”

SASS

Section titled “SASS”
styles/custom.scss
// Tus variables personalizadas
$primary: #1a365d;
$secondary: #2d3748;
$border-radius: 1rem;


// Importar Bootstrap
@import "~bootstrap/scss/bootstrap";


// Tus estilos personalizados
.btn-custom {
@extend .btn;
@extend .btn-primary;
padding: 1rem 2rem;
}

Variables CSS

Section titled “Variables CSS”
styles/custom.css
:root {
--bs-primary: #1a365d;
--bs-secondary: #2d3748;
--bs-border-radius: 1rem;
}


/* Personalizar componentes específicos */
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: #0d2235;
}

Configuración de Componentes Paso 4

Section titled “Configuración de Componentes ”

JavaScript Initialization

Section titled “JavaScript Initialization”
// Tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el))


// Popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el))


// Modal
const myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false,
backdrop: 'static'
})

Optimización para Producción Paso 5

Section titled “Optimización para Producción ”

Importar solo los componentes necesarios

Section titled “Importar solo los componentes necesarios”
// Importar solo los componentes que necesitas
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';


// SCSS modular
// styles/custom.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";


// Solo los componentes necesarios
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/card";

Grid System Fundamental

Section titled “Grid System ”
<div class="container">
  <div class="row">
    <!-- Columnas responsivas -->
    <div class="col-12 col-md-6 col-lg-4">
      Columna 1
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      Columna 2
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      Columna 3
    </div>
  </div>
</div>

Mejores Prácticas Recomendado

Section titled “Mejores Prácticas ”

Estructura de Archivos

Section titled “Estructura de Archivos”
src/
├── styles/
│   ├── custom.scss     # Personalización de Bootstrap
│   └── variables.scss  # Variables personalizadas
├── js/
│   └── bootstrap.js    # Inicialización de componentes

Uso de Utilidades

Section titled “Uso de Utilidades”
<!-- ✅ Bueno: Uso de utilidades de Bootstrap -->
<div class="d-flex justify-content-between align-items-center p-3 bg-light rounded">
  <h2 class="mb-0">Título</h2>
  <button class="btn btn-primary">Acción</button>
</div>

Componentes Personalizados

Section titled “Componentes Personalizados”
styles/custom.scss
.card-custom {
@extend .card;
border-radius: $border-radius-lg;
box-shadow: $box-shadow-sm;


.card-header {
  background-color: $primary;
  color: $white;
}
}
🐝