Listas con Bootstrap List, Active List #TUTORIALES BOOTSTRAP - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

martes, 24 de octubre de 2017

Listas con Bootstrap List, Active List #TUTORIALES BOOTSTRAP


Codigo :



  <!DOCTYPE >
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=divice-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
      <title>Ejemplo</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">

  </head>
    <body>
      <div class="container">
     
        <h2>Ejemplo Lista con estilo Simple</h2>
      <ul class="list-group col-5">
    <li class="list-group-item">Marcas</li>
    <li class="list-group-item">Marca Uno</li>
    <li class="list-group-item">Marca Dos</li>
    <li class="list-group-item">Marca Tres</li>
    <li class="list-group-item">Marca Cuatro</li>
  </ul>
  <br>

    <h2>Active List | Elemento activo de lista</h2>
    <div class="list-group col-5"  >
    <a href="#" class="list-group-item list-group-item-action active"> Elemento de Lista activo </a>
    <a href="#"  onclick="alert('Primer elemento de lista!');" class="list-group-item list-group-item-action ">Segundo Elemento</a>
    <a href="#" onclick="alert('Segundo elemento de lista!');" class="list-group-item list-group-item-action">Tercero Elemento</a>
    <a href="#" onclick="alert('Tercero elemento de lista!');" class="list-group-item list-group-item-action">CuartoElemento</a>
    <a href="#" onclick="alert('Elemento Bloqueado.!');" class="list-group-item list-group-item-action disabled">Quinto Elemento deshabilitado</a>
    </div>
 
  </div>
      <script src="js/jquery-3.2.1.min.js"></script>
      <script type="js/bootstrap.min.js"></script>

  </body>
  </html>

No hay comentarios:

Publicar un comentario

Post Top Ad

Responsive Ads Here