Nuevos Módulos, Apariencia y Personalización

[Bootstrap Navbar] Problema con navbar

 
Imagen de Eduardo Camarillo
[Bootstrap Navbar] Problema con navbar
 

Buena noche,

Actualmente me encuentro trabajando con la versión: 3.4.1+ (Build: 20180308) de Moodle.

Inicié el desarrollo de un tema basado en Boost y, requiero añadir una barra de navegación personalizada, muy parecida a cualquier barra por defecto de Bootstrap (http://v4-alpha.getbootstrap.com/components/navbar/).

De antemano sé que la versión de Bootstrap usada por Boost es la Alpha 4; lo cual, también me ha traído problemas de acuerdo a la documentación, un ejemplo: las clases de espaciado (margen y padding), en Moodle usan la sintaxis m-t-1 y en la documentación supuestamente la sintaxis correcta debería ser mt-1; como sea.

He agregado el código necesario para que aparezca mi navbar, sin embargo, los elementos (la lista) no se muestran por defecto; al cambiar el tamaño de la pantalla la navbar no se vuelve responsiva es decir, no muestra el botón de hamburguesa o 'toggle button'.

He notado que en los archivos de Moodle correspondientes a las hojas de estilo (SASS), han sobreescrito las clases correspondientes a las navbar de Bootstrap y sino mal recuerdo la clase collapse sorpresa.

Quisiera saber si alguno de ustedes ha logrado integrar una navbar y en su caso sustituir la propia de Moodle por algo más genérico y parecido a las navbar originales de Bootstrap.

Ejemplo de un navbar de acuerdo a la documentación:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <i class="icon fa fa-bars fa-fw " aria-hidden="true" aria-label=""></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>


Sin más por el momento, agradezco mucho el tiempo que le dediquen para dar respuesta a mi duda.


Saludos,

Eduardo

 
Promedio de calificaciones: -
Imagen de Fernando Acedo
Re: [Bootstrap Navbar] Problema con navbar
Desarrolladores de pluginsMoodlers de gran ayudaTesters

El método que utiliza moodle para integrar Bootstrap es sobreescribir los estilos originales.

 

En principio el nav debe estar en el código de moodle asi que solo se deberia añadir y configurar minimamente para adaptarlo a tus necesidades. Y si has de sobreescribir código de moodle con código original de BS4, entonces hazlo porque no hay otra manera.

 

 
Promedio de calificaciones: -
Imagen de Eduardo Camarillo
Re: [Bootstrap Navbar] Problema con navbar
 

Gracias, tuve que hacer mi propia barra de navegación.


Saludos

 
Promedio de calificaciones: -