hola si queria saber como puedo integrar bootstrap

MC

como puedo integrar bootstrap a algun proyecto

21respuestas
Avatar

puedes descargar bootstrap entrando en la pagina oficial de bootstrap. y en tu proyecto incluir los archivos que necesitas para hacer funcionar a bootstrap que serian el css, javascript y listo. descargars los archivos de bootstrap en tu pc y lo pones en la carpeta de tu proyecto.

Avatar

Veo que preguntas desde el curso "Mi primera pagina Web".

En este caso, te podría recomendar que instales a bootstrap de la siguiente manera (porque hay otras maneras):

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
       integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <title>Importando Bootstrap</title>
</head>

<body>

   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
       crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
       integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
       crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
       integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
       crossorigin="anonymous"></script>
</body>

</html>

Como ves el codigo HTML, se importa por medio de un CDN (content distribution network / red de distribucion de contenidos):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
       integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Y luego, para usar algunos componentes que tiene bootstrap tipo tooltips, sliders, etc, se usa sus librerías de javascript:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
       crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
       integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
       crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
       integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
       crossorigin="anonymous"></script>

Lo demás ya sabes que es leer la documentación para que aprendas a usar las clases de bootstrap.

Avatar

Corrección* "Se usa las librerías javascript de Jquery, Popper y por ultimo la librería del propio Bootstrap"

MC

muchas gracias tenia una duda pero no es del tema esto integrado gulp y pug y al hacer las tareas en mi gulpfile para integrar el watch este es mi codigo me da este error

MC

hola no puedo subir fotos no se por que queria enviarte el error que me aparece

Avatar

pon las fotos con un link para descargar

MC

hola muchas gracias este es mi caso estoy integrando en gulp una tarea de watch para automaticamente este guardando los cambios y me da este error https://www.dropbox.com/s/ve4ej7xovgho73k/errorgulp.PNG?dl=0

Avatar

tu problema no es el gulp series ? ejemplo: agregar gulp.series en tu gulp.watch

gulp.watch('./devs/views/*.pug', gulp.series('pug'));

Avatar

Otra opción interesante seria manejarlo todo en funciones y al final tener juntas todas las tareas.

const gulp = require('gulp'),
   sass = require('gulp-sass'),
   autoprefixer = require('gulp-autoprefixer');

// Aqui armar las tareas en funciones
function sassCompiler() {
   return gulp.src('./scss/*.scss')
       .pipe(sass({
           outputStyle: "expanded",
           sourceComments: true
       }))
       .pipe(autoprefixer({
           versions: ['last 2 browsers']
       }))
       .pipe(gulp.dest('./css'), sass)
}

function otraTareaInteresante(){
   return console.log('otra tarea interesante')
}

// Aqui podrias seleccionar con gulp.series() todas las tareas que necesites compilar
function watcher() {
   return gulp.watch('./scss/*.scss', gulp.series(sassCompiler, otraTareaInteresante))
}

// Aqui podrias almacenar todas tus tareas
gulp.task('sassCompiler', sassCompiler)
gulp.task('otraTareaInteresante', otraTareaInteresante)
// Con esta tarea default ya sabes q solamente puedes usar "gulp" en la terminal y se ejecutara la funcion watcher.
gulp.task('default', watcher)
MC

les agradesco mucho estoy agradecido por que he ido ayando varias respuestas pero ala ves me a costado ir desarrollando saludos

MC

hola una consulta yo domino a un nivel medio css html y bootstrap que me ayudaria a encontrar un trabajo seguir todos los cursos de javascript ? o que me recomiendan?

Avatar

No te podria dar comentarios sobre temas de trabajo , ya que yo ando en ese tema de la forma de encontrar uno.

Lo que si te podría decir, es que las bases de la web son HTML, CSS y javascript. En tus conocimiento haría falta que empieces a ver ese tema de javascript. De todas formas, el consejo mas importante de mi poca experiencia, es que empieces a hacer proyectos personales con las cosas que ya sabes, y en cada proyecto que hagas, siempre aumentarle un grado de dificultad que te haga investigar cómo lograrlo. De poco en poco te vas haciendo mejor en tu especialidad y la practica te enseña muchísimo.

MC

y una duda mas que es mejor aprender webpack o laravel mix

Avatar

Uno no debe casarse con una tecnología. En realidad es bueno probar uno un tiempo y ver que tal te va, luego probar la otra alternativa y al final comparar y quedarte con la que mas te gusta. De todas maneras también es importante tomar en cuenta lo que piden las ofertas de trabajo (Investiga las ofertas de tu ciudad). Por ejemplo aquí en Perú no he visto en sus requerimientos a laravel mix, pero si a webpack.

MC

ok te agradesco si termino los cursos de java script en esta plataforma crees que estare apto ? y dos vengo de una mala experiencia en esa plataforma no sirve

Avatar

No te puedo decir si estarás apto o no. Solo te puedo aconsejar por el momento que empieces a hacer muchas practicas por tu cuenta, armar un portafolio con lo que sabes. Tratar de subir todo a tu github, gitlab o lo que uses.

A que plataforma te refieres?

MC

ahhh a es una basura de plataforma

Avatar

No puedo ver a que plataforma te refieres. Creo que aquí en la comunidad esta censurado poner nombres refiriéndose a otras plataformas, etc.

MC

ahhhh ok no sabia

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Android con Kotlin

Curso: Android con Kotlin

Conoce como implementar Kotlin en tus proyectos con android.