bootstrap – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Thu, 11 Aug 2016 01:59:41 +0000 es hourly 1 https://wordpress.org/?v=5.6.16 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png bootstrap – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Slider en Bootstrap https://programacionextrema.com/2015/11/28/slider-en-bootstrap/ https://programacionextrema.com/2015/11/28/slider-en-bootstrap/#comments Sat, 28 Nov 2015 19:59:34 +0000 http://programacionextrema.com/?p=806 En este sencillo tutorial aprenderemos a crear nuestro propio slider en Bootstrap. Una de las ventajas de utilizar Bootstrap es que nos permite hacer una página totalmente responsive para que se pueda ajustar correctamente en dispositivos móviles y tablets. ¿Cómo crear un slider en Bootstrap? Un slider o carousel en Bootstrap se puede crear de… Read More

La entrada Slider en Bootstrap aparece primero en ProgramaciónExtrema.com.

]]> En este sencillo tutorial aprenderemos a crear nuestro propio slider en Bootstrap. Una de las ventajas de utilizar Bootstrap es que nos permite hacer una página totalmente responsive para que se pueda ajustar correctamente en dispositivos móviles y tablets.

¿Cómo crear un slider en Bootstrap?

Un slider o carousel en Bootstrap se puede crear de varias formas, una de ellas es solamente mediante código HTML como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Slider en Bootstrap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/slide1.png" alt="First Slide">
          <div class="carousel-caption">
            <h3>Título de la primera diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
        <div class="item">
          <img src="images/slide2.png" alt="Second Slide">
          <div class="carousel-caption">
            <h3>Título de la segunda diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
        <div class="item">
          <img src="images/slide3.png" alt="Third Slide">
          <div class="carousel-caption">
            <h3>Título de la tercera diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </body>
</html>

Antes de probar el ejemplo anterior es importante remplazar la imágenes por las nuestras. El resultado de visitar la página anterior seria el siguiente.

Slider en Bootstrap

Slider en Bootstrap

Explicación de atributos:

data-ride=»carousel»: Con este atributo se indica que el carousel debe comenzar la animación automáticamente después de cargar la página.

data-interval=»3000″: Se indica el tiempo que tarda entre cada transición. Esto solamente funciona si se indica la propiedad data-ride. En este caso la transición es de 3 segundos.

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo crear un slider en Bootstrap. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Slider en Bootstrap aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/28/slider-en-bootstrap/feed/ 9 Modal dialog en Bootstrap https://programacionextrema.com/2015/10/22/modal-dialog-en-bootstrap/ https://programacionextrema.com/2015/10/22/modal-dialog-en-bootstrap/#respond Thu, 22 Oct 2015 22:21:07 +0000 http://programacionextrema.com/?p=268 En este tutorial aprenderemos a crear nuestro propio modal dialog en Bootstrap y Java Script. Ejemplo de modal dialog en Bootstrap Con el siguiente código se podrá crear un modal al tocar un botón: A veces nos puede pasar que tenemos un listado de items y necesitamos abrir un modal por cada uno de ellos… Read More

La entrada Modal dialog en Bootstrap aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a crear nuestro propio modal dialog en Bootstrap y Java Script.

Ejemplo de modal dialog en Bootstrap

Con el siguiente código se podrá crear un modal al tocar un botón:

<!DOCTYPE html>
<html>
  <head>
    <title>Modal dialog en Bootstrap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Título del modal</h4>
          </div>
          <div class="modal-body">
            <p>Cuerpo del modal;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary">Aceptar</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- Botón para abrir el modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Abrir modal
    </button>
  </body>
</html>

A veces nos puede pasar que tenemos un listado de items y necesitamos abrir un modal por cada uno de ellos para mostrar su información en detalle o realizar una determinada acción. En ese caso podríamos combinar el código anterior con un poco de Java Script:

<!DOCTYPE html>
<html>
  <head>
    <title>Modal dialog en Bootstrap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h2>Lenguajes de programación</h2>
    <ul class="list-group">
      <li class="list-group-item" onclick="abrirModal(0)">Java Script</li>
      <li class="list-group-item" onclick="abrirModal(1)">PHP</li>
      <li class="list-group-item" onclick="abrirModal(2)">Python</li>
    </ul>
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="modal-title">Título del modal</h4>
          </div>
          <div class="modal-body" id="modal-body">
            <p>Cuerpo del modal;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary">Aceptar</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script>
	  // Listado de lenguajes de programación
      var lenguajes = [{nombre: 'Java Script', descripcion: 'JavaScript (abreviado comúnmente "JS") es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.'},
                       {nombre: 'PHP', descripcion: 'PHP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico.'},
      		           {nombre: 'Python', descripcion: 'Python es un lenguaje de programación interpretado cuya filosofía hace hincapié en una sintaxis que favorezca un código legible.'}]
      // Función para abrir un modal y agregar la información
	  // del lenguaje del indice pasado por parámetro
	  function abrirModal(indice){
        $('#modal-title').html(lenguajes[indice].nombre);
        $('#modal-body').html('<p>' + lenguajes[indice].descripcion + '</p>');
        $('#myModal').modal('show');
      }
    </script>
  </body>
</html>

Espero que les sea de gran utilidad el código y ante cualquier problema no duden en dejar un comentario.

La entrada Modal dialog en Bootstrap aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/22/modal-dialog-en-bootstrap/feed/ 0 Barra de progreso en Bootstrap y Java Script https://programacionextrema.com/2015/10/21/barra-de-progreso-en-bootstrap-y-java-script/ https://programacionextrema.com/2015/10/21/barra-de-progreso-en-bootstrap-y-java-script/#comments Wed, 21 Oct 2015 03:36:15 +0000 http://programacionextrema.com/?p=227 En este tutorial aprenderemos a realizar una sencilla barra de progreso en Bootstrap y Java Script. Esta barra puede ser útil en muchos casos, pero por lo general es utilizada cuando se realiza una operación que tarda mucho tiempo. Ejemplo de barra de progreso en Bootstrap Para insertar una barra solo debemos utilizar el siguiente… Read More

La entrada Barra de progreso en Bootstrap y Java Script aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a realizar una sencilla barra de progreso en Bootstrap y Java Script. Esta barra puede ser útil en muchos casos, pero por lo general es utilizada cuando se realiza una operación que tarda mucho tiempo.

Ejemplo de barra de progreso en Bootstrap

Para insertar una barra solo debemos utilizar el siguiente código HTML que utiliza clases de Bootstrap:

<div class="progress">
  <div id="bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    <span class="sr-only">0% Complete</span>
  </div>
</div>

Pero obviamente que con ese código nada más tendríamos una barra de progreso estática. Para poder darle una animación y con el fin de explicar como funciona vamos a utilizar la función setInterval en Java Script, con la cual iremos incrementando su ancho cada un segundo.

var progreso = 0;
var idIterval = setInterval(function(){
  // Aumento en 10 el progeso
  progreso +=10;
  $('#bar').css('width', progreso + '%');
	
  //Si llegó a 100 elimino el interval
  if(progreso == 100){
    clearInterval(idIterval);
  }
},1000);

Lo que sucederá con ese código en Java Script, es que la barra de progreso se incrementará un 10% por cada segundo que pase hasta que llegue a 100%.

Para que lo puedan probar bien les dejo el código completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Barra de progreso en Botstrap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="progress" style="margin:100px">
      <div id="bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span class="sr-only">0% Complete</span>
      </div>
    </div>
    <script>
      var progreso = 0;
      var idIterval = setInterval(function(){
        // Aumento en 10 el progeso
        progreso +=10;
        $('#bar').css('width', progreso + '%');
      
      //Si llegó a 100 elimino el interval
        if(progreso == 100){
       clearInterval(idIterval);
      }
      },1000);
    </script>
  </body>
</html>

Al ejecutar el código anterior la barra de progreso en Bootstrap se mostrará de la siguiente manera:

Barra de progreso en Bootstrap

Barra de progreso en Bootstrap

Bueno hemos llegado al final de este pequeño tutorial, espero que les haya servido y ante cualquier problema no duden en dejar un comentario.

La entrada Barra de progreso en Bootstrap y Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/21/barra-de-progreso-en-bootstrap-y-java-script/feed/ 11