css - 如何使用 bootstrap3 创建具有两种颜色的导航栏

Question

如何使用 less 和 bootstrap 3 创建具有两种颜色的导航栏，如下所示：

http://imageshack.us/photo/my-images/208/fity.png/

Answer 1

您可以使用默认的引导 HTML 代码来创建导航栏。如果您不想要他们的样式，您可以删除 'navbar-default' 类。

然后你只想将<ul class="nav">内部浮动<nav>到右侧，给它一个背景颜色并在它的前面添加一个三角形。

为了制作三角形，我会为和使用CSS 边框:before创建一个伪元素来创建三角形。然后负边距该 :before 元素将其带到导航前面，然后您就离开了。<ul class="nav">

我已经对 HTML 和 CSS 做了一些修改。

当然应该让你开始。

http://jsfiddle.net/davidpauljunior/5JzdU/