Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap Navbar
#1
Hola Gente hoy los traigo un Stilo de menu con adaptación Movil espero que los sirva.!

Stilos.css

Código:
.navbar-inverse { background-color: #222222}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #080808}
.dropdown-menu { background-color: #ffffff}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #428bca}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #080808}
.navbar-inverse .navbar-brand { color: #999999}
.navbar-inverse .navbar-brand:hover { color: #ffffff}
.navbar-inverse .navbar-nav>li>a { color: #999999}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ffffff}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #ffffff}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #ffffff}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #ffffff}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #ffffff}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #ffffff}

Index.html


Código:
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
 <div class="container">
   <div class="navbar-header">
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
     <a href="./" class="navbar-brand">Bootstrap 3 Menu Generator</a>
   </div>
   <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
     <ul class="nav navbar-nav">
       <li>
         <a href="#">Getting started</a>
       </li>
                <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
       <li>
         <a href="#">Components</a>
       </li>
       <li>
         <a href="#">JavaScript</a>
       </li>
       <li class="active">
         <a href="#">Customize</a>
       </li>
     </ul>
   </nav>
 </div>
</header>
Ahora quieres saber... Quien soy?
Soy un delincuente, mi crimen es la curiosidad, Mi crimen es juzgar a las personas por lo que dicen y piensan, y no por lo que aparentan.
Mi crimen es ser mas inteligente que vos, algo por lo cual, nunca me olvidaras.
#2
psz nose tu amigo, pero no se ve muy bien que digamos jajajaja xD >_< como que le falto algo a tu codigo Lengua
Pagina Demo
Firma editada por moderación: Los enlaces con ID de referido no estan permitidos.
WWW
#3
(02-02-2015, 05:05 PM)AngelKrak escribió: psz nose tu amigo, pero no se ve muy bien que digamos jajajaja xD >_< como que le falto algo a tu codigo Lengua
Pagina Demo


Hice la prueba, 

http://codepen.io/anon/pen/xbXqbv

Lo que le falto fue:

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">


Aunque con este te ahorras el css así que algún que otro enlace sustituto a este le faltaría.
WWW
#4
(02-02-2015, 06:56 PM)Vicen escribió:
(02-02-2015, 05:05 PM)AngelKrak escribió: psz nose tu amigo, pero no se ve muy bien que digamos jajajaja xD >_< como que le falto algo a tu codigo Lengua
Pagina Demo


Hice la prueba, 

http://codepen.io/anon/pen/xbXqbv

Lo que le falto fue:

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">


Aunque con este te ahorras el css así que algún que otro enlace sustituto a este le faltaría.

ya lo actualize y todo pero no sirve el Menu ajajaja Dropdown de Movil no funciona :/
Firma editada por moderación: Los enlaces con ID de referido no estan permitidos.
WWW
#5
Para esto es mejor obtener snippets del boostrap que aportan otros usuarios Guiño

Bootsnip por ejemplo Gran sonrisa

Saludos


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  LANZAMIENTO DE BOOTSTRAP 4.0.0 ALPHA Y ADIOS BOOTSTRAP 3 khristia 11 888 01-10-2016, 02:34 PM
Último mensaje: juanjj
  [Aporte] Curso completo Bootstrap habacuc78 10 785 06-02-2016, 04:50 AM
Último mensaje: habacuc78
  Cómo instalar Bootstrap habacuc78 3 395 22-12-2015, 10:33 PM
Último mensaje: Taquion



Usuarios navegando en este tema: 1 invitado(s)