Aprenda Bootstrap 4 en 30 minutos creando un sitio web de página de destino

de templatetoaster

Una guía para principiantes.

“Bootstrap es una biblioteca front-end gratuita y de código abierto para diseñar sitios web y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS para todo, desde tipografía, formularios, botones, navegación y otros componentes de la interfaz, así como extensiones de JavaScript. A diferencia de muchos otros marcos web, Bootstrap se ocupa solo del desarrollo front-end ".
Hola, antes de comenzar, echa un vistazo a mi clase completa para aprender Bootstrap 4, donde aprenderás nuevas características de bootstrap y cómo usarlas para crear mejores experiencias de usuario.

Hay muchas versiones de Bootstrap, siendo la última la versión 4. En este artículo, vamos a construir un sitio web usando Bootstrap 4.

Prerrequisitos

Antes de comenzar, hay algunas habilidades que deberá conocer para aprender y usar el marco Bootstrap:

  • Fundamentos HTML
  • conocimiento básico de CSS
  • y algo de JQuery básico

Tabla de contenido

Cubriremos los temas a continuación mientras construimos el sitio web:

  • Descargar e instalar Bootstrap 4
  • Las nuevas características de Bootstrap 4
  • Sistema de cuadrícula Bootstrap
  • Barra de navegación
  • Encabezamiento
  • Botones
  • Sobre la sección
  • Sección de Portafolio
  • Sección de blog
  • Tarjetas
  • Sección de equipo
  • Formulario de contacto
  • Fuentes
  • Efecto de desplazamiento
  • Conclusión y conclusión

Descargar e instalar Bootstrap 4

Hay tres formas de instalar e incluir Bootstrap 4 para su proyecto:

  1. Use npm

Puede instalar Bootstrap 4 ejecutando este comando npm install bootstrap

2. Use una red de entrega de contenido (CDN)

Al incluir este enlace en su proyecto entre etiquetas principales:

3. Descargue la biblioteca Bootstrap 4 y úsela localmente.

La estructura de nuestro proyecto debería verse así:

Las nuevas características de Bootstrap 4

¿Qué hay de nuevo en Bootstrap 4? ¿Y qué es diferente entre Bootstrap 3 y 4?

Bootstrap 4 ahora viene con algunas características increíbles que no existían en la última versión:

  • Bootstrap 4 está escrito usando Flexbox Grid, mientras que Bootstrap 3 fue escrito usando el método float.
    Si es nuevo en Flexbox, consulte este tutorial.
  • Bootstrap 4 usa unidades rem CSS, mientras que Bootstrap 3 usa px.
    Vea cómo difieren estas dos unidades.
  • Paneles, miniaturas y pozos se han caído por completo.
    Puede leer en detalle más sobre los cambios globales y las características eliminadas de Bootstrap 4 aquí.

Sin entrar demasiado en los detalles aquí, pasemos a otras cosas importantes.

El sistema de cuadrícula Bootstrap

El sistema Bootstrap Grid lo ayuda a crear su diseño y crear fácilmente un sitio web receptivo. No ha habido ningún cambio en los nombres de clase, excepto la clase .xs, que ya no existe en Bootstrap 4.

La cuadrícula se divide en 12 columnas, por lo que su diseño se basará en esto.

Para usar el sistema de cuadrícula, deberá agregar una clase .row al div principal.

col-lg-2 // clase utilizada para dispositivos grandes como computadoras portátiles
col-md-2 // clase utilizada para dispositivos medianos como tabletas
col-sm-2 // clase utilizada para dispositivos pequeños como teléfonos móviles

Barra de navegación

El envoltorio de la barra de navegación es bastante bueno en Bootstrap 4. Es muy útil cuando se trata de construir una barra de navegación receptiva.

Para obtenerlo, vamos a agregar la clase navbar a nuestro archivo index.html:


 

Cree e incluya un archivo main.css para que pueda personalizar el estilo CSS.

Ponga esto dentro de la etiqueta principal en su archivo index.html:

Agreguemos algunos colores a nuestra barra de navegación:

