Ir al contenido principal

Buscar este blog

Entradas

Mostrando entradas de julio, 2014

Blockquotes

Estos elementos se emplean para incluir en tus páginas  trozos  de contenidos de otras fuentes. Utiliza el elemento  <blockquote>  para encerrar el contenido que se va a incluir en la página. También se recomienda utilizar el elemento  <p>  para encerrar el texto dentro del  <blockquote> .  Ejemplo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BlockQuote Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7....
Publicar un comentario
Leer más

Direcciones

Utiliza la etiqueta  <address>  para mostrar la información de contacto de tu sitio o página. No olvides añadir  <br>  al final de cada línea para mantener el texto de la dirección bien formateado.  Ejemplo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Direcciones Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/resp...
Publicar un comentario
Leer más

Iniciales

Bootstrap tiene una clase denominada  .initialism (la palabra proviene del ingles que significa iniciales), cuando se aplica esta clase a un elemento de tipo  <abbr>  reduce  ligeramente el tamaño de la letra y así hace que el texto pueda leerse mejor. Ejemplo de implementación:   <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Iniciales Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></scrip...
Publicar un comentario
Leer más

Abreviaturas

Las abreviaturas son interesantes en momentos ocasionales, tenemos la posibilidad de poder utilizar acrónimos utilizando la etiqueta  <abbr> ,   el diseño que le aplica Bootstrap es una pequeña linea punteada y al pasar el ratón se mostrará la definición siempre y cuando se le haya aplicado la propiedad title . Vemos un ejemplo de la implementación: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Abreviaturas Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="ht...
Publicar un comentario
Leer más

Textos

Indice de contenidos 1. Parrafo 2. Parrafo destacado 3. Texto pequeño (small) 4. Texto negrita 5. Texto cursiva 6. Alineación del texto 7. Color del texto Parrafo El tamaño de letra (font-size)  por defecto de Bootstrap 3 es de  14px  y el interlineado (line-height) es de  1.428 . Estos valores se aplican tanto al (body)  como a todos los párrafos. Estos últimos también incluyen un margen inferior cuyo valor es la mitad que su interlineado ( 10px  por defecto). Un ejemplo puede ser algo como lo siguiente: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Textos Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media=...
Publicar un comentario
Leer más

Etiquetas

Parece que Bootstrap incluye por defecto decenas de estilos predefinidos para las etiquetas así como para los textos. A continuación podemos ver la lista de etiquetas con su relación de tamaños. Tipo Tamaño h1 36px h2 30px h3 24px h4 18px h5 14px h6 12px <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Etiquetas Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- librerías opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss....
Publicar un comentario
Leer más

Plantilla básica Bootstrap

Lo primero que haremos será crear una plantilla básica de Bootstrap, nos servirá de base en los siguientes apartados del curso. Sin más hay va el código HTML. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Plantilla basica de Bootstrap</title> <!-- Estilos de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>¡Hola mundo Bootstrap!</h1> <!-- Libreria jQuery requerida por los plugins de JavaScript --> ...
Publicar un comentario
Leer más

Descarga y estructura de Bootstrap

Imagen
Para realizar una descarga oficial del framework Bootstrap dirigiros al siguiente enlace:  http://getbootstrap.com/ Clic sobre el botón "Download Bootstrap" y deberemos descargar la versión Bootstrap ya compilada y lista para usar. Veremos algo parecido a la siguiente imagen (a menos que hayan actualizado la web, si es así y alguien se da cuenta que deje un comentario y será actualizada.) Aparte del framework en sí que tenemos que descargar para realizar nuestros proyectos, podemos descargar el código fuente de este, con la posibilidad de modificarlo y compilarlo de nuevo.  Esta opción puede ser interesante más adelante para sacarla más partido al framework, pero primero nos centraremos en las cosas que ya permite y una vez que las dominemos determinaremos si es provechoso utilizar esta versión. También existe la versión alternativa a Less que usa Sass y parece que está adaptada para Rails o Compass, de momento este tipo de tecnología no se tratará en e...
Publicar un comentario
Leer más

Introducción a Bootstrap

Imagen
Twitter Bootstrap  es un  framework  o conjunto de herramientas utilizado  para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en  HTML  y  CSS , así como, extensiones de  JavaScript  adicionales. Resumiendo a groso modo podríamos decir, de una manera muy directa y tal vez algo optimista de que "nos lo da todo hecho". Este es la primera entrada sobre el framework, por motivos diversos siento la necesidad de aprender un motor de desarrollo potente de cara a construir sitios o aplicaciones web de la manera más productiva posible. Parece que Bootstrap ofrece los requerimientos demandados, a lo largo del desarrollo del curso nos iremos dando cuenta si de verdad este framework enriquecerá nuestras habilidades para construir sitios web. Algo de historia En 2011, Bootstrap se creó como solución interna para soluci...
Publicar un comentario
Leer más