Bootstrap 4 es la nueva versión de
Bootstrap, la cual es el más popular franmework HTML, CSS y Javascript para desarrollo web responsive, lo que significa que se adapta a cualquier tipo de pantalla (móviles, laptops, PCs…)
Bootstrap 4 es software libre, lo que significa que lo podemos usar en nuestros proyectos web.
Ejm
Este es un ejm del código que podemos encontrar en una página hecha con Bootstrap.
<div class="jumbotron text-center">
<h1>Mi primer ejm Bootstrap</h1>
<p>Este es mi primer ejemplo con Bootstrap</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Columna 1</h3>
<p>Ejemplo de párrafo 1</p>
</div>
<div class="col-sm-4">
<h3>Columna 2</h3>
<p>Ejemplo de párrafo 2</p>
</div>
<div clas="col-sm-4">
<h3>Columna 3</h3>
<p>Ejemplo de columna 3</p>
</div>
</div>
</div>
Diferencias entre Bootstrap 3 y Bootstrap 4
Bootstrap 4 es la nueva versión de Bootstrap, con nuevos componentes hojas de estilo más rápidas y mas responsive. Bootstrap soporta las últimas actualizaciones de los navegadores y plataformas, sin embargo, Internet Explorer 9 e inferiores no soportan Bootstrap 4.
Plantilla básica Bootstrap
Hemos creado una plantilla básica en Bootstrap para que podáis ir haciéndoos a la idea del poder de este framework.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap, ejm 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.fakeimg
{
height:200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1>Mi primera plantilla con Bootstrap</h1>
<p>Esta es mi primera plantilla con Bootstrap</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Nabvar</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="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</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>Foto de mí</h5>
<div class="fakeimg">Fake Image</div>
<p>Estoy aprendiendo a manejar el Framework Bootstrap</p>
<h3>Otros links</h3>
<p>Estos son otros links</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Link 7 (deshabilitado)</a>
</li>
</ul>
<hr class="d-sm-none" />
</div>
<div class="col-sm-8">
<h2>Cabecera del título</h2>
<h5>Descripción del título</h5>
<div class="fakeimg">Fake Image</div>
<p>Algún texto</p>
<p>Más texto que podríamos añadir</p>
<br />
<h2>Segunda cabecera del título</h2>
<h5>Descripción del segundo título</h5>
<div class="fakeimg">Fake Image segundo título</div>
<p>Algún texto para el segundo título</p>
<p>Más texto para este segundo título</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>Pie de la página</p>
</div>
</body>
</html>
Referencias Bootstrap
Pincha aquí para acceder a toda la lista de clases creadas para Bootstrap.