.navbar {fondo: # F97300;}
.nav-link, .navbar-brand {color: # f4f4f4; cursor: puntero;}
.nav-link {margin-right: 1em! important;}
.nav-link: hover {background: # f4f4f4; color: # f97300; }
.navbar-collapse {justify-content: flex-end;}
.navbar-toggler {background: #fff! important;}

El nuevo Bootstrap Grid está construido con el sistema Flexbox, por lo que para la alineación, debe usar una propiedad Flexbox. Por ejemplo, para colocar el menú de la barra de navegación a la derecha, necesitamos agregar una propiedad justify-content y configurarlo en flex-end.

.navbar-collapse {
 justify-content: flex-end;
}

Agregue la clase .fixed-top a la barra de navegación para darle una posición fija.

Para que el color de fondo de la barra de navegación sea claro, agregue .bg-light. Para un fondo oscuro, agregue .bg-dark, y para un fondo azul claro, agregue
.bg-primario.

Así es como debería verse:

.bg-dark {
color de fondo: # 343a40! importante
}
.bg-primary {
color de fondo: # 007bff! importante
}

Encabezamiento

  

Intentemos crear un diseño para el encabezado.

Aquí, queremos asegurarnos de que el encabezado ocupe la altura de la ventana, por lo que vamos a utilizar un pequeño código JQuery.

Primero, cree un archivo llamado main.js e inclúyalo en el archivo index.html antes de la etiqueta de cierre del cuerpo:

En el archivo main.js inserte esto un pequeño código de JQuery:

$ (documento) .ready (función () {
 $ ('. header'). height ($ (window) .height ());
})

Sería genial si configuramos una buena imagen de fondo para el encabezado:

/ * estilo de encabezado * /
.encabezamiento{
 background-image: url ('../ images / headerback.jpg');
 adjunto de fondo: fijo;
 tamaño de fondo: cubierta;
 posición de fondo: centro;
}

Agreguemos una superposición para que el encabezado se vea un poco más profesional:

Agregue esto a su archivo index.html:

  

Luego, agregue esto a su archivo main.css:

.cubrir{
 posición: absoluta;
 altura mínima: 100%;
 ancho min: 100%;
 izquierda: 0;
 arriba: 0;
 antecedentes: rgba (244, 244, 244, 0,79);
}

Ahora tenemos que agregar una descripción dentro del encabezado.

Para ajustar nuestra descripción, primero crearemos un div y le daremos una clase .container.

.container es una clase Bootstrap que te ayudará a envolver tu contenido y hacer que tu diseño sea más receptivo:

  
   
        
  

Luego, agregue otro div que contendrá la descripción.

   

Hola, bienvenido a mi sitio web oficial     

cillum dolore eu fugiat nulla pariatur. Excepcional sint occasionecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Le daremos una clase de .description y agregaremos la clase .text-center para asegurarnos de que el contenido se coloca en el centro de la página.

Botones

Agregue la clase .btn btn-outline-secundaria al elemento del botón. Hay muchas otras clases de Bootstrap para botones.

Mira algunos ejemplos:

Así es como se ve el estilo de la descripción en el archivo main.css:

.descripción{
    posición: absoluta;
    arriba: 30%;
    margen: auto;
    acolchado: 2em;
}
.descripción h1 {
 color: # F97300;
}
.description p {
 color: # 666;
 tamaño de fuente: 20px;
 ancho: 50%;
 altura de línea: 1.5;
}
botón de descripción {
 borde: 1px sólido # F97300;
 fondo: # F97300;
 color: #fff;
}

Después de todo eso, nuestro encabezado se verá así:

Genial no es :).

Sobre la sección

En esta sección, utilizaremos un poco de Bootstrap Grid para dividir la sección en dos partes.

Para comenzar nuestra cuadrícula, tenemos que asignar la clase .row al div padre.

La primera sección estará a la izquierda y contendrá una imagen, la segunda sección estará a la derecha y tendrá una descripción.

Cada div ocupará 6 columnas, lo que significa la mitad de la sección. Recuerde que una cuadrícula se divide en 12 columnas.

En el primer div en el lado izquierdo:

 // lado izquierdo
          Desarrollador S.Web  

Después de agregar los elementos HTML en el lado derecho, la estructura del código se verá así:

   
          Desarrollador S.Web    
   
          

D.John

    

       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      temporizador incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo      consequat. Duis aute irure dolor en reprehenderit en voluptate velit esse      cillum dolore eu fugiat nulla pariatur. Excepteur sint occasionecat cupidatat non      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     

   
  

Así es como lo hice ver:

.acerca de{
 margen: 4em 0;
 relleno: 1em;
 posición: relativa;
}
.acerca de h1 {
 color: # F97300;
 margen: 2em;
}
.about img {
 altura: 100%;
    ancho: 100%;
    radio de borde: 50%
}
.sobre span {
 bloqueo de pantalla;
 color: # 888;
 posición: absoluta;
 izquierda: 115 px;
}
.about .desc {
 acolchado: 2em;
 borde izquierdo: 4px sólido # 10828C;
}
.about .desc h3 {
 color: # 10828C;
}
.about .desc p {
 altura de línea: 2;
 color: # 888;
}

Sección de Portafolio

Ahora, pasemos al siguiente bit y creemos una sección de cartera que contendrá una galería.

La estructura de nuestro código HTML para la sección Portafolio se ve así:


     

Portafolio

 
  
   
        
   
        
   
        
        
   
        
   
        
        
   
        
   
        
  
 

Agregar .img-fluido a cada imagen para que responda.

Cada elemento de nuestra galería ocupará 4 columnas (recuerde, col-md-4 para dispositivos medianos, col-lg-4 para dispositivos grandes). Eso equivale al 33.33333% en dispositivos grandes como computadoras de escritorio y tabletas grandes, y 12 columnas en un dispositivo pequeño (como iPhone, dispositivos móviles) ocuparán el 100% del contenedor.

Agreguemos un poco de estilo a nuestra Galería:

/*Portafolio*/
.portafolio{
 margen: 4em 0;
    posición: relativa;
}
.portfolio h1 {
 color: # F97300;
 margen: 2em;
}
.portfolio img {
  altura: 15rem;
  ancho: 100%;
  margen: 1em;
}

Sección de blog

Tarjetas

Las tarjetas en Bootstrap 4 hacen que el diseño del blog sea mucho más fácil. Las tarjetas son apropiadas para artículos y publicaciones.

Para crear una tarjeta, usamos la clase .card y la asignamos a un elemento div,

La clase de tarjeta contiene muchas características:

Entonces, el HTML de nuestro sitio web debería verse así:


 
 

Blog

  
   
    
     
            
           
     

Título de la publicación

      

               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       

     
          
   
   
    
     
            
           
        

Título de la publicación

      

               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       

     
          
   
   
    
     
            
           
     

Título de la publicación

      

               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       

     
          
   
  
 

Necesitamos agregar un poco de estilo CSS a las tarjetas:

.Blog{
 margen: 4em 0;
 posición: relativa;
}
.blog h1 {
 color: # F97300;
 margen: 2em;
}
.blog .card {
 box-shadow: 0 0 20px #ccc;
}
.blog .card img {
 ancho: 100%;
 altura: 12em;
}
.blog .card-title {
 color: # F97300;
  
}
.blog .card-body {
 relleno: 1em;
}

Después de agregar la sección Blog a nuestro sitio web, el diseño ahora debería verse así:

Genial, ¿no?

Sección de equipo

En esta sección, utilizaremos el sistema de cuadrícula para distribuir incluso el espacio entre las imágenes. Cada imagen ocupa 3 columnas (.col-md-3) del contenedor, lo que equivale al 25% del espacio total.

Nuestra estructura HTML:


 
    

Nuestro equipo

  
   
    team     
      Sara      
     Administrador    
   
    team     
       Chris      
     S.enginner    
   
    team     
      Layla      
     Desarrollador front-end    
   
    team      
      J.Jirard      
     Team Manager    
  
 

Y agreguemos un poco de estilo:

.equipo{
 margen: 4em 0;
 posición: relativa;
}
.team h1 {
 color: # F97300;
 margen: 2em;
}
.team .item {
 posición: relativa;
}
.team .des {
 fondo: # F97300;
 color: #fff;
 alinear texto: centro;
 radio de borde inferior izquierdo: 93%;
 transición: .3s facilidad de entrada;
}

Agregar una superposición a la imagen activada con animación sería bueno would.

Para hacer este efecto, agregue los siguientes estilos al archivo main.css:

.team .item: hover .des {
 altura: 100%;
 fondo: # f973007d;
 posición: absoluta;
 ancho: 89%;
 acolchado: 5em;
 arriba: 0;
 radio-borde-abajo-izquierda: 0;
}

¡Super guay!

Formulario de contacto

El Formulario de contacto es la última sección para agregar, luego terminamos .

La sección Formulario de contacto contendrá un formulario a través del cual los visitantes pueden enviar un correo electrónico o dar su opinión. Usaremos algunas clases de Bootstrap para hacer que el diseño sea hermoso y receptivo.

Al igual que Bootstrap 3, Bootstrap 4 también usa la clase .form-control para los campos de entrada, pero hay algunas características nuevas agregadas, como cambiar de .input-group-addon (en desuso) a .input-group-prepend (para usar íconos como etiquetas ).

Consulte el documento Bootstrap 4 para obtener más información. En nuestro formulario de contacto, ajustaremos cada entrada entre un div que tenga la clase .form-group.

El archivo index.html ahora se ve así:


 
  
   
    
      

Póngase en contacto

    
    
       
                 
       
                 
       
                 
            
   
  
 

Estilo de sección de contacto:

main.css

.Formulario de contacto{
 margen: 6em 0;
 posición: relativa;
}
.contact-form h1 {
 acolchado: 2em 1px;
 color: # F97300;
}
.contact-form .right {
 ancho máximo: 600px;
}
.contact-form .right .btn-secundario {
 fondo: # F97300;
 color: #fff;
 borde: 0;
}
.contact-form .right .form-control :: placeholder {
 color: # 888;
 tamaño de fuente: 16px;
}

Fuentes

Creo que las fuentes predeterminadas son feas, por lo que vamos a utilizar la API de fuentes de Google, y elegiremos Raleway, que es una buena fuente y apropiada para nuestra plantilla.

Agregue este enlace en su archivo main.css:

@import url ('https://fonts.googleapis.com/css?family=Raleway');

y establezca el estilo global en HTML y etiquetas de encabezado:

html, h1, h2, h3, h4, h5, h6, a {
 font-family: "Raleway";
}

Efecto de desplazamiento

Lo último que falta es el efecto de desplazamiento. Aquí, tendremos que usar un poco de JQuery. No se preocupe️ si no está familiarizado con él, solo agregue este código en su archivo main.js:

$ (". navbar a"). click (function () {
  $ ("body, html"). animate ({
   scrollTop: $ ("#" + $ (this) .data ('value')). offset (). top
  }, 1000)
  
 })

y agregue un atributo de valor de datos a cada enlace de la barra de navegación:


       
       
       ___________clase = "elemento-nav." < "> ídulo de navegación"> "
         
         Equipo 
       
       

Establecer un atributo de identificación para cada sección.

Nota: La identificación debe ser idéntica al atributo de valor de datos en el enlace de la barra de navegación para que el desplazamiento funcione:

Conclusión y conclusión

Bootstrap 4 es una excelente opción para crear su aplicación web. Ofrece elementos de interfaz de usuario de alta calidad y es fácil de personalizar, integrar y usar. También lo ayudará a incluir la capacidad de respuesta en su sitio web, por lo tanto, ofrecerá una experiencia de usuario premium a sus usuarios.

Encontrarás los archivos del proyecto en GitHub.

Si necesita algunos temas y plantillas de Bootstrap, puede consultar BootstrapBay, tienen algunos productos increíbles

Mira mi clase Bootstrap para aprender Bootstrap 4:

Ver también

Los errores más grandes que veo que hacen los diseñadores cuando solicitan un trabajo¿Qué es la propiedad de cuadrícula?Un simple truco de UI para mejorar Onboarding UX [OCD]Piensa menos. Diseña mejor.Cuando el diseño se encuentra con la ingeniería en Traveloka