Martes, 09 Junio 2026

Misa por el 50 aniversario del IESC, Chiclayo
Misa de aniversario en la iglesia de la Compañía, Arequipa
Misa por el 50 aniversario del IESC en la Parroquia de Santa Rita, Miraflores
Asistentes al brindis con motivo del 50 aniversario del IESC
El presidente del IESC saluda al Papa Francisco en el marco de la conferencia internacional ‘Salvar nuestra casa común y el futuro de la vida sobre la tierra’.
P. Juan Roger Rodríguez en la firma de su libro: 'El Estado peruano, ni confesional ni laico'
(Izq. a der.) Armando Borda, Hans Schelkshorn, Andreas Rendl en el Foro Social Cristiano 'Desafíos para Europa: El Populismo'
Presentación del libro: Evangélicos y poder en América Latina. Autor: José Luis Pérez Guadalupe
(Izq. a der.) Armando Borda, Sebastian Grundberger, Peter Weiss en el Foro Social Cristiano: El Desafío Populista en Europa
Firma del convenio de cooperación de la Universidad Católica de Lublin y el IESC. 10 de mayo.
Seminario Internacional: Políticos cristianos frente a los desafíos globales.
FSC: La Iglesia ante la crisis social en Venezuela

Noticias

Revista Testimonio

Navbar

Categoría de nivel principal o raíz: Demo
Categoría: Bootstrap
Escrito por Super User
Creado: 09 Noviembre 2012
Visto: 1121

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

Title
  1. <div class="navbar">
  2.  <div class="navbar-inner">
  3.  <a class="brand" href="#">Title</a>
  4.  <ul class="nav">
  5.  <li class="active"><a href="#">Home</a></li>
  6.  <li><a href="#">Link</a></li>
  7.  <li><a href="#">Link</a></li>
  8.  </ul>
  9.  </div>
  10. </div>

Navbar components

Brand

A simple link to show your brand or project name only requires an anchor tag.

Title
  1. <a class="brand" href="#">Project name</a>

Nav links

Nav items are simple to add via unordered lists.

  1. <ul class="nav">
  2.  <li class="active">
  3.  <a href="#">Home</a>
  4.  </li>
  5.  <li><a href="#">Link</a></li>
  6.  <li><a href="#">Link</a></li>
  7. </ul>

You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:

  1. <ul class="nav">
  2. ...
  3.  <li class="divider-vertical"></li>
  4. ...
  5. </ul>

Forms

To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

  1. <form class="navbar-form pull-left">
  2.  <input type="text" class="span2">
  3.  <button type="submit" class="btn">Submit</button>
  4. </form>

Search form

For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.

  1. <form class="navbar-search pull-left">
  2.  <input type="text" class="search-query" placeholder="Search">
  3. </form>

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Using dropdowns

Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.

  1. <ul class="nav">
  2.  <li class="dropdown">
  3.  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  4. Account
  5.  <b class="caret"></b>
  6.  </a>
  7.  <ul class="dropdown-menu">
  8. ...
  9.  </ul>
  10.  </li>
  11. </ul>

Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

Fixed to top

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

Title
  1. <div class="navbar navbar-fixed-top">
  2. ...
  3. </div>

Fixed to bottom

Add .navbar-fixed-bottom instead.

Title
  1. <div class="navbar navbar-fixed-bottom">
  2. ...
  3. </div>

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

Title
  1. <div class="navbar navbar-static-top">
  2. ...
  3. </div>

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

Title
  1. <div class="navbar">
  2.  <div class="navbar-inner">
  3.  <div class="container">
  4.  
  5.  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  6.  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  7.  <span class="icon-bar"></span>
  8.  <span class="icon-bar"></span>
  9.  <span class="icon-bar"></span>
  10.  </a>
  11.  
  12.  <!-- Be sure to leave the brand out there if you want it shown -->
  13.  <a class="brand" href="#">Project name</a>
  14.  
  15.  <!-- Everything you want hidden at 940px or less, place within here -->
  16.  <div class="nav-collapse">
  17.  <!-- .nav, .navbar-search, .navbar-form, etc -->
  18.  </div>
  19.  
  20.  </div>
  21.  </div>
  22. </div>
Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

Title
  1. <div class="navbar navbar-inverse">
  2. ...
  3. </div>

Eventos

Últimos Libros