Cargando

Ir a contenido



Ver Más! Si te gusta estar al día y conocer todos los trucos y novedades de las redes sociales (Instagram, WhatsApp etc.) y el mundo de internet, haz clic AQUÍ >


 


Bootstrap Framework desarrollo avanzado de interfaces web

Bootstrap Framework es un conjunto de librerías HTML, CSS y JS para el desarrollo rápido y estandarizado de proyectos web.


Escrito por el ago 24 2015 09:11 bootstrap framework


En otro tutorial se explicó una introducción Interfaces de usuario en Bootstrap y también un tutorial sobre como maquetar un proyectos web con Bootstrap 2.0, en este avanzaremos hacia las interfaces y elementos más utilizados en el desarrollo web.

Podemos descargar Bootstrap y ponerlo en un directorio de nuestra web o bien utilizarlo enlazándolo a su librería online.

Bootstrap es un framework de código libre y abierto para el desarrollo web más rápido y fácil.

Buscando podremos encontrar muchos aportes de la comunidad de css y componentes personalizados y plantillas de diseño que han realizado otros usuarios y las ponen a disposición, existen muchos componentes para crear barras de navegación, ventanas y popup modales, carruseles de imágenes, menús y muchas otras, así como plugins de JavaScript y Jquery para validar formularios y otras funcionalidades

Tablas y filas con efectos


Bootstrap posee estilos CSS y efectos ya programados que podemos utilizar por ejemplo para cambiar el color de la filas en una tabla y cuando el mouse pase por encima.

Bootstrap-avanzado.jpg



El código sera el siguiente:
<!DOCTYPE html>

<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
  <h3>Tabla y filas con efecto</h3>

        
  <table border=1 class="table table-striped table-hover">

    <thead>
      <tr>

        <th>Vehiculo</th>
        <th>Origen</th>

        <th>Estado</th>
        <th>Precio</th>

      </tr>
    </thead>

    <tbody>
      <tr>

        <td>Fiat 500</td>
        <td>Madrid</td>

        <td>Usado</td>
        <td>9690€</td>

      </tr>
      <tr>

        <td>Honda Accord</td>
        <td>Barcelona</td>

        <td>Usado</td>
        <td>14500€</td>

      </tr>
      <tr>

        <td>Renault Laguna</td>
        <td>Toledo</td>

        <td>Usado</td>
        <td>2800€</td>

      </tr>
    </tbody>

  </table>
</div>
Crearemos a continuación un menú con submenú utilizando solo CSS de Bootstrap:




El código sera el siguiente:
<!DOCTYPE html>

<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>


.dropdown-menu {

  left:150px;
}


.nivel {

background: #333;
}


.submenu {

    position: relative;
}


.submenu>.dropdown-menu {

    top: 0;
    left: 100%;

    margin-top: -6px;
    ;

    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;

    border-radius: 0 6px 6px 6px;
    background: #333;

}

.submenu:hover>.dropdown-menu {
    display: block;

}

.dropdown-menu > li > a {
background: #333;

color:#fff;
}


.submenu>a:after {

    display: block;
    content: " ";

    float: right;
    width: 0;

    height: 0;
    border-color: transparent;

    border-style: solid;
    border-width: 5px 0 5px 5px;

    border-left-color: #cccccc;
    margin-top: 5px;

    margin-right: -10px;
}


  </style>

</head>
<body>


<div class="container">

<div class="row">
        <h2>Menu multinivel usando Css Bootstrap</h2>

        <hr>
        <div class="dropdown">

    <button type="button" class="btn btn-primary">Clientes</button>
  <button type="button" class="btn btn-primary">Ventas</button>

           <button type="button" data-toggle="dropdown" class="btn btn-primary" >
                Administrador <span class="caret"></span>

            </button>
      <ul class="dropdown-menu nivel" role="menu" aria-labelledby="dropdownMenu">

              <li><a href="#">Sistema</a></li>
              <li><a href="#">Usuarios</a></li>

              <li class="divider"></li>
              <li class="submenu">

                <a tabindex="-1" href="#">Configuraciones</a>
                <ul class="dropdown-menu">

                  <li><a tabindex="-1" href="#">Permisos</a></li>
                  <li class="submenu">

                    <a href="#">Servidores</a>
                    <ul class="dropdown-menu">

                        <li><a href="#">Vps Servidor A</a></li>
                     <li><a href="#">Vps Servidor B</a></li>

                    </ul>
                  </li>

                  <li><a href="#">Consumo de Recursos</a></li>
                  <li><a href="#">Backup</a></li>

                </ul>
              </li>

            </ul>
        </div>

</div>
</div>


</body>

</html>
Explicamos la estructura y sus clases predefinidas. La clase define el tamaño de la web que se encuentra por defecto en Bootstrap.
.container {
    width: 1170px;

}
La siguiente clases row, aporta un margen a izquierda y derecha en toda la página:
.row {
    ;

    margin-right: -15px;
}
La clase dropdown-menu ya viene con Bootstrap y las clases de botones btn btn-primary también. Nosotros añadiremos las clases submenú y nivel para poder generar el submenú. Recordemos que las clases tiene jerarquías por lo tanto si nombramos la misma clase que tenemos en Bootstrap y le añadimos algún atributo, prevalece la ultima declaración realizada.

Esto es para el caso donde le añadimos un atributo desplazar a izquierda aunque la clase ya esta definida en bootstrap.min.css
.dropdown-menu {

  left:150px;
}
Popup css y jquery con contenido html

