Wie hinzufügen von social media buttons-bootstrap-nav

Ich versuche, fügen Sie Twitter -, Google+ - und Facebook-Schaltflächen, um eine navigation, header, so dass Sie erscheinen auf der rechten Seite der oberen rechten Ecke der Kopfzeile auf einer Linie, die über das nav-Menü.

Ich bin mit Bootstrap.

Ich tred die forllowing:

1) row-Klasse
2) Tabelle mit zwei Zeilen
3) ein weiteres ul

Nicht funktioniert. Im folgenden finden Sie den code ohne die social button links.

HTML:

<div class="nav">
  <div class="container">
    <span class="pull-left">
      <a href="home.html">
          <img src="images/logo150.png" width="150">
      </a>
    </span>
    <ul class="pull-right">
      <li><a class="active" href="home.html">Get Muse</a></li>
      <li><a href="page1.html">Page1</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
  </div>
</div>

CSS:

.nav .pull-right {
  padding-top: 40px;
}

.nav {
  border-bottom: 1px solid #dbdbdb;
}

.nav a {
  color: #5a5a5a;
  font-size: 14px;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}
Was meinst du damit, das Sie hinzufügen möchten social-media-buttons? Icons? Links?
Ich meine die Twitter-Follow-button, der Facebook Like-Button, den Google+ +1 Button. Danke!
about.twitter.com/resources/buttons developers.facebook.com/docs/plugins/like-button developers.google.com/+/web/+1button

InformationsquelleAutor alexyes | 2014-07-21

  1. 5

    Wenn Sie mit Bootstrap, würde ich vorschlagen, kleben Bootstrap-Klassen, so viel wie möglich, und machen Sie das raster Ihrer neuen BFF. Lernen Sie die ins und aus dem Netz sparen Sie Stunden und Stunden individuell.

    In diesem Sinne, denke ich, sollten Sie stapeln Sie Ihre zwei Reihen von nav-Elementen (social links und dann nav-Verknüpfungen) in einem rechts-gezogen grid-Klasse (ich hatte col-xs-8 etwas willkürlich in meinem Beispiel).

    Und verwenden Sie dann http://fontawesome.io für Ihre social-icons.

    <div class="col-xs-8 pull-right text-right">
<ul>
  <li><a href="#"><i class="fa fa-stack-overflow"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<ul class="pad-top">
  <li><a class="active" href="home.html">Get Muse</a></li>
  <li><a href="page1.html">Page1</a></li>
  <li><a href="page2.html">Page2</a></li>
  <li><a href="page3.html">Page3</a></li>
</ul>

    Musste ich raten, einige deiner Anforderungen (button-style, Höhe des logo-img), aber dieses Beispiel sollte Euch auf die richtige Spur: http://www.bootply.com/27qTRDLOKw

    Danke! Btw, der zweite link scheint nicht zu funktionieren (bootply.com/27qTRDLOKw)
    Darauf können Sie Wetten! der link funktioniert für mich. bootply hat durchaus ein bit der Ausfallzeiten, so muss es gewesen sein, dass...

    InformationsquelleAutor Shawn Taylor

Schreibe einen Kommentar