Skip to main content

24 Cursos de BootStrap v3.3.1 – Segundo proyecto

ArielMax Twitter BootStrap


Tutorial #24 del curso de bootstrap v3.3.1, en este tutorial realizaremos un pequeño proyecto de una tienda de venta de smartphones y tables, este pequeño proyecto consta de una protada principal y una página de un producto.
Descarga el proyecto de github incluye font Awesome.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>SmartGSM - Los mejores precios en smartphones actualidad en tecnología</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
</head>
<body>

  <!--Menu principal head-->
  <?php include('navbar-inc.php');?>
  <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
        <li class="" data-target="#myCarousel" data-slide-to="1"></li>
        <li class="active" data-target="#myCarousel" data-slide-to="2"></li>
        <li class="" data-target="#myCarousel" data-slide-to="3"></li>
        <li class="" data-target="#myCarousel" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item">
          <center><img src="img/lg-g3-4-625x605.jpg" alt="First slide"></center>
          <div class="container">
            <div class="carousel-caption">
              <h1>LG G3</h1>
              <p id="nav-tex">La pantalla Quad HD del nuevo LG G3 eleva a arte la experiencia visual.</p>
              <p><a class="btn btn-lg btn-info" href="#" role="button">Ver más</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <center><img src="img/s5.jpg" alt="Second slide"></center>
          <div class="container">
            <div class="carousel-caption">
              <h1>Samsung Galaxy S5</h1>
              <p>Extremadamente fino con una enorme pantalla SuperAMOLED Full HD de 5.1.</p>
              <p><a class="btn btn-lg btn-info" href="#" role="button">Ver más</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <center><img src="img/alcatel.jpg" alt="Second slide"></center>
          <div class="container">
            <div class="carousel-caption">
              <h1>Alcatel One Touch Idol</h1>
              <p>Con un diseño elegante y acabado premium.</p>
              <p><a class="btn btn-lg btn-info" href="#" role="button">Ver más</a></p>
            </div>
          </div>
        </div>
        
        <div class="item">
          <center><img src="img/tab-s.jpg" alt="Second slide"></center>
          <div class="container">
            <div class="carousel-caption">
              <h1>Samsung Galaxy Tab S</h1>
              <p>Su pantalla Super AMOLED reproduce colores más reales.</p>
              <p><a class="btn btn-lg btn-info" href="#" role="button">Ver más</a></p>
            </div>
          </div>
        </div>
        <div class="item active">
          <center><img src="img/z3.jpg" alt="Third slide"></center>
          <div class="container">
            <div class="carousel-caption">
              <h1>Sony Xperia Z3</h1>
              <p>El smartphone premium de Sony con un rendimiento increíble.</p>
              <p><a class="btn btn-lg btn-info" href="#" role="button">Ver más</a></p>
            </div>
          </div>
        </div>
        
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
  
<!--Inicio del contenedor-->
  <div class="container"> 
       <div class="row">
           <br><br>
        <div class="col-lg-4">
        
          <a href="htc-desire-620-dual-sim.php"><img src="img/desire.png" alt="Generic placeholder image"></a>
          
          <h2>HTC Desire 620</h2>
          <p><span class="badge">Precio $USD</span></p>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis 
euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi 
leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
 cursus magna.</p>
          <p>
        <button type="button" class="btn btn-default" title="HTC Desire 620" data-container="body" data-toggle="popover" data-placement="top" data-content="El HTC Desire 620 posee dual sim es un smartphone Android con una pantalla 720p de 5 pulgadas, cámara trasera de 8 megapixels, procesador quad-core Snapdragon 410 a 1.2GHz, 1GB de RAM, 8GB de almacenamiento interno, parlantes stereo y Android 4.4 KitKat con la interfaz de usuario Sense 6 de HTC.">
  Ver detalles <i class="fa fa-eye"></i>
  </button>  <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Añadir este producto al carrito">Al carrito <i class="fa fa-shopping-cart"></i>
</button>
          
        </p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img src="img/lgl45.png" alt="Generic placeholder image">
          <h2>LG L45</h2>
          <p><span class="badge">Precio $USD</span></p>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis 
euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi 
leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
 cursus magna.</p>
          <p>
          <button type="button" class="btn btn-default" title="LG L45" data-container="body" data-toggle="popover" data-placement="top" data-content="El LG L45 es un básico smartphone Android con una pantalla de 3.5 pulgadas a 320 x 480 pixels de resolución, cámara trasera de 5 megapixels, procesador dual-core a 1GHz, corriendo Android 4.4 KitKat.">
  Ver detalles <i class="fa fa-eye"></i>
  </button>
    </button>  <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Añadir este producto al carrito">Al carrito <i class="fa fa-shopping-cart"></i>
</button>  
          </p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img src="img/iphone6.png" alt="Generic placeholder image">
          <h2>Iphone 6 Plus</h2>
          <p><span class="badge">Precio $USD</span></p>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis 
euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi 
leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
 cursus magna.</p>
          <p>
          <button type="button" class="btn btn-default" title="Iphone 6 plus" data-container="body" data-toggle="popover" data-placement="top" data-content=" iPhone 6 Plus viene equipado con el procesador A8 con la segunda generación de 64-bit. 5,5 pulgadas Retina HD tiene una resolución de 1920 x 1080 (full HD) con 401 ppi.">
  Ver detalles <i class="fa fa-eye"></i>
  </button>  
    </button>  <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Añadir este producto al carrito">Al carrito <i class="fa fa-shopping-cart"></i>
</button>
          </p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
      
      <!--Pie de pagina footer-->
      <?php include('footer-inc.php'); ?>
  </div>
<!--Fin del contenedor-->

  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.js"></script>

  <script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
  $(function () {

      $('[data-toggle="popover"]').popover()

  })
</script>
    
</body>
</html>

<!--Inicio del navbar-->
    <nav class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="telefono.php"><img src="img/logosmartgsm.png"></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Productos en celulares <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Nokia</a></li>
            <li><a href="#">Motorola</a></li>
            <li><a href="#">Samsung</a></li>
            <li><a href="#">Sony</a></li>
            <li><a href="#">LG</a></li>
            <li><a href="#">HTC</a></li>
            <li><a href="#">BlackBerry</a></li>
            <li><a href="#">Alcatel</a></li>
            <li class="divider"></li>
            <li><a href="#">Ver todo</a></li>
            <li class="divider"></li>
            <li><a href="#">Smartphones Android</a></li>
            <li><a href="#">Tablests</a></li>
          </ul>
        </li>
         <li><a href="#">Noticias</a></li>
         <li><a href="#">Operadoras</a></li>
            <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Comunidad <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Versus!</a></li>
            <li><a href="#">Compara caracteristícas</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Buscar...">
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-facebook-square fa-2x"></i>
</a></li>
 <li><a href="#"><i class="fa fa-twitter-square fa-2x"></i>
</a></li>
<li><a href="#"><i class="fa fa-google-plus-square fa-2x"></i>
</a></li>
<li><a href="#"><i class="fa fa-rss fa-2x"></i>
</a></li>
<li><a href="#"><i class="fa fa-envelope-o fa-2x"></i>
</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <!--Fin del navbar-->

<!-- FOOTER -->
      <div class="col-md-8">
       <hr class="featurette-divider">
       <h4>Sobre smartGSM</h4>
       <p>
       SmartGSM es una de las comunidades de habla hispana más grandes sobre teléfonos celulares. Fundado en el 2004, smartGSM cubre todas las noticias y novedades sobre telefonía móvil y provee características de teléfonos celulares.
smartGSM cuenta con una comunidad de usuarios que reflejan sus experiencias, opiniones y críticas sobre teléfonos celulares y tablets</p>

<p>Las especificaciones de los celulares son a título informativo y pueden variar. smartGSM no se responsabiliza del uso de las mismas.</p>

<p>Copyright © 2004 2014 <a href="#">smart-gsm.com Derechos Reservados</a></p>
       <br><br>
      </div>
      <div class="col-md-4">
      <hr class="featurette-divider">
      <h4>Siguenos</h4>
       <p><a href="#"><i class="fa fa-facebook-square fa-3x"></i>
</a>
<a href="#"><i class="fa fa-twitter-square fa-3x"></i>
</a>
<a href="#"><i class="fa fa-google-plus-square fa-3x"></i>
</a>
<a href="#"><i class="fa fa-rss fa-3x"></i></a>
<a href="#"><i class="fa fa-envelope-o fa-3x"></i></a>
<a href="#"><i class="fa fa-youtube-square fa-3x"></i></a></p>
</div>
      <!-- END FOOTER -->

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>HTC Desire 620</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
</head>
<body>
  
  <!--Menu principal head-->
  <?php include('navbar-inc.php');?> 
  
  <div class="container">
  <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">HTC Desire 620 dual sim <span class="badge">Precio $USD</span></h4>
        
      </div>
      <div class="modal-body">
        <center><img src="img/HTC-Desire-620.jpg" class="img-responsive"></center>
      </div>
      <div class="modal-footer">
        
        </button>  <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Añadir este producot al carrito">Al carrito <i class="fa fa-shopping-cart"></i>
</button>
      </div>
      
    </div>
  </div>
