jquery - css Carousel Bootstrap "da-dots"编辑

Question

亲爱的 CSS/Bootstrap 社区，

我目前正在学习 bootstrap 的设计方面，如何编辑等等

我尝试了很多不同的改变，但我想要实现的仍然暗示着我。

现在，这是我的 CSS:

.da-dots span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.13);
    margin: 3px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0,0,0,0) inset, 1px 1px 1px rgba(255,255,255,0);
    border: 2px solid rgba(255, 255, 255, 0.0);
}

现在是这个样子:

如您所见，对于我的事件 da-dot，我有一个白色圆圈。现在，我想更改为:

事件 da-dot:就像现在一样，减去背景阴影。

未激活的 da-dot:相同大小的圆圈，只是未填充。

基本上我想实现这样的目标:

为了完整起见，这里是相关部分的 html:

<section id="home">
    <div class="banner-container">
        <img src="images/banner-bg.gif" alt="banner" />
        <div class="container banner-content">
            <div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Webdesigner</h2>
                    <p>Amazing free responsive website for free, enjoy!!!</p>
                    <div class="da-img"></div>
                </div>
                <div class="da-slide">
                    <h2>UX/UI Developer</h2>
                    <p>I develop website using Bootstrap front-end framework..</p>
                    <div class="da-img"></div>
                </div>
                <div class="da-slide">
                    <h2>HTML5/CSS3</h2>
                    <p>HTML5 is a markup language used for structuring and presenting Web.</p>
                    <div class="da-img"></div>
                </div>
                <div class="da-slide">
                    <h2>JavaScript/jQuery</h2>
                    <p>jQuery: Write Less, Do More...</p>
                    <div class="da-img"></div>
                </div>
            <!--  <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav> -->
            </div>
        </div>
    </div>
</section>

Answer 1

最简单的解决方案是使用 Bootstrap 的 carousel-indicators class

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>