Paso 1
Declaramos la estructura
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> |
Paso 2
llamado de Js y Css dentro de la etiqueta <head></head>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> </body> </html> |
Nota: los archivos Js, Css pueden tambien ser almacenado en sus carpetas que las identifique y ser llamados para evitar que sobre cargue la pagina.
Paso 3
Se encuentra 2 formas de crear estilo personalizado.
- En el head
- Creando un archivo custom.css
En este caso en el head se personaliza los estilos Css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css"> .span-text{ font-family: Arial; color: #FFFFFF; font-size: 43px; } img { vertical-align: middle; border-style: none; width: 107px !important; } .span-content-img{ color: #FFFFFF; margin: 16px; text-align: center !important; } </style> |
Paso 4
En el caso que se implemente un menu
se aplica en la etiqueta <body></body> para mas detalles puedes visitar el link navbar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3"> <div class="container-fluid"> <a href="#" class="navbar-brand mr-3"></a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Servicio</a> <a href="#" class="nav-item nav-link">Acerca de</a> <a href="#" class="nav-item nav-link">Contacto</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Registro</a> </div> </div> </div> </nav> |
Paso 5
Bajo la muestra de diseño, se genero la estructura en la pagina
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="container-fluid"> <div class="row"> <div class="col-md-12" style="background-color: #524596;width: 100% !important;height: 190px !important;margin-top: -15px;max-height: 100% important;"> <div class="row" style="width: 74%;margin-left: 14%;margin-top: 3%;"> <div class="col-lg-2"> <br> <span class="span-text">eittech</span> </div> <div class="col-lg-2 col-md-12"> <img src="img/blog_workpaper.png" class="img-responsive"> <span class="span-content-img">workpaper</span> </div> <div class="col-lg-2 col-md-12"> <img src="img/blog_ meetingreport.png" class="img-responsive"> <span class="span-content-img" style="margin: 2px;">meeting report</span> </div> <div class="col-lg-2 col-md-12"> <img src="img/blog_flowchart.png" class="img-responsive"> <span class="span-content-img" style="margin: 23px;">flowchart</span> </div> <div class="col-lg-2 col-md-12"> <img src="img/blog_documentation.png" class="img-responsive"> <span class="span-content-img">document</span> </div> <div class="col-lg-2 col-md-12"> <img src="img/blog_report.png" class="img-responsive"> <span class="span-content-img" style="margin: 29px;">report</span> </div> </div> </div> </div> </div> |
La etiqueta container-fluid
De esta forma las filas se alinean bien y muestran el padding
correcto.
Añadir Google Fonts en Bootstrap 4
Paso 1
Consultamos la pagina de Fonts Google en donde aparecen las distintas fuentes a utilizar. damos click en el boton [+] y aparece el link al igual que la linea de fuente.
Paso 2
Dentro de la etiqueta <head></head> declaramos el link de la fuente esta linea de fuente.
1 2 |
<!-- Add Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Satisfy&display=swap" rel="stylesheet"> |
Paso 3
Seguidamente, en cualquier etiqueta podemos añadir la fuente, en este caso se añade como ejemplo en la etiqueta h2 en el archivo custom.css
1 2 3 4 |
h2{ font-family: 'Indie Flower', cursive; font-family: 'Satisfy', cursive; } |
Paso 3
Refrescamos la pagina y listo.