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

15 mayo, 2014 Por oscar Deja un comentario

Bootply – El jsfidde para bootstrap

Bootply es una buena herramienta online y gratuita para realizar pruebas con nuestros desarrollos en Bootstrap.

Bootply - El jsfidde para bootstrap

En la página principal de Bootply podemos pulsar sobre el botón «Play Now» para probarlo y que veamos las características que tiene y los beneficios que nos ofrece a la hora de realizar un desarrollo sobre Bootstrap.

En la siguiente pantalla podemos hacernos una idea de las secciones o apartados de que dispone.

Bootply - El jsfidde para bootstrap

Para ver un poco las posibilidades de esta herramienta, vamos a pulsar sobre el enlace «Basic Starter» de la barra lateral izquierda, justo debajo de «Templates«.

Esto nos carga una plantilla básica que podemos ver en la siguiente captura:

En la parte inferior vemos la página web.

Si queremos ver cómo va quedando en un navegador web, podemos pulsar el botón de la pantall en la parte derecha.

Bootply - El jsfidde para bootstrap

Esto nos abre una nueva ventana de nuestro navegador y nos muestra esto:

Bootply - El jsfidde para bootstrap

Podemos redimensionar la pantalla para ver cómo va quedando y los cambios que sufre al disminuir el ancho de la ventana:

En la siguiente vemos que el menú ha desaparecido y en su lugar, ha aparecido un botón de menu en la parte superior derecha.

Bootply - El jsfidde para bootstrap

Si seguimos disminuyendo el ancho de la pantalla par que tenga un tamaño tipo smartphone vemos que los textos se adaptan:

Bootply - El jsfidde para bootstrap

En la siguiente captura he marcado las diferentes secciones: Javascript, Css y Html donde podremos añadir nuestro propio código en cada una de ellas.

Bootply - El jsfidde para bootstrap

Si sólo queremos probarlo, podemos hacerlo sin darnos de alta pero si queremos guardar nuestros proyectos, es mejor darnos de alta y para ello debemos pulsar sobre el botón «Login» situado en la parte superior derecha:

Bootply - El jsfidde para bootstrap

Como no tenemos cuenta todavía, debemos pulsar sobre el enlace: «New User? Sign-up…» y nos aparecerán los campos a rellenar para darnos de alta.

Bootply - El jsfidde para bootstrap

Una vez que hayamos realizado el sencillo proceso de alta, podemos entrar a nuestro panel y ver los proyectos que hemos ido creando.

En la siguiente captura vemos que hay un proyecto creado: «01 starter template«.

Bootply - El jsfidde para bootstrap

Bueno, lo dejamos aquí con la esperanza de que os haya sido de utilidad.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Bootstrap 3, programacion Etiquetado como: bootply, bootstrap

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