5

在 twitter 引导程序上有一些功能示例，这些示例包含在具有类“bs-docs-example”的 DIV 中。每个这样的 DIV 的左上角都有字符​​串“示例”。我想知道那个字符串是从哪里来的，我是否可以使用/自定义它？

4

2 回答 2

7

如果您查看 Github for Bootstrap，您会发现它.bs-docs-example已content: "Example"设置好::after（有关如何使用 CSS3 管理内容的说明，请参见此处）。

基本上， .bs-docs-example 附加了这种风格：

.bs-docs-example::after
{
    content: "Example";
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: whiteSmoke;
    border: 1px solid #DDD;
    color: #9DA0A4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}

如果您修改content成员，您将修改文本。

于 2012-09-13T10:33:01.650 回答
0

我知道这有点晚了，但我也想要相同的功能，但想用自定义文本代替单词 example。我想出了一个快速的小工作，使用非常接近的现有引导程序代码，不需要破解引导程序。

也许这可以帮助其他正在寻找的人

<div class="row">    
  <div class="span12 thumbnail">
    <span class="thumbnail span1 muted text-center" style="margin-top:-5px; margin-left:-5px; background-color:#f5f5f5;">
      <small><strong>YOUR CUSTOM TEXT</strong></small>
    </span>    
  </div>
</div>

基本上，您使用缩略图类来获取 div 周围的边框，然后在嵌套 div 中再次使用它并偏移它并更改背景颜色。除了右上角和左下角略微弯曲外，它看起来非常接近，但是您可以在框中放置任何您想要的内容，文本，链接等。

于 2013-04-06T14:58:52.717 回答