Résolu Aide pour mise en page et stylisation site avec bootstrap

  • Auteur de la discussion Auteur de la discussion Frisy
  • Créé le Créé le
Statut
N'est pas ouverte pour d'autres réponses.

Frisy

Membre
Inscription
24 Janvier 2013
Messages
799
Réactions
80
Points
11 323
RGCoins
25
Voila je voudrais styliser mon site c'est a dire y mettre des couleur des séparations etc..

Je cherche aussi comment faire une belle navbar comme celle la:

Merci de vote aide :)
 
Voila je voudrais styliser mon site c'est a dire y mettre des couleur des séparations etc..

Je cherche aussi comment faire une belle navbar comme celle la:

Merci de vote aide :)
Prend des bootstraps payant et tu httrack :troll:
 
Salut,


Cadeau :
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cerulean/bootstrap.min.css" rel="stylesheet"><!-- // Thème Cerulean basé sur bootsrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- // Font-awesome pour les icones -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Mon super site</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#"><i class="fa fa-home"></i> Accueil</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bullhorn"></i> News</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-commenting-o"></i> Forum</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user"></i> Mon compte <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lien 1</a></li>
                            <li><a href="#">Lien 2</a></li>
                            <li><a href="#">Lien 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">

        Contenu de ton site ici ....

    </div>
  
  
<!-- // Les javascripts nécessaires (jQuery & Bootstrap) -->  
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Comme tu l'as demandé, c'est une base bootstrap.. . Puis pour les icônes.

@Kilian' (auteur du lien que tu présentes) à fait son CSS tout seul et pour la police d'icône il a utilisé .
 
Salut,


Cadeau :
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cerulean/bootstrap.min.css" rel="stylesheet"><!-- // Thème Cerulean basé sur bootsrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- // Font-awesome pour les icones -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Mon super site</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#"><i class="fa fa-home"></i> Accueil</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bullhorn"></i> News</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-commenting-o"></i> Forum</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user"></i> Mon compte <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lien 1</a></li>
                            <li><a href="#">Lien 2</a></li>
                            <li><a href="#">Lien 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">

        Contenu de ton site ici ....

    </div>
 
 
<!-- // Les javascripts nécessaires (jQuery & Bootstrap) --> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Comme tu l'as demandé, c'est une base bootstrap.. . Puis pour les icônes.

@Kilian' (auteur du lien que tu présentes) à fait son CSS tout seul et pour la police d'icône il a utilisé .
Merci :)
 
Voila je voudrais styliser mon site c'est a dire y mettre des couleur des séparations etc..

Je cherche aussi comment faire une belle navbar comme celle la:

Merci de vote aide :)
Oh mon site mdrrr Oui moi j'ai tout fait moi même je trouve ça mieux car quand tu connais bien tu sais vraiment ce que tu fait mais après si tu veut faire du bootstrap et bien bonne chance car c'est pas si facile que ça ;)
Salut,


Cadeau :
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cerulean/bootstrap.min.css" rel="stylesheet"><!-- // Thème Cerulean basé sur bootsrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- // Font-awesome pour les icones -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Mon super site</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#"><i class="fa fa-home"></i> Accueil</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bullhorn"></i> News</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-commenting-o"></i> Forum</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user"></i> Mon compte <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lien 1</a></li>
                            <li><a href="#">Lien 2</a></li>
                            <li><a href="#">Lien 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">

        Contenu de ton site ici ....

    </div>


<!-- // Les javascripts nécessaires (jQuery & Bootstrap) -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Comme tu l'as demandé, c'est une base bootstrap.. . Puis pour les icônes.

@Kilian' (auteur du lien que tu présentes) à fait son CSS tout seul et pour la police d'icône il a utilisé .
Merci de m'avoir identifié ;)
 
Salut,


Cadeau :
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cerulean/bootstrap.min.css" rel="stylesheet"><!-- // Thème Cerulean basé sur bootsrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- // Font-awesome pour les icones -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Mon super site</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#"><i class="fa fa-home"></i> Accueil</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bullhorn"></i> News</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-commenting-o"></i> Forum</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user"></i> Mon compte <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lien 1</a></li>
                            <li><a href="#">Lien 2</a></li>
                            <li><a href="#">Lien 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">

        Contenu de ton site ici ....

    </div>
 
 
