Salut à tous,

après maintes recherches de framework CSS pour mon portfolio, j'en reviens finalement à la conclusion comme quoi Bootstrap serait pour moi l'outil me permettant d'avoir le plus d'outils dont j'ai besoin pour le site. Ce n'est clairement pas le meilleur des frameworks, en particulier pour un usage hors admin interface mais je constate qu'il me manque souvent pleins d'éléments avec d'autres frameworks tel que Bulma, UIkit... Et sans prendre en compte l'aide que je trouverais plus facilement avec Bootstrap. 

Étant donné que je commence tout juste le projet, je souhaiterais utiliser la dernière version du Framework (Bootstrap 4) car de nombreux ajouts sont intéressants. Seulement la navbar a subit plusieurs changements et il plus difficile de modifier son apparence, du mois pour correspondre à ce que je souhaite faire. Pour faire simple, je souhaite lui donner une apparence semblable à celle de Bulma.
Pour le moment voici le résultat que j'ai:

<nav class="navbar navbar-toggleable-md sticky-top navbar-light bg-faded">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<a class="navbar-brand" href="#">
		<img src="http://www.comeleleu.fr/picture/logo/RXLogoLarge.png" height="30" class="d-inline-block align-top" alt="">
	</a>
	<div class="collapse navbar-collapse" id="navbarToggler">
		<ul class="navbar-nav mr-auto mt-2 mt-md-0">
			<li class="nav-item active">
				<a class="nav-link" href="#">Accueil</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Compétences</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Projets</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">A propos</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contact</a>
			</li>
		</ul>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control" type="text" placeholder="Recherche">
		</form>
	</div>
</nav>

De même, je souhaiterais par la suite insérer un icon dans la barre de recherche à la manière de UIkit.

Merci pour votre aide.

Bonjour,

Bootstrap 4 n'est encore qu'en Alpha actuellement (version 6) et vas donc subir encore beaucoup de changement.

Ensuite, que souhaites tu exactement? Tu dit vouloir lui donner l'apparence de Bulma mais c'est vague ça. Le résultat que tu as actuellement ne me choque pas : https://jsfiddle.net/mk8ot8sa/

Pour ce qui es de l'icône c'est à toi de travailler un minimum. Englobe ton input dans une <div> en position:relative et place y à l’intérieur ton icône en position:absolute. Ajoute un padding à ton input et le tour est joué. Absolument rien d'insurmontable ici. Quelque chose ce style : http://plnkr.co/edit/5D8fv5o5egpKpYz509O3?p=preview

Merci de ton aide Morpheus, c'et effectivement quelque chose dans le genre que je cherche pour l'input. J'ai conscience que Bootstrap 4 va encore évoluer mais j'image que ce sera plus des ajouts de fonctionnalités que des classes retravaillées entre les versions (comme entre bootstrap 3 et 4). Je ne devrait donc pas trop être déstabilise pour mettre à jour la version du framework utilisée.

Pour l'apparence de la navbar, ce qui m'intéresse est l'ajout d'un border-bottom pour les liens .active et :hover. Seulement lorsque j'essaie de mettre un border-bottom sur nav-item ou nav-link, il ne se situe pas en bas de la navbar mais plus vers le milieu... La class Bulma correspondant à ce que je souhaite se nomme .is_tab

<nav class="navbar navbar-toggleable-md sticky-top navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">
        <img src="http://www.comeleleu.fr/picture/logo/RXLogoLarge.png" height="30" class="d-inline-block align-top" alt="">
    </a>
    <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav mr-auto mt-2 mt-md-0">
            <li class="nav-item active" style="border-bottom: 5px solid red;">
                <a class="nav-link" href="#">Accueil</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Compétences</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Projets</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">A propos</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control" type="text" placeholder="Recherche">
        </form>
    </div>
</nav>

Merci de ton aide

-
Edité par Radiax18 24 avril 2017 à 16:47:48

A toi d'ajuster une nouvelle fois!

Souhaites tu ce genre de rendu : https://jsfiddle.net/mk8ot8sa/5/

-
Edité par Lord Morpheus 24 avril 2017 à 17:31:44

C'est super c'est exactement ce que je souhaitais, je n'ai qu'a apporter quelques modifications. Il va falloir que je me mette à lire le code du framework en plus car la documentation ne fait pas tout.

Radiax18 a écrit:

C'est super c'est exactement ce que je souhaitais, je n'ai qu'a apporter quelques modifications. Il va falloir que je me mette à lire le code du framework en plus car la documentation ne fait pas tout.

Exactement!

Bonjour, 

je continue le topic car je constate que j'ai rencontré un problème lors de l'intégration du code.

L'idée de Lord Morpheus est très bonne mais ne prends pas en compte le fait que les margin et padding de la navbar Bootstrap change selon la taille de l'écran.Cela avait dont un impacte négatif lorsque la navbar était affichée pour mobile avec des padding trop petits. Le problème a été résolu en utilisant les classes py-0, py-2, py-md-3 (entre autre) de bootstrap pour que les marges soient remises selon le support.

Autre soucis, le lien qui est mis en active dépend du scroll-spy de Bootstrap. Ce n'est donc pas <li class="nav-item"> qui est mis en active, mais son enfant direct <a class="nav-link">. En soit ceci ne devrait pas poser problème car je n'ai à première vue qu'à modifier le nom des propriétés css qui ajoutent un border-bottom de manière à ce qu'elles pointent vers nav-link au lieu de nav-item. Seulement dans ce cas, comme le :hover à un border-bottom plus petit, il se retrouve en haut par rapport à l'autre au lieu d'être collé au bas. Solution, laisser le :hover sur nav-item mais là la bordure bleue s'ajoute à la bordure rouge, ce qui est moche.
En bidouillant un peu, j'ai trouvé cette solution mais est-ce la solution la plus propre ?
J'espère être clair

Merci.

-
Edité par Radiax18 27 avril 2017 à 16:28:52