{% extends 'UBVPrincipalBundle:Documentacion:inicio.html.twig' %}

{% block stylesheets %}

  {{ parent() }}
  <link type="text/css" rel="stylesheet" href=" {{ asset ('bundles/ubvprincipal/vendors/jquery-bootstrap-wizard/custom.css') }}">

{% endblock %}
{% block breadcums %}
  {{ parent() }}
  <li>
    <i class="fa fa-angle-right fa-fw"></i>
    <a>General Ui</a>
  </li>
  <li>
    <i class="fa fa-angle-right fa-fw"></i>
    <a>Wizards</a>
  </li>
{% endblock%}
{% block contenido %}
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Alertas</div>
        </div>
        <div class="portlet-body">
          <div class="row">
            <div class="col-lg-4"><h4 class="block-heading">Alertas por defecto</h4>

              <div class="alert alert-success"><strong>Bien hecho!</strong> usted éxito
                lea este mensaje de alerta importante.
              </div>
              <div class="alert alert-info"><strong>Aviso!</strong> Esta alerta necesita su
                atención, pero no es muy importante.
              </div>
              <div class="alert alert-warning"><strong>Peligro!</strong>Mejor comprobar yo mismo,
                usted no está buscando.
              </div>
              <div class="alert alert-danger"><strong>Alerta!</strong> Cambiar algunas cosas
                y tratar de guardar de nuevo.
              </div>
            </div>
            <div class="col-lg-4"><h4 class="block-heading">Alertas Descartables</h4>

              <div class="alert alert-success alert-dismissable">
                <button type="button" data-dismiss="alert" aria-hidden="true"
                        class="close">&times;</button>
                <strong>Bien hecho!</strong> usted éxito
                lea este mensaje de alerta importante.
              </div>
              <div class="alert alert-info alert-dismissable">
                <button type="button" data-dismiss="alert" aria-hidden="true"
                        class="close">&times;</button>
                <strong>Aviso!</strong> Esta alerta necesita su
                atención, pero no es muy importante.
              </div>
              <div class="alert alert-warning alert-dismissable">
                <button type="button" data-dismiss="alert" aria-hidden="true"
                        class="close">&times;</button>
                <strong>Peligro!</strong>Mejor comprobar yo mismo,
                usted no está buscando.
              </div>
              <div class="alert alert-danger alert-dismissable">
                <button type="button" data-dismiss="alert" aria-hidden="true"
                        class="close">&times;</button>
                <strong>Alerta!</strong> Cambiar algunas cosas
                y tratar de guardar de nuevo.
              </div>
            </div>
            <div class="col-lg-4"><h4 class="block-heading">Sin conexión</h4>

              <div class="alert alert-success"><strong>Bien Hecho!</strong> Leer corectamente <a href="#" class="alert-link">Este mensaje de aletra</a>.
              </div>
              <div class="alert alert-info"><strong>Aviso!</strong> This <a href="#"
                                                                            class="alert-link">Esta alerta necesita su atencion</a> , pero no es muy importante.
              </div>
              <div class="alert alert-warning"><strong>Peligro!</strong> Auto chequear,
                <a href="#" class="alert-link">no esta buscando bien</a>.
              </div>
              <div class="alert alert-danger"><strong>Alerta!</strong> <a href="#"
                                                                          class="alert-link">Cambia algunas cosas </a> y trata de enviar de nuevo.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Notas</div>
        </div>
        <div class="portlet-body">
          <div class="row">
            <div class="col-md-6">
              <div class="note note-success"><h4 class="block-heading">Success! Duis mollis,
                  est non commodo luctus</h4>

                <p>Nisi erat mattis consectetur purus sit amet porttitor ligula, eget
                  lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                  fermentum.</p></div>
              <div class="note note-info"><h4 class="block-heading">Info! Duis mollis, est non
                  commodo luctus</h4>

                <p>Nisi erat mattis consectetur purus sit amet porttitor ligula, eget
                  lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                  fermentum.</p></div>
            </div>
            <div class="col-md-6">
              <div class="note note-warning"><h4 class="block-heading">Warning! Duis mollis,
                  est non commodo luctus</h4>

                <p>Nisi erat mattis consectetur purus sit amet porttitor ligula, eget
                  lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                  fermentum.</p></div>
              <div class="note note-danger"><h4 class="block-heading">Dangerous! Duis mollis,
                  est non commodo luctus</h4>

                <p>Nisi erat mattis consectetur purus sit amet porttitor ligula, eget
                  lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                  fermentum.</p></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Pagination</div>
        </div>
        <div class="portlet-body"><h4 class="block-heading">Basic</h4>
          <ul class="pagination mtm mbm">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <div class="clearfix"></div>
          <h4 class="block-heading">Disabled and active states</h4>
          <ul class="pagination mtm mbm">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <div class="clearfix"></div>
          <h4 class="block-heading">Size</h4>
          <ul class="pagination pagination-lg mtm mbm">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <ul class="pagination mtm mbm">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <ul class="pagination pagination-sm mtm mbm">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <div class="clearfix"></div>
          <h4 class="block-heading">Pagination Align</h4>
          <ul data-hover="" class="pagination mtm mbm">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <div class="text-center">
            <ul class="pagination mtm mbm">
              <li><a href="#">&laquo;</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li class="active"><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">&raquo;</a></li>
            </ul>
          </div>
          <div class="text-right">
            <ul class="pagination mtm mbm">
              <li><a href="#">&laquo;</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li class="active"><a href="#">5</a></li>
              <li class="disabled"><a href="#">&raquo;</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Tooltip</div>
        </div>
        <div class="portlet-body text-center">
          <button type="button" data-hover="tooltip" data-placement="left" title="Tooltip on left"
                  class="btn btn-default">Left
          </button>
          &nbsp;
          <button type="button" data-hover="tooltip" data-placement="top" title="Tooltip on top"
                  class="btn btn-default">Top
          </button>
          &nbsp;
          <button type="button" data-hover="tooltip" data-placement="bottom"
                  title="Tooltip on bottom" class="btn btn-default">Bottom
          </button>
          &nbsp;
          <button type="button" data-hover="tooltip" data-placement="right"
                  title="Tooltip on right" class="btn btn-default">Right
          </button>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Popovers</div>
        </div>
        <div class="portlet-body text-center">
          <button type="button" data-container="body" data-toggle="popover" data-placement="left"
                  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  class="btn btn-default">Left
          </button>
          &nbsp;
          <button type="button" data-container="body" data-toggle="popover" data-placement="top"
                  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  class="btn btn-default">Top
          </button>
          &nbsp;
          <button type="button" data-container="body" data-toggle="popover"
                  data-placement="bottom"
                  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  class="btn btn-default">Bottom
          </button>
          &nbsp;
          <button type="button" data-container="body" data-toggle="popover" data-placement="right"
                  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  class="btn btn-default">Right
          </button>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Unordered Lists</div>
        </div>
        <div class="portlet-body">
          <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
              <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
              </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Ordered Lists</div>
        </div>
        <div class="portlet-body">
          <ol>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ol>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Lists With Font Awesome</div>
        </div>
        <div class="portlet-body">
          <ul class="list-icon">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Unstyled Lists</div>
        </div>
        <div class="portlet-body">
          <ul class="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Badges</div>
        </div>
        <div class="portlet-body">
          <div class="row">
            <div class="col-md-6"><h4 class="block-heading">Badges</h4><span
                class="badge badge-default">1</span>&nbsp;<span class="badge badge-primary">2</span>&nbsp;<span
                class="badge badge-success">3</span>&nbsp;<span class="badge badge-warning">4</span>&nbsp;<span
                class="badge badge-info">5</span>&nbsp;<span
                class="badge badge-danger">6</span>&nbsp;<span
                class="badge badge-red">7</span>&nbsp;<span
                class="badge badge-orange">8</span>&nbsp;<span
                class="badge badge-green">9</span>&nbsp;<span
                class="badge badge-yellow">10</span>&nbsp;<span
                class="badge badge-blue">11</span>&nbsp;<span
                class="badge badge-pink">12</span>&nbsp;<span
                class="badge badge-violet">13</span>&nbsp;<span
                class="badge badge-grey">14</span>&nbsp;<span
                class="badge badge-dark">15</span>

              <div class="mtxl"></div>
              <h4 class="block-heading">Badges List Navigations</h4>
              <ul style="max-width: 260px;" class="nav nav-pills nav-stacked">
                <li class="active"><a href="#"><span class="badge pull-right">42</span>Home</a>
                </li>
                <li><a href="#">Profile</a></li>
                <li><a href="#"><span class="badge badge-secondary pull-right">3</span>Messages</a>
                </li>
              </ul>
              <div class="mbl"></div>
            </div>
            <div class="col-md-6"><h4 class="block-heading">Badges Square</h4><span
                class="badge badge-default badge-none-radius">1</span>&nbsp;<span
                class="badge badge-primary badge-none-radius">2</span>&nbsp;<span
                class="badge badge-success badge-none-radius">3</span>&nbsp;<span
                class="badge badge-warning badge-none-radius">4</span>&nbsp;<span
                class="badge badge-info badge-none-radius">5</span>&nbsp;<span
                class="badge badge-danger badge-none-radius">6</span>&nbsp;<span
                class="badge badge-red badge-none-radius">7</span>&nbsp;<span
                class="badge badge-orange badge-none-radius">8</span>&nbsp;<span
                class="badge badge-green badge-none-radius">9</span>&nbsp;<span
                class="badge badge-yellow badge-none-radius">10</span>&nbsp;<span
                class="badge badge-blue badge-none-radius">11</span>&nbsp;<span
                class="badge badge-pink badge-none-radius">12</span>&nbsp;<span
                class="badge badge-violet badge-none-radius">13</span>&nbsp;<span
                class="badge badge-grey badge-none-radius">14</span>&nbsp;<span
                class="badge badge-dark badge-none-radius">15</span>

              <div class="mbxl"></div>
              <h4 class="block-heading">Badge In Pill</h4>
              <ul class="nav nav-pills">
                <li class="active"><a href="#">Home
                    &nbsp;<span class="badge">42</span></a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages
                    &nbsp;<span class="badge badge-info">3</span></a></li>
              </ul>
              <div class="mbl"></div>
              <h4 class="block-heading">Badge With Button Dropdown</h4>

              <div class="btn-group">
                <button type="button" data-toggle="dropdown"
                        class="btn btn-primary dropdown-toggle">Account
                  &nbsp;<i class="fa fa-angle-down"></i></button>
                <ul role="menu" class="dropdown-menu">
                  <li><a href="#">Action<span
                        class="badge badge-yellow pull-right">5</span></a></li>
                  <li><a href="#">Another action<span class="badge badge-info pull-right">3</span></a>
                  </li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
              &nbsp;
              <div class="btn-group">
                <button type="button" class="btn btn-primary">Chats</button>
                <button type="button" data-toggle="dropdown" data-hover="dropdown"
                        data-delay="1000" data-close-others="true"
                        class="btn btn-primary dropdown-toggle"><i
                    class="fa fa-angle-down"></i></button>
                <ul class="dropdown-menu">
                  <li><a href="#"><span class="label label-warning">7:00 AM</span>&nbsp;
                      Hi :)</a></li>
                  <li><a href="#"><span class="label label-warning">8:00 AM</span>&nbsp;
                      How are you?</a></li>
                  <li><a href="#"><span class="label label-warning">9:00 AM</span>&nbsp;
                      What are you doing?</a></li>
                  <li class="divider"></li>
                  <li><a href="#" class="text-center">View All</a></li>
                </ul>
              </div>
              &nbsp;
              <div class="btn-group">
                <button type="button" data-toggle="dropdown" data-hover="dropdown"
                        data-delay="1000" data-close-others="true"
                        class="btn btn-primary dropdown-toggle">Inbox
                  &nbsp;<span class="badge badge-grey">25</span></button>
                <ul class="dropdown-menu pull-right">
                  <li><a href="#"><span class="label label-info"><i
                          class="fa fa-bell"></i></span>&nbsp;
                      Favourites Snippet</a></li>
                  <li><a href="#"><span class="label label-red"><i
                          class="fa fa-magic"></i></span>&nbsp;
                      Email marketing</a></li>
                  <li><a href="#"><span class="label label-yellow"><i
                          class="fa fa-bullhorn"></i></span>&nbsp;
                      Subscriber focused email design</a></li>
                  <li class="divider"></li>
                  <li><a href="#" class="text-center">View All</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Panels</div>
        </div>
        <div class="portlet-body">
          <div class="row">
            <div class="col-md-6"><h4 class="block-heading">Basic</h4>

              <div class="panel panel-default">
                <div class="panel-body">Basic panel example</div>
              </div>
              <div class="clearfix"></div>
              <h4 class="block-heading">Panel With Heading</h4>

              <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="clearfix"></div>
              <h4 class="block-heading">Panel With Footer</h4>

              <div class="panel panel-default">
                <div class="panel-body">Panel content</div>
                <div class="panel-footer">Panel footer</div>
              </div>
              <div class="clearfix"></div>
              <h4 class="block-heading">With Tables</h4>

              <div class="panel panel-info">
                <div class="panel-heading">Panel heading</div>
                <div class="panel-body"><p>Some default panel content here. Nulla vitae elit
                    libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
                    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
                    vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.Aenean
                    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vesti.</p>
                </div>
                <table class="table table-border-dashed">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col-md-6"><h4 class="block-heading">Contextual Alternatives</h4>

              <div class="panel panel-primary">
                <div class="panel-heading">Panel primary</div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="panel panel-success">
                <div class="panel-heading">Panel success</div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="panel panel-info">
                <div class="panel-heading">Panel info</div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="panel panel-warning">
                <div class="panel-heading">Panel warning</div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="panel panel-danger">
                <div class="panel-heading">Panel danger</div>
                <div class="panel-body">Panel content</div>
              </div>
              <div class="clearfix"></div>
              <h4 class="block-heading">With List Groups</h4>

              <div class="panel panel-warning">
                <div class="panel-heading">Panel heading</div>
                <div class="panel-body"><p>Some default panel content here. Nulla vitae elit
                    libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
                    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
                    vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <ul class="list-group">
                  <li class="list-group-item">Morbi leo risus<span
                      class="badge badge-blue pull-right">6</span></li>
                  <li class="list-group-item">Porta ac consectetur ac<span
                      class="badge badge-yellow pull-right">3</span></li>
                  <li class="list-group-item">Vestibulum at eros<span
                      class="badge badge-pink pull-right">8</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Wells</div>
        </div>
        <div class="portlet-body">
          <div class="row">
            <div class="col-md-6">
              <div class="well well-lg">Look, I'm in a large well!</div>
              <div class="well">Look, I'm in a well!</div>
            </div>
            <div class="col-md-6">
              <div class="well well-sm">Look, I'm in a small well!</div>
            </div>
          </div>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Inline Lists</div>
        </div>
        <div class="portlet-body">
          <ol class="list-inline">
            <li>1.Lorem ipsum</li>
            <li>2.Consectetur</li>
            <li>3.Integer</li>
          </ol>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Description Lists</div>
        </div>
        <div class="portlet-body">
          <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec
              elit.
            </dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('bundles/ubvprincipal/js/form-wizard.js') }}"></script>
  <script src="{{ asset('bundles/ubvprincipal/vendors/jquery-bootstrap-wizard/jquery.bootstrap.wizard.min.js') }}"></script>
{% endblock %}