Navbar bootstrap

[olima]

Bonjour à tous,

Est-il possible d'intégrer les navbars proposés sur le site officiel et
"collapse plugin" est-il intégré dans joomla 3.0 ?
http://twitter.github.com/bootstrap/...ts.html#navbar

Merci

[olima]

Re : Navbar bootstrap

bonjour,

Je tourne en rond et je ne comprend pas grand chose à l'utilisation du Navbar responsive de bootstrap.
je travaille sur le Blank Template (partir de zéro rien de tel...) et j'applique "bêtement" ce que je peut lire :

<div class="navbar">
    <div class="navbar-inner">
      <div class="container">
       
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
         
        <a class="brand" href="#">mon logo</a>
         
        <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
        </div>
       
      </div>
    </div>
  </div> 

Pour les menus déroulants suivant ce lien je dois insérer un suffixe CSS de menu (ex:nav-dropdown) car apparemment tout se joue avec les suffixes.

Mais ça ne fonctionne pas, pourquoi ?
Merci

[ghazal]

Re : Navbar bootstrap

Salut,
la page que tu indiques précise qu'il faut récupérer l'override (la surcharge) de mod_menu du template "strapped" (dont il est question, ce n'est pas un tuto sur bootstrap et joomla, mais un tuto sur le template "strapped"+joomla+bootstrap).

Bootstrap has several different types of navigation options for you to choose from. To incorporate these a mod_menu override was created to give you several different navigation options.

Si tu veux "bootstrapper" ton template, il vaudrait mieux comprendre la logique du bidule et télécharger :

https://github.com/twitter/bootstrap

et regarder dans le dossier docs les différentes possibilités

[ced1870]

Re : Navbar bootstrap

salut
si tu regardes dans les données d'exemple le menu haut a la classe " nav-pills" dans paramètres avancés du module de menu >> Suffixe CSS de menu

si ton template charge bootstrap tu obtiens le menu comme celui de la doc
suffit de tester avec le template protostar nativement livré avec joomla 3, et le dropdown fonctionne, sauf que pour 1 niveau de sous menu

[olima]

Re : Navbar bootstrap

Non laissez tomber, j'ai l'impression que bootstrap+Joomla limite énormément la personnalisation d'un site web.
Tous les Templates bootstrap+Joomla que j'ai peu voir se ressemblent. (c'est une horreur)

bootstrap+Joomla c'est encore trop récent, peu d'information, peu de tutoriel, peu de d’intérêt et peu de conviction.

Gantry-framework est peut être les seuls à avoir compris les demandes enfin je pense !

P.S : Et puis vue le nombre de site qui vante le responsive et qui ne l'utilise pas pour eux même, me fait assez rire !

[ced1870]

Re : Navbar bootstrap

remarque très intéressante, mais tu sais que tu peux ajouter tes propres css pour donner le style que tu veux à ton template.
si personne ne personnalise c'est normal que tout se ressemble

Et puis vue le nombre de site qui vante le responsive et qui ne l'utilise pas pour eux même, me fait assez rire !