</div>
    <!-- end Modal -->   
    
    <h1>HTC Desire 620 dual sim</h1>

  <div class="row">
          
      <div class="col-xs-9">
        
        <ul class="nav nav-tabs">
           <li><a href="#home" role="tab" data-toggle="tab">Básico</a></li>
           <li class="active"><a href="#profile" role="tab" data-toggle="tab">Características</a></li>
           <li><a href="#messages" role="tab" data-toggle="tab">Opiniones <span class="badge">4</span></a></li>
           <li><a href="#settings" role="tab" data-toggle="tab">Noticias</a></li>
                      <li><a href="#settings" role="tab" data-toggle="tab">Review <span class="badge">0</span></a></li>
                       <li><a href="#settings" role="tab" data-toggle="tab">Comparar</a></li>
        </ul>

        <div class="tab-content">
          
            <div class="tab-pane fade in active" id="home">
              <br>
                        <h2 class="text-primary">Características técnicas HTC Desire 620 dual sim</h2>
            
                        
                        <div class="media">
                <a class="media-left" href="#" data-toggle="modal" data-target="#myModal">
                 <img src="img/desire.png">

                </a>
                <div class="media-body">
              <h4 class="media-heading">HTC Desire 620 dual sim</h4>
              
El HTC Desire 620 dual sim es un smartphone Android con una pantalla 720p de 5 pulgadas, cámara trasera de 8 megapixels, procesador quad-core Snapdragon 410 a 1.2GHz, 1GB de RAM, 8GB de almacenamiento interno, parlantes stereo y Android 4.4 KitKat con la interfaz de usuario Sense 6 de HTC.
<br><br>
<p><span class="badge">Precio $USD</span></p>
<br>

<p>
</button>  <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Añadir este producot al carrito">Al carrito <i class="fa fa-shopping-cart"></i>
</button></p>
            </div>
          </div>  
                    <div class="col-md-12">
                    <br><br>
                    <div class="panel panel-default">
        <div class="panel-heading">funciones clave HTC Desire 620 dual sim</div>
        <div class="panel-body">
          <img src="img/funciones.jpg" class="img-responsive">
        </div>
      </div>
                    </div>
                    
                    <div class="col-md-12">
                       <div class="page-header">
              <h1>HTC Desire 620 dual sim <small>características avanzadas</small></h1>
            </div>
                        
                        <div class="table-responsive">
                          
<table class="table well">
<tr>
<th rowspan="4" scope="row">General</th>
<td><a href=#>Red</a></td>
<td>GSM 850 / 900 / 1800 / 1900 (SIM 1 & SIM 2) - HSDPA 850 / 900 / 1900 / 2100 - LTE 900 / 1800 / 2100 / 2600 - TD-LTE 1900 / 2300 / 2600 </td>
</tr>
<tr>

<td><a href=#>Anunciado</a></td>
<td>2014, Diciembre</td>
</tr><tr>
<td><a href=#>Status</a></td>
<td>Disponible</td>
</tr>
</table><table class="table well">
<tr>
<th rowspan="2" scope="row">Tamaño</th>
<td><a href=#>Dimensiones</a></td>
<td>150.1 x 72.7 x 9.6 mm

</td>
</tr><tr>
<td><a href=#>Peso</a></td>
<td>160 g</td>
</tr>
</table><table class="table well">
<tr>
<th rowspan="3" scope="row">Display</th>
<td><a href=#>Tipo</a></td>
<td>LCD IPS touchscreen capacitivo, 16M colores</td>
</tr><tr>
<td><a href=#>Tamaño</a></td>

<td>720 x 1280 pixels, 5.0 pulgadas</td>
</tr>
<tr><td> </td><td>- Soporte multitouch  <br />
- Sensor acelerómetro para auto rotación<br />
- Sensor de proximidad para auto apagado<br />
- Interfaz de usuario HTC Sense 6.0</td></tr>
    

</table><table class="table well">

<tr>

<th rowspan="4" scope="row">Ringtones</th>

<td><a href=#>Tipo</a></td>
<td>Polifónico, MP3, WAV</td>
  </tr>

  
 
  
<tr><td><a href=#>Customización</a></td>

<td>Descargas</td></tr>

<tr>
<td><a href=#>Vibración</a> </td>

<td>Si</td>
</tr>

<tr><td> </td><td>- Conector de audio 3.5 mm<br />
- Parlantes Stereo</td></tr>
  
</table><table class="table well">

<tr>
<th scope="row">Memoria</th>
<td><a href="#">Agenda telefónica</a></td>

<td>Entradas y campos prácticamente ilimitados, Foto de llamada</td>
</tr>

<tr>
<td><a href=#>Registro de llamadas</a></td>
<td>Prácticamente ilimitado</td>

</tr>

  
<tr>
<td><a href=#>Slot de tarjeta</a></td>

