Twitter bootstrap 在引导中创建功能区标题

如何在bootstrap中创建ribbon标头，并且我需要响应，最好的方法是将此标头分为两部分，我是说左侧和右侧，ribbon必须如下所示：

我的代码是：

.ribbon{
字体大小：16px！重要；
/*此ribbon基于16px字体和24px垂直节奏。我使用em定位每个元素以实现可伸缩性。如果要使用不同的字体大小，可能需要调整ribbon元素的位置*/
宽度：75%；
位置：相对位置；
背景色：#fafafa；
背景图像：-moz线性梯度（顶部，#ffffff，#f2f2）；
背景图像：-webkit渐变（线性，0.0，0.100%，从（#ffffff）到（#f2f2））；
背景图像：-webkit线性渐变（顶部，#ffffff，#f2f2）；
背景图像：-o-线性梯度（顶部，#ffffff，#f2f2）；
背景图像：线性渐变（到底部，#ffffff，#f2f2）；
背景重复：重复-x；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffffff'，endColorstr='#fff2f2'，GradientType=0）；
边框：1px实心#d4；
颜色：#fff；
文本对齐：居中；
填料：1米2米；
/*适应*/
保证金：2em自动3em；
/*基于24px垂直节奏。48px底部边距-通常为24，但色带“图形”本身占用24px，因此我们将其加倍*/
}
.ribbon:之前，
.ribbon:之后{
内容：“；
位置：绝对位置；
显示：块；
底部：-1米；
边框：1.5em实心#F2F2；
/*侧带*/
z指数：-1；
}
.ribbon:之前{
左：-2米；
右边框宽度：1.5em；
左边框颜色：透明；
}
.ribbon:之后{
右：-2米；
左边框宽度：1.5em；
右边框颜色：透明；
}
.ribbon.ribbon内容：在，
.ribbon.ribbon内容：在{
内容：“；
位置：绝对位置；
显示：块；
边框样式：实心；
边框颜色：#E2E2透明；
底部：-1米；
}
.ribbon.ribbon内容：之前{
左：0；
边框宽度：1米0.1米；
}
.ribbon.ribbon内容：在{
右：0；
边框宽度：1米1米0；
}

我已经使用伪元素和css三角形快速实现了这一点。也许它能激励你

正文{
背景色：白色；
}
标题{
位置：相对位置；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
宽度：95%；
高度：40px；
}
页眉：：之前，
标题：：之后{
内容：''；
显示：块；
位置：绝对位置；
}
标题：：之前{
高度：40px；
宽度：50px；
右：-30px；
顶部：4px；
背景色：深蓝色；
z指数：-1；
}
标题：：之后{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：20px 20px 20px 0；
边框颜色：透明白色透明；
右：-30px；
顶部：4px；
}

标题

为了实现这一点，您需要使用一些元素（包括伪元素）来创建一些图形：

.wrapper{
保证金：0自动；
高度：400px；
宽度：400px；
背景：浅灰色；
位置：相对位置；
/*需要*/
}
.横幅{
位置：绝对位置；
顶部：5px；
左：0；
宽度：105%；
身高：20%；
背景：矢车菊蓝；
}
.横幅：之前{
内容：“；
位置：绝对位置；
身高：100%；
右：0；
宽度：5%；
排名：0；
变换：歪斜（-20度）；
变换原点：右上角；
背景：蓝色；
z指数：-1；
}
.横幅：之后{
内容：“；
位置：绝对位置；
-webkit框大小：边框框；
框大小：边框框；
身高：90%；
宽度：100%；
边框：2个黑色虚线；
左边界：无；
边界权：无；
最高：5%；
左：0；
}
.横幅{
位置：绝对位置；
排名前10%；
左：100%；
身高：50%；
宽度：10%；
背景：番茄；
z指数：-2；
}
.横幅跨度：之前{
内容：“；
位置：绝对位置；
最高：100%；
左-150%；
身高：100%；
宽度：300%；
背景：红色；
变换：skewX（45度）；
z指数：-2；
}
.横幅跨度：之后{
内容：“；
位置：绝对位置；
排名：0；
左-150%；
身高：100%；
宽度：300%；
背景：红色；
变换：skewX（-45度）；
z指数：-2；
}

我们不为您编写代码。到目前为止你的努力是什么？这是你该问的地方<代码>；）是的，我的错，我把我的代码加上去了。这是很多代码。你有活小提琴吗？没有，但我现在可以做一把了