Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: t4r0x en 6 Septiembre 2015, 02:00 am


Título: Ayuda: Navbar de bootstrap
Publicado por: t4r0x en 6 Septiembre 2015, 02:00 am
Buenas! veran estoy usando bootstrap y tengo este codigo:

Código
  1. <head>
  2.     <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
  3.     <title>prueba</title>
  4.  
  5. </head>
  6. <body>
  7.     <div id="wrapper">
  8.         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  9.             <div class="navbar-header">
  10.                 <a class="navbar-brand" href="index.html">prueba</a>
  11.             </div>
  12.         </nav>
  13.     </div>
  14. </body>
  15.  

todo bien pero ahora yo quiero aprender y saber como este navbar es creado asi que intente "aislar" el codigo CSS que este codigo utiliza pero no logro hacerlo funcionar, siempre no muestra nada, alguna ayuda?





Título: Re: Ayuda: Navbar de bootstrap
Publicado por: Thryks en 6 Septiembre 2015, 14:51 pm
Para que nos entendamos, lo que has hecho es intentar crear el codigo que generan esas clases en bootstrap por tu cuenta no?

Título: Re: Ayuda: Navbar de bootstrap
Publicado por: #!drvy en 7 Septiembre 2015, 17:47 pm
Aislar el código fuente de un framework como boostrap es cuanto menos, costoso. Si solo quieres el navbar te recomiendo que te lo hagas tu mismo. No es muy complicado. Un ejemplo muy básico:

Código
  1. body {
  2.     font-size: 16px;
  3. }
  4.  
  5. nav.navbar {
  6.     background: #111;
  7.     color: #f1f1f1;
  8.     padding: 5px;
  9.     line-height: 1.1em;
  10.     width: 100%;
  11. }
  12.  
  13.     nav.navbar a, nav.navbar a:visited {
  14.         color: #f1f1f1;
  15.         text-decoration: none;
  16.     }
  17.  
  18.     nav.navbar a:hover { text-decoration: underline; }
  19.  
  20.     nav.navbar-fixed-top {
  21.         position: fixed;
  22.         top: 0;
  23.         left: 0;
  24.     }

Saludos

Título: Re: Ayuda: Navbar de bootstrap
Publicado por: str_null en 8 Septiembre 2015, 02:33 am
Bootstrap funciona por clases. Si quieres aislar un componente busca las clases que utiliza ese componente y revísalas. Bootstrap está precisamente para eso, es muy común aislar y quitar componentes que no se utilicen. Si quieres trabajar con una copia limpia de bootstrap utiliza otro fichero y renombra las clases que te convengan y si algún atributo te da problemas utiliza !important.

Puedes hacer eso durante el desarrollo y luego las remplazas en la copia de bootstrap que utilices.

Edito: Se me olvidaba. Siempre puedes hacerte tu copia personalizada de bootstrap en su página web te permite seleccionar lo que quieres utilizar.

Salud


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines