Tutoriales Bootstrap Básicos

Plugins Bootstrap

Introducción a los complementos de Bootstrap Well de Bootstrap

Crear una página web con Bootstrap

A continuación, usaremos Bootstrap3 para crear un sitio web simple y responsive.

Antes de aprender, podemos ver primero el efecto:https://es.oldtoolbag.com/ejecutar/html/bootstrap-primer-sitio-demo.html

Código HTML

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title> Ejemplo Bootstrap　-　un sitio web simple</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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 página de Bootstrap</h1>
　　<p>¡Ajuste el tamaño de la ventana del navegador para ver el efecto!</p>　
</div>
<nav class="navbar navbar-inverse">
　　<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　</button>
　　　　　　<a class="navbar-brand" href="#">Nombre del sitio</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="myNavbar">
　　　　　　<ul class="nav navbar-nav>
　　　　　　　　<li class="active"><a href="#">Página principal</a></li>
　　　　　　　　<li><a href="#">Página　2</a></li>
　　　　　　　　<li><a href="#">Página　3</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</nav>
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h2>Acerca de mí</h2>
　　　　　　<h5>Mi foto:</h5>
　　　　　　<div class="fakeimg">Aquí se inserta la imagen</div>
　　　　　　<p>Introducción sobre mí..</p>
　　　　　　<h2>Enlace</h2>
　　　　　　<p>Texto de descripción.</p>
　　　　　　<ul class="nav nav-pills nav-stacked">
　　　　　　　　<li class="active"><a href="#">Enlace　1</a></li>
　　　　　　　　<li><a href="#">Enlace　2</a></li>
　　　　　　　　<li><a href="#">Enlace　3</a></li>
　　　　　　</ul>
　　　　　　<hr class="hidden-sm hidden-md hidden-lg">
　　　　</div>
　　　　<div class="col-sm-8">
　　　　　　<h2>Título</h2>
　　　　　　<h5>Subtítulo</h5>
　　　　　　<div class="fakeimg">Imagen</div>
　　　　　　<p>Algunos textos.../p>
　　　　　　<p>Web de tutoriales básicos, aprender bien, ¡puedes ir más lejos!!! Web de tutoriales básicos, aprender bien, ¡puedes ir más lejos!!! Web de tutoriales básicos, aprender bien, ¡puedes ir más lejos!!!</p>
　　　　　　<br>
　　　　　　<h2>Título</h2>
　　　　　　<h5>Subtítulo</h5>
　　　　　　<div class="fakeimg">Imagen</div>
　　　　　　<p>Algunos textos.../p>
　　　　　　<p>Web de tutoriales básicos, aprender bien, ¡puedes ir más lejos!!! Web de tutoriales básicos, aprender bien, ¡puedes ir más lejos!!! Web de tutoriales básicos, aprender bien, ¡puedes ir más lejos!!!</p>
　　　　</div>
　　</div>
</div>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<p>Contenido inferior</p>
</div>
</body>
</html>

Prueba aquí ‹/›

Introducción a los complementos de Bootstrap Well de Bootstrap