<td>microSD, hasta 128GB</td></tr>
<tr><td> </td><td>- 8GB almacenamiento interno, 1GB RAM<br />
- Procesador Qualcomm Snapdragon 410 quad-core 1.2GHz, GPU Adreno 306</td></tr>
  
    
</td>
</tr>
</table><table class="table well">
<tr>

<th rowspan="14" scope="row">Características</th><td><a href=#>GPRS</a></td>
      <td>Si</td>
      </tr><tr>
      <td><a href=#>Velocidad de datos</a></td>
      <td></td>
      </tr><tr>
<td><a href="#">OS</a></td>
<td>Android OS, v4.4.4 KitKat</td>
</tr><tr>
<td><a href="#">Mensajería</a></td>
<td>SMS, MMS, Email, Push Email, IM</td>
</tr><tr>
<td><a href=#>Navegador</a></td>
<td>HTML5</td>
</tr><tr>
<td><a href="#">Reloj</a></td>
      <td>Si</td>
      </tr><tr>
      <td><a href=#>Alarma</a></td>
      <td>Si</td>
      </tr><tr>
      <td><a href=#>Puerto infrarrojo</a></td>
      <td>No</td>
      </tr><tr>
      <td><a href=#>Juegos</a></td>
<td>Si</td>
</tr><tr>
<td><a href=#>Colores</a></td>
<td>Negro, Blanco, Gris, Blanco</td>
</tr>
   

<tr>
<td><a href="#">Cámara</a></td>
<td>8 MP, 3264 x 2448 pixels, autofocus, flash LED,  foco táctil, geo-tagging, detección de rostro y sonrisa, HDR, video 1080p@30fps, HDR en video, cámara frontal 5 MP</td>
</tr>

<tr><td> </td><td>
- GPS con soporte A-GPS + GLONASS<br />
- Brújula digital<br />
- EDGE<br />
- 3G HSDPA / HSUPA <br />
- 4G LTE<br />
- Wi-Fi 802.11 b/g/n<br />
- Bluetooth v4.0 A2DP<br />
- microUSB 2.0<br />
- Cancelación activa de ruido con micrófono dedicado<br />
- Reproductor de audio MP3/AAC+/WAV/WMA <br />
- Reproductor de video MP4/H.263/H.264/WMV<br />
- Radio FM Stereo<br />
- Organizador<br />
- Visor de documentos<br />
- Memo/discado de voz<br />
- Manoslibres incorporado<br />
- Ingreso predictivo de texto</td></tr>

  

</table>
<table class="table well">
<tr>
<th rowspan="3" scope="row">Batería</th>
<td> </td>
<td>Standard, Li-Po 2100 mAh</td>
</tr><tr>
<td><a href="#">Stand-by</a></td>
<td></td>
</tr><tr>
<td><a href="#">Tiempo de conversación</a></td>
<td></td>

</tr>
  
</table>
  </div>
   <div class="page-header">
              <h2>Opiniones y Comentarios HTC Desire 620 dual sim</h2>
            </div>  
                        <p>No hay opiniones para el HTC Desire 620 dual sim.Se el primero en dejar una opinión sobre el HTC Desire 620 dual sim</p>
                        <h3>Opina sobre el celular HTC Desire 620 dual sim</h3>                   
                        
                        <div class="col-sm-6">
                        <br>
                        <form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Nombre</label>
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="nombre">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">Mensaje</label>
    <textarea class="form-control" rows="3"></textarea>
    <p class="help-block">Tu experiencia o preguntas sobre el teléfono celular HTC Desire 620 dual sim </p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Enviarme un email cuando respondan mi comentario
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar opinión</button>
</form>
                        
                        </div>
                        <br>
                        <div class="col-sm-6 well" >
                        
                        <p>Tu opinión vale! Recomienda (o no!) el teléfono celular HTC Desire 620 dual sim a otros usuarios. Algunos consejos para tu opinión:</p>

    <ul class="list-group">
      <li> Sé preciso en la pregunta sobre el  teléfono celular HTC Desire 620 dual sim. </li>
      <li> Cuenta tus experiencias positivas y negativas</li>
      <li> No insultes, ni uses palabras groseras, si es así probablemente tu opinión se elimine</li>
      <li> No escribas con mayúsculas!</li>
      <li> Recuerda que smartGSM NO vende móviles ni celulares</li>
      </ul>

                        </div>
                        
                    
                    </div>
                        
                  
            

            
            <div class="tab-pane fade" id="profile">

            ...

            </div>

          <div class="tab-pane fade" id="messages">
            ...  
          </div>

            <div class="tab-pane fade" id="settings">
              

        </div>  
                
      </div>
            
    <div>
         
    <?php include('footer-inc.php'); ?>

  
  </div>

  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.