Una guía para principiantes

“Bootstrap es una biblioteca front-end de código abierto y gratuita 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 únicamente del desarrollo front-end ". - Wikipedia Hola, antes de empezar, echa un vistazo a mi clase completa para aprender Bootstrap 4, donde aprenderás nuevas funciones de bootstrap y cómo usarlas para crear mejores experiencias de usuario.

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

Prerrequisitos

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

• Fundamentos de HTML
• conocimientos básicos de CSS
• y algo de JQuery básico

Tabla de contenido

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

• Descarga e instalación de Bootstrap 4
• Las nuevas características de Bootstrap 4
• Sistema Bootstrap Grid
• Barra de navegación
• Encabezamiento
• Botones
• Acerca de la sección
• Sección de cartera
• Sección Blog
• Tarjetas
• Sección de equipo
• Formulario de contacto
• Fuentes
• Efecto de desplazamiento
• Resumen y conclusión

Descarga e instalación de Bootstrap 4

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

1. Utilice npm

Puede instalar Bootstrap 4 ejecutando este comando npm install bootstrap

2. Utilice una red de distribución de contenido (CDN)

Al incluir este enlace en su proyecto entre las etiquetas de la cabeza:

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 remunidades CSS mientras que Bootstrap 3 usa px.

  Vea en qué se diferencian estas dos unidades.

• Los paneles, miniaturas y pozos se han eliminado 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 detalles aquí, pasemos a otras cosas importantes.

El sistema Bootstrap Grid

El sistema Bootstrap Grid lo ayuda a crear su diseño y construir fácilmente un sitio web receptivo. No ha habido cambios en los nombres de las clases, excepto la .xsclase, que ya no existe en Bootstrap 4.

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

Para usar el sistema de cuadrícula, tendrá que agregar una .rowclase al div principal .

col-lg-2 // class used for large devices like laptops col-md-2 // class used for medium devices like tablets col-sm-2// class used for small devices like mobile phones

Barra de navegación

El contenedor 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 conseguirlo, vamos a agregar la navbarclase a nuestro index.htmlarchivo:

  Home 
 About 
 Portfolio 
 Blog 
  Team 
 Contact 

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

Pon esto dentro de la headetiqueta en tu index.htmlarchivo:

Agreguemos algunos colores a nuestra barra de navegación:

