附加到div的引导箭头 [英] Bootstrap arrow that's attached to div

问题描述

一般来说，我对引导程序和前端框架非常陌生.但是，我能够注意到使用引导程序的站点的共同点.下图包含了一些我在引导站点中无处不在的内容.指向下方文本的向下(或任何方向)蓝色箭头也是我所指的.

I'm very very new to bootstrap and front-end frameworks in general. But, I am able to notice the characteristics that sites that use bootstrap have in common. The following picture contains something that I find to be very ubiquitous amongst bootstrap sites. The downward (or any direction) blue arrow that's pointing the the text below it is what I'm referring too.

我用萤火虫检查了元素，发现它与 .hero-unit div有关.

I used firebug to inspect the elements and found it to be something that was relevant to the .hero-unit div.

这是如何工作的以及如何完成的?

How exactly does this work and how is it accomplished?

推荐答案

它不是引导程序的标准配置，但这是一篇好文章关于:after 的处理方法，我相信这是您想要的.

It doesn't come standard with bootstrap but Here is a good article on how to do with :after which I believe is what you are looking for.

演示

.hero:after {
    z-index: -1;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    content:'';
    width: 0;
    height: 0;
    border-top: solid 10px #e15915;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

通过调整 border-* 属性以及margin-left(border * -1)，可以使三角形变大或变小.

You make the triangle larger and smaller by adjusting the border-* attributes, and also the margin-left(border * -1).

这篇关于附加到div的引导箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！