Bootstrap4 crea una página web
A continuación, crearemos una página web receptiva simple con Bootstrap4.
Antes de aprender, podemos ver el efecto:https://www.example.com/try/demo_source/bootstrap3-makewebsite.htm
Código HTML
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Mi primera página de Bootstrap 4</h1>
<p>¡Restablece el tamaño de la ventana del navegador para ver el efecto!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navegación</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Enlace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enlace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enlace</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>Sobre mí</h2>
<h5>Mi foto:</h5>
<div class="fakeimg">Insertar imagen aquí</div>
<p>Introducción sobre mí..</p>
<h3>Algunos enlaces</h3>
<p>Texto de descripción</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Estado activo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enlace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enlace</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Deshabilitado</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Título</h2>
<h5>Subtítulo</h5>
<div class="fakeimg">Imagen</div>
<p>Algún texto..</p>
<p>Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños! Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños! Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños!</p>
<br>
<h2>Título</h2>
<h5>Subtítulo</h5>
<div class="fakeimg">Imagen</div>
<p>Algún texto..</p>
<p>Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños! Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños! Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños!</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Contenido del pie de página</p>
</div>
Pruébalo »