.navbar{ background:#F97300;} .nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;} .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, debemos agregar una justify-contentpropiedad y establecerla en flex-end.

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

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

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

.bg-primary.

Así es como debería verse:

.bg-dark{ background-color:#343a40!important } .bg-primary{ background-color:#007bff!important }

Encabezamiento

Intentemos crear un diseño para el encabezado.

Aquí, queremos asegurarnos de que el encabezado ocupe la altura de la ventana, así que vamos a usar un pequeño JQuerycódigo.

Primero, cree un archivo con nombre main.jse inclúyalo en elindex.htmlarchivoantes de la bodyetiqueta de cierre :

En el main.jsfile insert this a little code of JQuery:

$(document).ready(function(){ $('.header').height($(window).height()); })

It’d be pretty cool if we set a nice background image to the header:

/*header style*/ .header{ background-image: url('../images/headerback.jpg'); background-attachment: fixed; background-size: cover; background-position: center; }

Let’s add an overlay to make the header look a bit more professional:

Add this to your index.html file:

Then, add this to your main.css file:

.overlay{ position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.79); }

Now we have to add a description inside the header.

To wrap our description we’re first going to create a div and give it a class .container.

.container is a Bootstrap class that will help you to wrap your content and make your layout more responsive:

Then, add another div which will contain the description.

 Hello ,Welcome To My official Website 
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 See more 

We’ll give it a class of .description and add the .text-center class to make sure the content is placed in the center of the page.

Buttons

Add the class .btn btn-outline-secondary to the button element. there are many other Bootstrap classes for buttons.

Check some examples:

CodePen Embed — buttons in Bootstrap 4

Buttons Button primary Button default Button danger Button info Button warning Button dark Button success Buttons…codepen.io

Here’s how the styling for the .description looks in the main.css file:

.description{ position: absolute; top: 30%; margin: auto; padding: 2em; } .description h1{ color:#F97300 ; } .description p{ color:#666; font-size: 20px; width: 50%; line-height: 1.5; } .description button{ border:1px solid #F97300; background:#F97300; color:#fff; }

After all of that, our header will look like this:

Cool isn’t :).

About Section

In this section, we will use some Bootstrap Grid to divide the section into two parts.

To start our grid, we have to assign the.rowclass to the parent div.

The first section will be on the left and will contain a picture, the second section will be on the right and contain a description.

Each div will take up 6 columns — that means half of the section. Remember that a grid is divided into 12 columns.

In the first div on the left side:

 // left side  S.Web Developer 

After adding the the HTML elements on the right-side, the structure of the code will look like this:

 S.Web Developer 
D.John
 ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

Here’s how I’ve made it look:

.about{ margin: 4em 0; padding: 1em; position: relative; } .about h1{ color:#F97300; margin: 2em; } .about img{ height: 100%; width: 100%; border-radius: 50% } .about span{ display: block; color: #888; position: absolute; left: 115px; } .about .desc{ padding: 2em; border-left:4px solid #10828C; } .about .desc h3{ color: #10828C; } .about .desc p{ line-height:2; color:#888; }

Portfolio Section

Now, let’s move onto the next bit and make a portfolio section that will contain a gallery.

The structure of our HTML code for the Portfolio section looks like this:

Portfolio

Adding .img-fluid to each image to makes it responsive.

Each item in our gallery will take up 4 columns (remember, col-md-4 for medium devices, col-lg-4 for large devices). That’s equal to 33.33333%on large devices such desktops and large tablets, and 12 columns on a small device (like iPhone, mobile devices) will take up 100% of the container.

Let’s add some styling to our Gallery:

/*Portfolio*/ .portfolio{ margin: 4em 0; position: relative; } .portfolio h1{ color:#F97300; margin: 2em; } .portfolio img{ height: 15rem; width: 100%; margin: 1em; }

Blog Section

Cards

Cards in Bootstrap 4 make blog design so much easier. The cards are appropriate for articles and posts.

To create a card, we use the class .cardand assign it to a div element,

The card class contains many features:

• .card-header: define the card header
• .card-body:for the card body
• .card-title: the title of the card
• card-footer:define the footer of the card.
• .card-image: for the card’s image

So, our website’s HTML should now look something like this:

Blog
Post Title
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 Read more 
Post Title
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 Read more 
Post Title
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 Read more 

We need to add some CSS style to the cards:

.blog{ margin: 4em 0; position: relative; } .blog h1{ color:#F97300; margin: 2em; } .blog .card{ box-shadow: 0 0 20px #ccc; } .blog .card img{ width: 100%; height: 12em; } .blog .card-title{ color:#F97300; } .blog .card-body{ padding: 1em; }

After adding the Blog section to our website, the design should now look something like this:

Cool isn’t it? ?

Team Section

In this section we will use the grid system to distribute even space between images. Each image takes up 3 columns (.col-md-3) of the container — that equals 25% of the total space.

Our HTML structure:

Our Team
 Sara Manager  Chris S.enginner  Layla Front End Developer  J.Jirard Team Manger 

And let’s add some style:

.team{ margin: 4em 0; position: relative; } .team h1{ color:#F97300; margin: 2em; } .team .item{ position: relative; } .team .des{ background: #F97300; color: #fff; text-align: center; border-bottom-left-radius: 93%; transition:.3s ease-in-out; }

Adding an overlay to the image on-hover using animation would be nice ?.

To make this effect , add the styles below to main.css file:

.team .item:hover .des{ height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; }

Super cool! ?

Contact Form

The Contact Form is the last section to add, then we are done ?.

The Contact Form section will contain a form through which visitors can send an email or give feedback. We will use some Bootstrap classes to make the design beautiful and responsive.

Like Bootstrap 3, Bootstrap 4 also uses the .form-control class for input fields, but there are some new features added — like switching from .input-group-addon(deprecated) to .input-group-prepend(to use icons as labels ).

See Bootstrap 4 document for more information. In our Contact form we will wrap each input between a div that has the class.form-group.

The index.html file now looks something like this:

Get in Touch

Contact section’styles :

main.css

.contact-form{ margin: 6em 0; position: relative; } .contact-form h1{ padding:2em 1px; color: #F97300; } .contact-form .right{ max-width: 600px; } .contact-form .right .btn-secondary{ background: #F97300; color: #fff; border:0; } .contact-form .right .form-control::placeholder{ color: #888; font-size: 16px; }

Fonts

I think default fonts are ugly so we are going to use the Google Font API, and we’ll choose Raleway which is a nice font and appropriate to our template.

Add this link into your main.css file:

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

and set the global style to HTML and heading tags:

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

Scroll Effect

The last thing missing is scroll effect. Here, we’ll have to use some JQuery. Don’t worry️ if you are not familiar with it, just add this code into yourmain.jsfile:

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

and add a data-value attribute to each navbar link:

 About 
 Portfolio 
 Blog 
  Team 
 Contact 

Set an id attribute to each section.

Nota : idDebe ser idéntico al data-valueatributo en el enlace de la barra de navegación para que funcione el desplazamiento:

Resumen 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 utilizar. También le ayudará a incluir la capacidad de respuesta en su sitio web, ofreciendo así una experiencia de usuario superior 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

Echa un vistazo a mi clase de Bootstrap para aprender Bootstrap 4:

Curso intensivo Bootstrap 4: básico para avanzar | Said Hayani | Habilidad compartida

En esta clase, aprenderá la versión 4 de bootstrap, el marco CSS para crear plantillas flexibles y… skl.sh