Bootstrap – eittech Blog

Paso 1

Declaramos la estructura

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Paso 2

llamado de Js y Css dentro de la etiqueta <head></head>

<!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>

<!DOCTYPE html>

<html>

<head>

</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

<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>

.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

<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>

</button>

<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>

<a href="#" class="nav-item nav-link">Registro</a>

</div>

</nav>

Paso 5

Bajo la muestra de diseño, se genero la estructura en la pagina

<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>

<br>

<span class="span-text">eittech</span>

</div>

<span class="span-content-img">workpaper</span>

</div>

<span class="span-content-img" style="margin: 2px;">meeting report</span>

</div>

<span class="span-content-img" style="margin: 23px;">flowchart</span>

</div>

<span class="span-content-img">document</span>

</div>

<span class="span-content-img" style="margin: 29px;">report</span>

</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.

<!-- Add Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Satisfy&display=swap" rel="stylesheet">

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

h2{
		font-family: 'Indie Flower', cursive;
		font-family: 'Satisfy', cursive;
	}

h2{

font-family: 'Indie Flower', cursive;

font-family: 'Satisfy', cursive;

}

Paso 3

Refrescamos la pagina y listo.

Etiqueta: Bootstrap

Pasos para crear template con Bootstrap