Aprende Informatica Conmigo

  • Inicio
  • Contenido Anterior
    • VIDEOTUTORIALES
    • Windows Server 2008
    • POWERSHELL

20 mayo, 2014 Por oscar Deja un comentario

Curso de Bootstrap 3 – 01 Introducción y primeros pasos

Con este tutorial comenzamos un nuevo «curso» en el que nos centraremos en la nueva versión de Bootstrap. En este caso la versión 3 y en el momento en el que estoy escribiendo esto la última versión es la «3.1.1«, como se puede ver en la captura siguiente:

No voy a explicar mucho sobre teoría ya que hay mucha por la web e incluso ya existen muchos libros sobre Bootstrap 2 y alguno sobre Bootstrap 3.

Para los que no sepáis lo que es, os diré que es un Framework CSS que nos va a permitir de manera relativamente sencilla, mejorar nuestras páginas web tanto en aspecto como en estructura.

Bien, vamos a empezar con lo que nos ocupa el día de hoy.

Primero vamos a descargar los ficheros necesarios y para ello iremos la página http://getbootstrap.com.

En la página principal disponemos de un botón o enlace «Download Bootstrap» que vamos a pulsar.

Curso de Bootstrap 3 - 01 Primeros pasos

Ahora tenemos a nuestra disp0sición varios botones para descargar bootstrap de diferentes formas pero nosotros vamos a hacerlo de la manera más sencilla por el momento y más adelante ya veremos las otras opciones.

Pulsamos sobre el primer botón: «Download Bootstrap«.

Curso de Bootstrap 3 - 01 Primeros pasos

Esto nos descargará el fichero «bootstrap-3.1.1-dist.zip» (la versión depende del momento en el que os la descargéis).

Si descomprimimos el fichero zip, deberíamos tener algo similar a esto:

Curso de Bootstrap 3 - 01 Primeros pasos

Antes de empezar a hacer nuestra primera página, no está de más echar un vistazo para ver el contenido de cada una de las carpetas.

En la carpeta principal es donde crearemos nuestro fichero «index.html» porque de momento no existe.

Lo que vemos es que hay 3 carpetas:

  • css
  • fonts
  • js

Curso de Bootstrap 3 - 01 Primeros pasos

Está claro qué es lo que hay en cada una pero para asegurarnos, abrimos cada una de ellas para ver el contenido:

Carpeta «css«:

Curso de Bootstrap 3 - 01 Primeros pasos

Carpeta «fonts«:

Curso de Bootstrap 3 - 01 Primeros pasos

Carpeta «js«:

Curso de Bootstrap 3 - 01 Primeros pasos

Bien, ya nos hacemos una idea de lo que hay en cada sitio y como ya sabemos defendernos un poco con HTML, vamos a realizar un página de prueba para ver cómo funciona bootstrap.

Para ello crearemos un fichero de texto vacío con el nombre «index.html» en la carpeta principal.

En este fichero copiaremos el código de ejemplo desde: http://getbootstrap.com/getting-started/#template

Lo pongo a continuación para facilitar el trabajo:

<code><!DOCTYPE html>
<html lang="en">
  <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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html></code>

Si abrimos el fichero «index.html» en un navegador web, debería mostrar algo como esto:

Curso de Bootstrap 3 - 01 Primeros pasos

Podéis ver el resultado de este ejemplo aquí.

Ya, ya se que no es muy bonita ni nada por el estilo, es nuestro primer intento con bootstrap 3 y en posteriores tutoriales haremos más cosas, por supuesto.

Recordar que Bootstrap hace uso de la librería JQuery.

De momento lo dejamos aquí.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Bootstrap 3 Etiquetado como: bootstrap, css, desarrollo web, framework

Acerca de oscar

Programador WordPress freelance

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Hazte con el tema Divi

Divi WordPress Theme
Libro windows server 2008

Libro certificación Windows Server 2016

Libro certificación Windows Server 2016

Libro Windows Server 2016

Libro Windows Sever 2016
Web Hosting

Últimos artículos

  • PHP función var_dump(): Mostrar el contenido de una variable
  • PHP función unset(): Eliminar variables
  • MySQL LIMIT: Limitar la canidad de filas en una consulta
  • PHP función isset(): Evaluar si una variable está definida
  • PHP función empty(): Comprobar si una variable está vacía
  • MySQL SELECT DISTINCT para encontrar registros con diferente valor en el mismo campo
  • Los mejores libros en español para aprender WordPress

Mis Webs

  • Aprende Informática Conmigo
  • Dinapyme
  • MUSIKP
  • Oscar Abad Folgueira

Proyectos

  • Basabe Baserria
  • Batukada Battuere
  • Bicicletas Sin Pedales
  • Bordalan
  • C.R. Pantano del Rumblar
  • Dinapyme
  • DiverBiblio
  • Egia Ingenieros
  • Hermanos Vivas construcciones
  • Ibartxi – Suministros de Gas y Soldadura
  • LANBASE
  • LS Fotografía
  • Luke and Phil
  • Masajes Mas Sana
  • MUSIKP
  • Oh! Yeah Dev
  • Oscar Abad Folgueira
  • Participación ciudadana Basauri
  • Restaurante Bideko
  • Taldesport
  • Vicente Choya
  • WooCommerce Knowledge2K
  • Inicio
  • Contenido Anterior

Copyright © 2023 · Oscar Abad Folgueira Y DINAPYME· Acceder