Question

我需要制作一个简单的6页网站。这是到目前为止主页的代码

<hmtl>
<style>
    .ali{
        width:170px;
        text-align:center;
    }
footer{
  background:#333;
  color:#eee;
  font-size:11px;
  padding-top: 25px;
 padding-bottom: 25px;
 text-align:center;

}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<body>
    <div class="container" id="main">
        <div class="navbar navbar-inverse">
            <ul class="nav navbar-nav">
                <li class="ali"><a href="page1.html">Page 1</a></li>
                <li class="ali"><a href="#">Page 2</a></li>
                <li class="ali"><a href="#">Page 3</a></li>
                <li class="ali"><a href="#">Page 4</a></li>
                <li class="ali"><a href="#">Page 5</a></li>
                <li class="ali"><a href="#">Page 6</a></li>
            </ul>
        </div>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">   
                    <img src="http://cdn.desktopwallpapers4.me/wallpapers/photography/1920x1080/3/24275-world-through-a-lens-1920x1080-photography-wallpaper.jpg" alt="Lens">
                </div>

                <div class="item">
        <img src="http://newartcolorz.com/images/lens-wallpaper/kartandtinki1_lens-wallpaper_03.jpg" alt="lesis">
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>  <!-- end of carousel inner -->
    </div> <!-- end of carousel -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <hr></hr>
            <h6>Copyright &copy; 2015 {Author}</h6>
          </div>
        </div>
      </div>
    </footer>
</body>

我使用导航栏作为网页之间的导航。但我想要做的是在点击导航栏时仅用新页面替换文档的轮播部分。但是现在在媒体上它完全重新加载了一个我不想做的新页面。如果我使用引导选项卡而不是导航栏，我该怎么做，我需要改变什么呢？

Answer 1

您可以使用Tab，在您的情况下，将6页的内容放在不同的tab div中，让Bootstrap发挥魔力。但是，我认为，你想要的是6个不同的页面和相同的导航栏。 Bootstrap不包含此类功能。您可能希望使用某个框架，例如AngularJS（创建自定义指令或仅使用ng-include指令）来执行此操作。

Answer 2

要防止重新加载文档，您需要使用bootstrap Togglable tabs

我应该使用什么bootstrap组件？

2 个答案: