在Bootstrap中创建特殊的导航栏

时间:2015-08-31 21:17:25

标签: css twitter-bootstrap css3 twitter-bootstrap-3

我正在学习HTML,CSS和Bootstrap,我对如何制作这样的导航栏有一些疑问。谢谢! http://i.stack.imgur.com/jVoi4.png

1 个答案:

答案 0 :(得分:2)

Add bootstrap  https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css


Use this demo 

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>