Esta es una plantilla sencilla con Bootstrap 4. utilizando 4 columnas: 2 verticales y 2 horizontales y un menu bastante completo con Dropdown , Login, icono de home y icono de empresa.:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
* {
margin:0;
box-sizing: border-box;
}
</style>
<head>
<body>
<nav class="navbar sticky-top navbar-expand-md bg-dark navbar-dark justify-content-between">
<!-- Brand -->
<a class="navbar-brand" href="pruebaflex4.html"> <img class="nav-link" src="logo.jpg" width="80" height="50" alt=""></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse " id="collapsibleNavbar">
<div class="navbar-nav">
<a class="nav-item nav-link" href="pruebaflex.html"> <img src="ic_home_white_24dp_1x.png" alt="icon name" style="color:white"></a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link " href="#">Link</a>
</div>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="navbar-nav dropdown mr-auto">
<a class="nav-item nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Login</a>
</div>
</div>
</nav>
<!-- <div class="jumbotron text-center">
<h1 class="display-3">My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>-->
<div class="container">
<div class="row align-items-start justify-content-start" >
<div class="col-sm-8 p-2 " style="background-color:orange">
<h3 style="text-align: center">Column 1</h3>
<p>Hueros del xvxxxcclsos lsfljfsjfle jl lfj</p>
<p>Hueros del lsos lsfljfsjf" jl lfj</p>
<a href="pruebaflex.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p>
<p>Hueros del lsos lsfljf cxxcv xcsjfle jl lfj</p>
<p>Hueros del ls os lsfljfsjfle jl lfj</p>
<div class="container">
<div class="row " >
<div class="col-sm-6 p-1" >
<a href="pruebaflex4.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p></a>
</div>
<div class="col-sm-6 p-1" >
<a href="pruebaflex4.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p></a>
</div>
</div>
</div>
</div>
<div class="col-sm-4" >
<h3 style="text-align: center">Column 2</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<p>Hueros del xvxxxcclsos lsfljfsjfle jl lfj</p>
<p>Hueros del lsos lsfljfsjfle jl lfj</p>
<a href="pruebaflex.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p>
<p>Hueros del lsos lsfljf cxxcv xcsjfle jl lfj</p>
<p>Hueros del ls os lsfljfsjfle jl lfj</p>
</div>
</div>
<div class="row align-items-start justify-content-start mt-2" >
<div class="col-sm-4 p-2" style="background-color:red">
<a href="pruebaflex4.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p></a>
</div>
<div class="col-sm-4 p-2" style="background-color:red">
<a href="pruebaflex4.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p></a>
</div>
<div class="col-sm-4 p-2" style="background-color:red">
<a href="pruebaflex4.html"> <img src="Download.jpg" alt="icon name" width="90%" height="auto">
<p>Hueros del lsos lsfljfsjfle jl lfj</p></a>
</div>
</div>
<div class="row align-items-start justify-content-start" >
<div class="col-sm-12 mt-4 p-3" style="background-color:orange">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Comentarios
Publicar un comentario