on veut des noms ! (non j'déconne ! )

bootstrap+Joomla c'est encore trop récent, peu d'information, peu de tutoriel, peu de d’intérêt et peu de conviction.

je suis en train d'écrire mon livre sur les templates joomla 3 et je parle de bootstrap avec un tutoriel qui explique comment l'utiliser et comment compiler les fichiers Less pour faire ses propres css à partir des variables bootstrap. Maintenant si tu as des demandes particulières par rapport à l'utilisation de bootstrap, ça peut etre intéressant d'avoir ton avis sur ce que tu cherches comme documentation

[ghazal]

Re : Navbar bootstrap

La remarque d'Olima sur le nombre de sites qui vantent le responsive et qui ne l'utilisent pas pour eux mêmes est tout à fait juste.
J'avais fait, il y a qq mois, une mini recherche perso sur le taux d'adoption du responsive sur les sites francophones (pas forcément Joomla) et c'était un peu la cata. Mais les choses changent.

Re : les templates des devs connus et leur esthétique, j'apprécie beaucoup celui de gavick et celui de joomlashine - si on enlève les décos de Noel, bien sur - qui sortent de la sempiternelle présentation un bandeau/3 cols en dessous.

De plus, je trouve que le gros pb de protostar est que tous les styles bootstrap + ceux propres à joomla sont dans le même fichier template.css, ce qui complique un peu la compréhension de bootstrap et de l'utilisation de LESS (Crunch, Crunch, lol).

[ced1870]

Re : Navbar bootstrap

tous les styles bootstrap + ceux propres à joomla sont dans le même fichier template.css, ce qui complique un peu la compréhension de bootstrap et de l'utilisation de LESS (Crunch, Crunch, lol).

mon cher Ghazal tu as bien raison
j'ai moi meme cherché un bout de temps avant de comprendre toute la mécanique et arriver à gérer mes propres CSS Bootstrap, pas forcément évident !

[ghazal]

Re : Navbar bootstrap

Mon expérience perso de Bootstrap avec joomla 2.5 et joomla 3.0 :

Comprendre la logique de Bootstrap
- en travaillant avec les exemples

Comprendre la logique de l'intégration de Bootstrap dans Joomla
- protostar
- ou faire son template basique avec le recours à la surcharge (override) des fichiers de certaines extensions (comps ou modules)
- les suffixes CSS de modules (comme dans l'exemple du template strapped cité plus haut)

Comprendre la logique de LESS pour l'adaptation et l'adéquation des CSS Bootstrap/ou autres à mon design Joomla
- http://lesscss.org/

- les compilateurs
1 - les apps
* Crunch
* simpLESS

2 - compilateurs en ligne
PHP -->http://leafo.net/lessphp/
Autres
http://less2css.org/ --> Click "Try it now"

http://css2less.cc/

PS : une propal de formattage de jsfiddle pour pouvoir montrer des exemples de bootstrap + responsive
Démo : http://jsfiddle.net/ghazal/cdvuq/show/
Code : http://jsfiddle.net/ghazal/cdvuq

PPS : encore merci à Lomart pour :
- l'astuce FF pour voir en responsive (Windows->control+shift+m ou Mac->cmd+shift+m)
- son insistance sur le fait que comprendre LESS était indispensable

[olima]

Re : Navbar bootstrap

Je vois que mon désespoir ne laisse pas indifférent.

Entre temps j’ai "réussi" à placer mon navbar en récupérant la surcharge du template "strapped".

Mais J’essaie de reproduire le menu de l’administration de joomla (avec la fameuse class "dropdown")
L’intégration n’est vraiment pas simple, une idée ?

@ghazal, merci pour les liens intéressants et surtout pour l'astuce !

[lomart]

Re : Navbar bootstrap

son insistance sur le fait que comprendre LESS était indispensable

ghazal, tu penses que j'ai été trop lourd

Mais J’essaie de reproduire le menu de l’administration de joomla (avec la fameuse class "dropdown")
L’intégration n’est vraiment pas simple, une idée ?

Je n'ai pas trouvé d'autre solution que de réécrire un module dérivé de mod_menu
J'essaie de faire en sorte qu'il puisse traiter tous les cas de menu, sous-sous-menu et afflix compris
Je mettrais cette version à dispo dès que j'ai terminé..ce qui ne devrait pas trop tarder

[ghazal]

Re : Navbar bootstrap

@lomart
Pas du tout, t'avais raison.

Au fait, j'ai réglé le pb de menu sur jsbootstrap :

[un espace] nav-pills nav-dropdown // sur suffixe CSS de menu

pas de suffixe de class CSS
Afficher tous les liens : oui

@olima, tu peux essayer cette solution

[olima]

Re : Navbar bootstrap

-suffixe "nav-dropdown" indispensable.
-Afficher tous les liens : oui

Ça fonctionne de cette manière (sans hover) mais comment configure t-on le "Type de lien de menu" dans ce cas?

[ghazal]

Re : Navbar bootstrap

Type de mise en page ?

Si ca fonctionne, reste avec defaut dans un premier temps.
Dans le template "strapped", le dev propose plusieurs surcharges, il faut les associer :
default.php avec default_url.php, etc ...
default.bak.php avec default_url.bak.php, etc ...
et etc... lol
Il faut donc un peu tatonner. J'ai testé, ce n'est pas forcément concluant.
Mais tu peux toujours essayer.

[olima]

Re : Navbar bootstrap

Peu concluant c'est le mot

D’ailleurs cela me mène a me poser une petite question sur l’intérêt de l'utilisation du «hover» sur smartphones et tablettes.

L'événement est-il capté sur tous les supports ?