Bootstrap Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Exemple de navigation Bootstrap</title>
    <meta name="description" content="Exemple de barre de navigation Bootstrap">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style type="text/css">
        .socials {
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active">
                    <a class="brand" href="../index.html">w3cschool</a>
                </li>
                <li><a href="../index.html">À propos</a></li>
                <li><a href="../index.html">Portfolio</a></li>
                <li><a href="../index.html">Contact</a></li>
            </ul>
            <ul class="nav">
                <li class="dropdown">
                    <a href="../index.html"
                     class="dropdown-toggle"
                     data-toggle="dropdown">
                        Services
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="../index.html">Design Web</a></li>
                        <li><a href="../index.html">Développement Web</a></li>
                        <li><a href="../index.html">Développement de thèmes WordPress</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-search pull-left">
                <input type="text" class="search-query" placeholder="Rechercher">
            </form>
            <ul class="nav pull-right">
                <li class="dropdown">
                    <a href="../index.html"
                     class="dropdown-toggle"
                     data-toggle="dropdown">
                        Social
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
<li class="socials"><!-- Placez cette balise à l'endroit où le bouton +1 doit être affiché. -->
                            <g:plusone annotation="inline" width="150"></g:plusone>
                        </li>
                        <li class="socials"><div class="fb-like" data-send="false" data-width="150" data-show-faces="true"></div></li>
                        <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweeter</a>
                            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>
</body>
</html>

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">

            <!-- .btn-navbar est utilisé comme bascule pour le contenu de la barre de navigation réduite -->
            <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>

            <!-- Assurez-vous de laisser la marque à cet endroit si vous voulez qu'elle soit affichée -->
            <a class="brand" href="../index.html">Nom du projet</a>

            <!-- Tout ce que vous voulez masquer à 940px ou moins, placez-le ici -->
            <div class="nav-collapse">
                <!-- .nav, .navbar-search, .navbar-form, etc -->
            </div>

        </div>
    </div>
</div>