<!-- // Les javascripts nécessaires (jQuery & Bootstrap) --> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Comme tu l'as demandé, c'est une base bootstrap.. . Puis pour les icônes.

@Kilian' (auteur du lien que tu présentes) à fait son CSS tout seul et pour la police d'icône il a utilisé .
Et oui pour la police tu utilise icomoon, ça te génère une police avec tes icone et ça prend moins de temps a la faire chargé car il sait directement quoi mettre le seul problème c'est les navigateurs qui ne prenne pas en compte les polices (Tel que opéra mini) et bien la en utilisant comme moi la balise :before et bien il ne la lira pas et donc ne mettra rien a la place ;)
 
Et oui pour la police tu utilise icomoon, ça te génère une police avec tes icone et ça prend moins de temps a la faire chargé car il sait directement quoi mettre le seul problème c'est les navigateurs qui ne prenne pas en compte les polices (Tel que opéra mini) et bien la en utilisant comme moi la balise :before et bien il ne la lira pas et donc ne mettra rien a la place ;)

Font awesome fonctionne de la même manière, c'est une police d'écriture :oui:
 
Oh mon site mdrrr Oui moi j'ai tout fait moi même je trouve ça mieux car quand tu connais bien tu sais vraiment ce que tu fait mais après si tu veut faire du bootstrap et bien bonne chance car c'est pas si facile que ça ;)

C'est tout à ton mérite de faire ça de toi même. C'est ce que je conseille aux gens qui veulent apprendre.. Au moins on maitrise mieux le CSS et après, seulement après, on peut s'intérresser au framework selon moi :)
 
Font awesome fonctionne de la même manière, c'est une police d'écriture :oui:
Ah, autent pour moi, ouais, bah je sais pas quelle est le temps de chargement le moins long entre les deux, mais après ça prend de la place sur le serveur mais si avec fa tu fait un petit <link...> et bien la ça en prend pas mais fait l'importer a chaque fois donc je sais pas le quelle prend le moins de temps ;)
 
C'est tout à ton mérite de faire ça de toi même. C'est ce que je conseil aux gens qui veulent apprendre.. Au moins on maitrise mieux le CSS et après, seulement après, on peut s'intérresser au framework selon moi :)
Oui comme ça tu sais ce que tu fait, le travaille n'est pas maché après je comprend pour les développeur backend (PHP..) c'est plus simple car ils n'ont pas envie de passer 4h pour créer leurs "application" sur PHP..
 
Ah, autent pour moi, ouais, bah je sais pas quelle est le temps de chargement le moins long entre les deux, mais après ça prend de la place sur le serveur mais si avec fa tu fait un petit <link...> et bien la ça en prend pas mais fait l'importer a chaque fois donc je sais pas le quelle prend le moins de temps ;)

Il y a le cache du navigateur qui évite de recharger le fichier à chaque fois.
Sinon, en terme de perf, faut faire un benchmark.. ou analyser via la console de dev.

Après, en utilisant un CDN (Content Delivery Network), le temps de chargement est optimisé parce que :
- c'est du cloud
- si le fichier a déjà été chargé sur un autre site, il est déjà en cache dans le navigateur et donc n'est plus rechargé!
 
Oui comme ça tu sais ce que tu fait, le travaille n'est pas maché après je comprend pour les développeur backend (PHP..) c'est plus simple car ils n'ont pas envie de passer 4h pour créer leurs "application" sur PHP..
Avant que les framework CSS existent, on avait pas le choix (d)
 
Il y a le cache du navigateur qui évite de recharger le fichier à chaque fois.
Sinon, en terme de perf, faut faire un benchmark.. ou analyser via la console de dev.

Après, en utilisant un CDN (Content Delivery Network), le temps de chargement est optimisé parce que :
- c'est du cloud
- si le fichier a déjà été chargé sur un autre site, il est déjà en cache dans le navigateur et donc n'est plus rechargé!
Ouais après on vas vraiment chercher la perf la ;)
 
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut