html - Bootstrap 选项卡的自定义样式

Question

我正在尝试更改默认的 Bootstrap 选项卡样式。所以我的自定义样式应该类似于此图像的样式。

我试过了，还是不行。最主要的是不会扭曲每个选项卡的底部。

.content .nav-tabs {
  background: #dd5b5b;
  padding: 15px 0 0 0;
}
.content .nav-tabs > li > a {
  padding: 5px 40px;
  background: #eaedf2;
  border: 1px solid #a48686;
  border-bottom: none;
  border-top-right-radius: 2em;
  border-top-left-radius: 1.5em;
}

JS BIN到目前为止的代码

任何人都可以使用纯 css 帮助我获得如上图所示的输出吗？

谢谢。

Answer 1

Bootstrap 很容易允许自定义选项卡及其行为。

对于颜色，请考虑在您的 CSS 中使用渐变，根据需要在相应的类中工作。这是一个不错的生成器:http://www.colorzilla.com/gradient-editor/

对于图标，您可以只使用 FontAwesome ( http://fontawesome.io/icons/ ) 或类似的网络字体。