Bonjour,
Je commence a développer un nouveau site et je me suis dit que j'allais utiliser bootstrap 2 (à tord ou à raison ?) afin de me permettre de gagner du temps.
Le problème est que j'ai un peu de mal avec la philosophie du framework. J'ai bien compris le système de ligne et de colonne en mode fluid ou fixed mais je ne sais pas s'il vaut mieux partir sur un design en fluid ou fixed (je ne connais pas bien tous les avantages/inconvénients) : vous en pensez quoi ?
Mon site va être sous cette forme :
- un header en haut pour le logo et le titre du site
- une barre de navigation verticale sur le coté gauche
- le contenu à droite
- un footer en bas
=> du classique ;)
Si je parts sur un design en fluid, peut-on figer la largeur de mon menu vertical (j'ai l'impression que le framework n'est pas prévu pour ça => soit on est en fluid, soit en fixed, non ?) ?
=> je dois faire la méthode barbarre : style="width:300px;" ?
Pour le menu vertical, j'aimerais que les menus soient pliés (à la façon d'un treeView) et qu'ils se déplient/plient lorsqu'on clique dessus. Est-ce que c'est bien comme ça qu'il faut faire pour la partie HTML ? Ne faut-il pas plutôt insérer des <ul> dans le menu de niveau supérieur plutôt que d'utiliser que d'utiliser des classes (j'aimerais un menu à 3 niveaux mais je ne vois pas comment faire avec cette méthode) ?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">header</div>
</div>
<div class="row-fluid">
<div class="span2">
<nav class="well">
<ul class="nav nav-list">
<li class="nav-header">Menu 1</li>
<li><a href="#"><i class="icon-pencil"></i>Sous-Menu 1</a></li>
<li><a href="#" class="active"><i class="icon-trash"></i>Sous-Menu 2</a></li>
<li><a href="#"><i class="icon-ban-circle"></i>Sous-Menu 3</a></li>
<li class="nav-header">Menu 2</li>
<li><a href="#"><i class="icon-pencil"></i>Sous-Menu 1</a></li>
<li><a href="#" class="disabled"><i class="icon-pencil"></i>Sous-Menu 2</a></li>
</ul>
</nav>
</div>
<div class="span10">
<p>
mon contenu.<br/>
mon contenu.
</p>
</div>
</div>
<div class="row-fluid">
<div class="span12"><p>footer</p></div>
</div>
</div>
</body>
</html>=> Vous connaissez un plugin pour bootstrap pour la gestion du pliage/dépliage du menu ?
=> mon menu, je dois bien le mettre dans un div avec la classe "well" ?
merci d'avance,
2 réponses
pour le menu en fixed / fluid je ne sais pas, a vérifier mais je pense que c'est prévu un minimum par le bootstrap.
un plugin, vaut mieux que tu te tourne vers les librairies jQuery, tu pourra facilement les adapter aux définitions du bootstrap
pour la classe "well" non tu n'es pas obligé. Elle permet juste d'ajouter un fond gris, si tu n'en veut pas ne la met pas ça n’embêtera en rien ton design et/ou la disposition de tes éléments.
Merci pour la réponse
Je n'ai pas trouvé de pluggin qui fasse ce que je veux : je suis entrain d'essayer d'en créer un...