使用Bootstrap制作导航栏

时间:2016-11-17 02:13:18

标签: css twitter-bootstrap user-interface frontend

目前我正在尝试使用bootstrap制作形状导航栏

目前这是我的代码段

<div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <style>
          </style>
          <style>
            #nav-brand-bg{
              background-color: red;
              width: 100px;
              height: 100px;
              position: relative;
            }
          </style>
          <div id="nav-brand-bg"></div>
            <a class="navbar-brand" href="index.html">
            <img src="http://smarti-oc.dev/image/templates/smarti-new-logo.png" alt="">
          </a>
          <a class="navbar-brand" href="index.html">
            <img src="http://smarti-oc.dev/image/templates/malaysia_resize.png" alt="">
          </a>
      </div>

是否有任何关键或线索来制作这个? 非常感谢你们。

1 个答案:

答案 0 :(得分:0)

我要去刺......

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <div id="nav-brand-bg"></div>
  <div id="navwrap">

    <div id="trapezoid">

    </div>
    <div id="bar">

    </div>
  </div>
cd .

这使用了一种不同的方法,但由于我看不到你的图像,这看起来像你的目的吗?