Usaremos la función popover que muestra un popup cuando se pasa con el mouse sobre un enlace y la variable contenido tiene el html a mostrar.

Tomaremos la tabla anterior y le añadiremos una columna para ficha técnica.

En cada enlace tendremos la siguiente sentencia <a id="identificador" class="btn" rel="popover" data-content=” ”> y luego con el id invocaremos un script.

Bootstrap-avanzado3.jpg

<table border=1 class="table table-striped table-hover">

    <thead>
      <tr>

        <th>Vehiculo</th>
        <th>Origen</th>

        <th>Estado</th>
        <th>Precio</th>

        <th>Fotos</th>
      </tr>

    </thead>
    <tbody>

      <tr>
        <td>Fiat 500</td>

        <td>Madrid</td>
        <td>Usado</td>

        <td>9690€</td>
        <td><a id="popupF" class="btn" rel="popover" data-content="" title="<b>Fiat 500</b>">Ficha Técnica</a></td>

      </tr>
      <tr>

        <td>Honda Accord</td>
        <td>Barcelona</td>

        <td>Usado</td>
        <td>14500€</td>

        <td><a id="popupH" class="btn" rel="popover" data-content="" title="Honda Accord">Ficha Técnica</a></td>
      </tr>

     </tbody>
  </table>


<script>
  var contenidoF = '<table><tr><td><b>Estado:</b> Usado</td></tr><tr><td><b>Año:</b> 2010</td></tr></table> <br><img src="fiat-500.jpg">';

   $('#popupF').popover({placement: 'bottom', content: contenidoF, html: true});
  

   var contenido = '<table><tr><td>Estado: Usado</td></tr><tr><td>Año: 2002</td></tr></table> <br><img src="haccord1.jpg">';
   $('#popupH').popover({placement: 'bottom', content: contenidoH, html: true});

</script>
Si tenemos un listado amplio podemos crear una función JQuery donde le podamos enviar contenido dinámico por ejemplo extraído de una base de datos.

Columnas y bloques de la pagina


Bootstrap esta basado un ancho de 1200 pixeles, divididos en 12 bloques que cubren el 99% de la estructura de la web, cada bloque cubre el 8.3333%, equivalente a 100 pixeles y tiene ademas un espacio e 1 pixel.

Siempre la combinación de bloques en una misma linea de sumar 12 por ejemplo:
Dos bloque de 3 y uno de 6
<!DOCTYPE html>

<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container" style="border: 1px solid blue">
  <h3>Bloques Bootstrap</h3>

        
   <div class="row">

  <div class="col-md-3" style="border: 1px solid red">
    <p>Bloque col-md-3 de 300px.</p>

  </div>

   <div class="col-md-6" style="border: 1px solid red">
    <p>Bloque col-md-6 de 600px.    </p>

  
  </div>

   <div class="col-md-3" style="border: 1px solid red">
    <p>Bloque col-md-3 de 300px. 

    </p>
  

  </div>
 

  <div class="col-md-8" style="border: 1px solid red">
    <p>Bloque col-md-8 de 800px.</p>

  </div>
</div>

</body>
</html>
Debajo pusimos un bloque tamaño 8 osea 800 pixeles:

Bootstrap-avanzado4.jpg


Estos bloque son responsibles ya están configurados en el css de Bootstrap. Aquí podemos ver una muestra de como los bloques se adaptan a un cambio de pantalla de un dispositivo móvil.

Bootstrap-avanzado5.jpg


Como personalizar Bootstrap para cambiar estilos y funcionalidades


Para crear estilos y funcionalidades para que sean compatibles con Bootstrap, debemos utilizarlo como cualquier otra librería css o js, como un framework mas del proyecto, en este caso sera utilizado para diseño y funcionalidad en el navegador del usuario. Debemos evitar reformar las librerías originales, sino acoplar las nuestras, así cuando los desarrolladores de Bootstrap publiquen una actualización, no tendremos problemas de incorporar lo nuevo si mantenemos nuestros cambios por separado.

Para definir nuestras propias hojas de estilo, debemos crear un nuevo archivo estilos CSS, para definir nuestros cambios sin afectar el css original. Recordemos la jerarquía, por ejemplo.

Si en el css de Bootstrap bootstrap.min.css
.col-md-3 {

    width: 25%;
}
Y queremos que tenga un borde entonces en un archivo a aparte misestilos.css, podemos declarar:
.borderojo {

border: 1px solid red

}
Luego en la pagina invocamos ambos archivos
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/misestilos.css">
En el bloque lo aplicamos de la siguiente manera:
<div class="col-md-3 borderojo">

    <p>Bloque col-md-3 de 300px.</p>
  </div>
Esto seria equivalente a declararlo así:
col-md-3 {

width: 25%;
border: 1px solid red;

}
Ahora si por alguna razón tuviese dos declaraciones similares supongamos
.borderojo {
border: 1px solid red;

}

.bloqueclientes {
border: 1px solid blue;

}

<div class="col-md-3 borderojo bloqueclientes">
    <p>Bloque col-md-3 de 300px.</p>

  </div>
Quien prevalece es la sentencia que se declaro ultima. Por lo tanto el bloque tendrá un borde azul.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
8
VOTA
5
0%
4
100%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 24 2015 09:11
  •   Visitas 2.1K
  •   Nivel
    Profesional