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

对于这个HTML：

<div class="da-dots">
    <span class="dotbox">
        <span class="dot"></span>
    </span>
    <span class="dotbox">
        <span class="dot"></span>
    </span>
    <span class="dotbox">
        <span class="dot active"></span>
    </span>
    <span class="dotbox">
        <span class="dot"></span>
    </span>
</div>

这个CSS：

.dotbox {
    width:16px;
    height:16px;
    display:inline-block;
    padding:3px;
    background: rgba(255, 255, 255, 0.13);
    text-align:center;
}

.dot.active{
    background:#ffffff;
}

.dot{
    width:10px;
    height:10px;
    display:inline-block;
    border-radius:50%;
    border:1px solid #ffffff;   
}

请参阅this demo fiddle.

或没有阴影框，对于此HTML：

<div class="da-dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot active"></span>
    <span class="dot"></span>
</div>

这个CSS：

.dot {
   width:16px;
    height:16px;
    display:inline-block;
    border-radius:50%;
    border:1px solid #ffffff;
}

.dot.active{
    background:#ffffff;
}

请参阅this demo fiddle

HTH

Answer 2

最简单的解决方案是使用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>

Answer 3

正如我所说，最好的是复制并粘贴bootstrap源代码，以适应您的标记

这个html

<div class="da-dots">
    <span ></span>
    <span class="active"></span>
    <span ></span>
</div>

和这个css

.da-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center; 
  background: #777;
  padding: 10px 0;
}

.da-dots span {
  display: inline-block;
  width:  10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;    
  background-color: #000 \9; // IE8
  background-color: rgba(0,0,0,0); // IE9
}
.da-dots .active {
  margin: 0;
  width:  12px;
  height: 12px;
  background-color: #fff;
}

您有this结果