twitter-bootstrap - 响应式 Bootstrap 3 的轮播指示器的 CSS 形状

Question

所以，我正在做一个元素，一半是个人的，一半是为了考试。我已经完成了整个基础架构，完成了样式设计，一切都快完成了，但我仍然想学习实现它的一件事，即:响应式轮播指示器的 CSS 形状。

现在， 我们都知道 Bootstrap 3 Carousels 是怎样的，我们知道它们有一些附加功能来显示指示器，指示 slider 处于事件位置的位置，以及在它们之间导航的箭头。 我以前从未使用过的唯一东西是 CSS/3 Shapes，我只是因为我从未尝试过做这样的事情而感到沮丧(我认为这是一件很容易做的事情)。

所以是的，我有点疯狂地退出并删除了轮播的整个代码片段(我尝试过但我有点放弃并决定放弃，冷静一下再试一次..没有像你一样工作可能会注意到。)

聊够了，我正在使用这个 Carousel

        <div class="container">
        <div class="row">
            <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel" data-slide-to="0" class="active"></li>
              <li data-target="#carousel" data-slide-to="1"></li>
              <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
                <div class="carousel-inner">
                    <div class="item">
                        <img src="../images/0044-new.jpg">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Example headline.</h1>
                                <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="../images/0033-new.jpg">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Another example headline.</h1>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item active">
                        <img src="../images/0045-new.jpg">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>One more for good measure.</h1>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <a class="left carousel-control" href="#carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="right carousel-control" href="#carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> -->
            </div>
        </div>
    </div>

现在，我试图实现的是这种不需要图像的外观(如果可能的话，更喜欢将所有内容都放在 CSS 文件中。) 请记住，这是一个粉丝网站，并非试图复制。只是想让它感觉更像一点(不过我确实有自己的风格。)

我的问题是:在保持响应能力的同时解决这个问题的最佳方法是什么？因为我现在肯定与 Viewports 断点有关，但老实说，我完全不知道它们是如何工作的(仍然无法理解，但我正在空闲时间阅读文档)

提前致谢!

Answer 1

因此您可以使用边框半径制作圆圈。我可能会用一个 block 和两个 css 三 Angular 形作为伪元素(:before 和 :after)来制作轮播按钮部分背景。

请看我在这里制作的 fiddle :http://jsfiddle.net/andyfurniss/yb1x7zso/

ul {
    position:relative;
    display:inline-block;
    padding:10px 20px;
    margin:0 20px;
    font-size:0;
    background:#111;
}

ul:before {
    content:"";
    position:absolute;
    left:-20px;
    top:0;
    width:0;
    height:0;
    border-top:30px solid #111;
    border-left:20px solid transparent;
}

ul:after {
    content:"";
    position:absolute;
    right:-20px;
    top:0;
    width:0;
    height:0;
    border-top:30px solid #111;
    border-right:20px solid transparent;
}

li {
    display:inline-block;
    width:10px;
    height:10px;
    background:#fff;
    border-radius:5px;
}

li.current {
    background:red;
}

li + li {
    margin-left:10px;
}

<ul>
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

关于响应能力，我只使用媒体查询来调整“光盘”和“光盘”容器的大小。

媒体查询让您可以为特定分辨率或分辨率范围指定样式，这就是 Bootstrap 的工作方式。我不确定在 bootstrap 中你需要更改什么地方，因为我并没有真正使用它，因为我喜欢从头开始使用我的样式，但请看一下这个以获得一些解释:https://css-tricks.com/css-media-queries/ .