来自回流黑客的bootstrap列(创建像水平滑块一样的netflix)

时间:2013-10-10 18:06:28

标签: javascript jquery html css twitter-bootstrap

我正在尝试使用bootstrap和css重新创建netflix水平滑块/轮播:http://media.idownloadblog.com/wp-content/uploads/2013/08/Netflix-My-List-web-screenshot-002.jpg

我还没有设置css过渡/动画,但我已经获得了重复的元素,而不使用宽度黑客进行回流。我计划使用javascript重复元素,并使容器的宽度只与内部元素一样宽。这是我的代码:http://jsfiddle.net/MgcDU/7541/

HTML

<div class="container">
<div class="row">
    <div class="col-xs-2 hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>    
</div>
</diV>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container{
    height: 150px;
    background: grey;
    width: 500%
}
.hero-unit {
    display:inline-block;
    background-color:red;
    height: 100px;
}

这是一个超级的方法吗?我在网络开发方面不是很有经验。

0 个答案:

没有答案
相关问题