代码之家  ›  专栏  ›  技术社区  ›  Vic Alfieri

引导手风琴和标签导航在一页?

tabbed-interface bootstrap-accordion twitter-bootstrap
  •  0
  • Vic Alfieri  · 技术社区  · 7 年前

    我希望每个标签都有一组不同的手风琴链接,每个标签加载不同的内容。

    这可能吗? 

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>beerwinefoodmixer</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <img src="assets/img/bws-logo.png" class="logo"/>
        <div class="navbar-header">
        </div>
    </div>
</nav>
<div class="clearfix"></div>
<figure class="figtail"><img src="assets/img/cocktail.png" class="cocktail"/></figure>
<p class="rwmatch">There are many cocktail varieties, depending on the base spirit you can blend together many different flavours. Click through the tabs below to discover what you can create with some simple ingredients.</p>
<ul class="nav nav-tabs">
    <li><a href="#tab-1" role="tab" data-toggle="tab">Scotch Based</a></li>
    <li><a href="#tab-2" role="tab" data-toggle="tab">Rum Based</a></li>
    <li><a href="#tab-3" role="tab" data-toggle="tab">Vodka Based</a></li>
    <li><a href="#tab-4" role="tab" data-toggle="tab">Bourbon Based</a></li>
    <li><a href="#tab-5" role="tab" data-toggle="tab">Gin Based</a></li>
</ul>
<br><br>
<div class="tab-content">
    <div class="tab-pane" role="tabpanel" id="tab-1">
        <p>Recipes for Scotch Go Here.</p>
    </div>
    <div class="tab-pane" role="tabpanel" id="tab-2">
        <div class="rumtab">
            <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
                <!--panel 1-->
                <div class="panel panel-default">
                    <div role="tab" class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1">Bacardi Cocktail:</a>
                        </h4>
                    </div>
                    <div role="tabpanel" class="panel-collapse collapse in item-1">
                        <div class="panel-body">
                            <span>50ml Bacardi rum<br />25ml Lime juice<br />10ml Grenadine<br />Shake hard and fine strain<br />
                            </span>
                        </div>
                    </div>
                </div>
                <!--panel 1-->
                <div class="panel panel-default">
                    <div role="tab" class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2">Between the sheets:</a>
                        </h4>
                    </div>
                    <div role="tabpanel" class="panel-collapse collapse item-2">
                        <div class="panel-body">
                            <span>25ml White Rum<br />25ml Cognac<br />25ml Cointreau<br />5ml Gomme<br />Lemon twist<br />Shake hard and fine strain<br />
                            </span>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div role="tab" class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3">Daiquiri:</a>
                        </h4>
                    </div>
                    <div role="tabpanel" class="panel-collapse collapse item-3">
                        <div class="panel-body">
                            <span>50ml Rum<br />25ml Lime juice<br />15ml Sugar Syrup<br />Shake hard and fine strain<br />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-2">
                <div class="panel panel-default">
                    <div role="tab" class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-1">Dark n Stormy:</a>
                        </h4>
                    </div>
                    <div role="tabpanel" class="panel-collapse collapse in item-1">
                        <div class="panel-body">
                            <span>50ml Black Rum<br />25ml Lime juice<br />Top with Ginger beer<br />Lime wedge<br />Build in glass<br />
                            </span>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div role="tab" class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-2">El Floridita no.1:</a>
                        </h4>
                    </div>
                    <div role="tabpanel" class="panel-collapse collapse item-2">
                        <div class="panel-body">
                            <span>50ml Rum<br />25ml Lime juice<br />10ml gomme<br />10ml Maraschino liqueur<br />Shake hard and fine strain<br />
                            </span>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div role="tab" class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-3">El Presidente:</a>
                        </h4>
                    </div>
                    <div role="tabpanel" class="panel-collapse collapse item-3">
                        <div class="panel-body">
                            <span>50ml White Rum 25ml<br />Pineapple juice<br />20ml Lime juice<br />10ml Grenadine<br />Lime wedge<br />Shake hard and fine strain<br />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" role="tabpanel" id="tab-3">
        <p>Recipes for Vodka Go Here</p>
    </div>
    <div class="tab-pane" role="tabpanel" id="tab-4">
        <p>Recipes for Bourbon Go Here</p>
    </div>
    <div class="tab-pane" role="tabpanel" id="tab-5">
        <p>Recipes for Gin Go Here</p>
    </div>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<br />
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span><span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav">
                <li role="presentation"><a href="index.html"><i class="glyphicon glyphicon-home"></i></a></li>
                <li role="presentation"><a href="redwine.html">Red Wine</a></li>
                <li role="presentation"><a href="whitewine.html">White Wine</a></li>
                <li role="presentation"><a href="beer.html">Craft Beer</a></li>
                <li role="presentation"><a href="whitemeat.html">White Meat</a></li>
                <li role="presentation"><a href="redmeat.html">Red Meat</a></li>
                <li role="presentation"><a href="dessert.html">Dessert</a></li>
            </ul>
        </div>
    </div>
</nav>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>


    nav.navbar.navbar-default{
  background-color:#ED7228;
  color:black;
  text-align: center;


}
nav.navbar.navbar-default-1{
  background-color:#ED7228;
  color:black;
  text-align: center;
}

div.navbar-header{
  display: inline-block;
}

ul.nav.navbar-nav a{
  color:#000
}

ul.nav.navbar-nav{
  background-color: #ed7228;
  display:inline-block;
  text-align: center;

}



img.logo{
  display:flex;
  margin:auto;
  height:100px;
}

div.row{
  text-align:center;
  background-color:#ED7228;
  color:#fff;
}

h1.menu{
  background-color:#000;
}

div#center.col-md-4{
  margin-left:auto;
  margin-right:auto;
}

div#bottom-row.row{
}

img.cocktail{
  height:150px;
}

div#bottom.row{
  background-color:white;
}

img.steak{
  height:150px;
}

img.chicken{
  height:150px;
}

img.dessert{
  height:150px;
}

img.redwine{
  height:150px;
}

img.whitewine{
  height:150px;
}

img.beer{
  height:150px;
}

figure.figred{

  margin-left: 150px;
  width:150px;
  display:inline-block;
}

figure.figwhite{

  margin: auto;
  height:150px;
  width:150px;
  display:inline-block;
}

figure.figbeer{

  margin-right: 150px;
  align:right;
  display:inline-block;
}

figure.figchick{
  display:inline-block;
  margin:auto;
}

figure.figsteak{
  display:inline-block;
  margin:auto;

}

figure.figdess{
  display:inline-block;
  margin-left: auto;
}

figure.figtail{
  display:inline-block;

  margin: auto;
}

h4.BWS{
  text-align:center;
}

div.navbar-header{
  text-align:center;
}

article.rwmatch{
  display:flex;
  flex-wrap:wrap;

  height:100px;
}

div.col-md-4{
  display:initial;
  width:500px;
  height:150px;
}

p{
  display:inline-block;
}

p.rwmatch{
  display: inline-block;
  width:400px;
  text-align:justify;
}

figure.figwhite_1{
  width:100px;
  margin-right:75px;
  margin-left:55px;
  display:inline-block;
}

p.wwmatch{
  width:400px;
  text-align:justify;
}

figure.beer{

  display:inline-block;
}

div.imagebox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

p.sectionlink{
  margin: auto;
  display:inline-block;
}

div.sectionlink-1{
  display: flex;
  flex-wrap: wrap;
}

div.rumtab{
  display:flex;
  flex-wrap: wrap;
}
    1 回复  |  直到 7 年前
        1
  •  0
  •   Ankit Singh    7 年前

    用以下内容替换整个html,您没有关闭 </div> 正确地 

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>beerwinefoodmixer</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <img src="assets/img/bws-logo.png" class="logo"/>
            <div class="navbar-header">
            </div>
        </div>
    </nav>
    <div class="clearfix"></div>
    <figure class="figtail"><img src="assets/img/cocktail.png" class="cocktail"/></figure>
    <p class="rwmatch">There are many cocktail varieties, depending on the base spirit you can blend together many different flavours. Click through the tabs below to discover what you can create with some simple ingredients.</p>
    <ul class="nav nav-tabs">
        <li><a href="#tab-1" role="tab" data-toggle="tab">Scotch Based</a></li>
        <li><a href="#tab-2" role="tab" data-toggle="tab">Rum Based</a></li>
        <li><a href="#tab-3" role="tab" data-toggle="tab">Vodka Based</a></li>
        <li><a href="#tab-4" role="tab" data-toggle="tab">Bourbon Based</a></li>
        <li><a href="#tab-5" role="tab" data-toggle="tab">Gin Based</a></li>
    </ul>
    <br><br>
    <div class="tab-content">
        <div class="tab-pane" role="tabpanel" id="tab-1">
            <p>Recipes for Scotch Go Here.</p>
        </div>
        <div class="tab-pane" role="tabpanel" id="tab-2">
            <div class="rumtab">
                <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
                    <!--panel 1-->
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1">Bacardi Cocktail:</a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse in item-1">
                            <div class="panel-body">
                                <span>50ml Bacardi rum<br />25ml Lime juice<br />10ml Grenadine<br />Shake hard and fine strain<br />
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--panel 2-->
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2">Between the sheets:</a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse item-2">
                            <div class="panel-body">
                                <span>25ml White Rum<br />25ml Cognac<br />25ml Cointreau<br />5ml Gomme<br />Lemon twist<br />Shake hard and fine strain<br />
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--panel 3-->
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3">Daiquiri:</a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse item-3">
                            <div class="panel-body">
                                <span>50ml Rum<br />25ml Lime juice<br />15ml Sugar Syrup<br />Shake hard and fine strain<br />
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-2">
                    <!--panel 1-->
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-1">Dark n Stormy:</a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse in item-1">
                            <div class="panel-body">
                                <span>50ml Black Rum<br />25ml Lime juice<br />Top with Ginger beer<br />Lime wedge<br />Build in glass<br />
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--panel 2-->
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-2">El Floridita no.1:</a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse item-2">
                            <div class="panel-body">
                                <span>50ml Rum<br />25ml Lime juice<br />10ml gomme<br />10ml Maraschino liqueur<br />Shake hard and fine strain<br />
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--panel 3-->
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-3">El Presidente:</a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse item-3">
                            <div class="panel-body">
                                <span>50ml White Rum 25ml<br />Pineapple juice<br />20ml Lime juice<br />10ml Grenadine<br />Lime wedge<br />Shake hard and fine strain<br />
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" role="tabpanel" id="tab-3">
            <p>Recipes for Vodka Go Here</p>
        </div>
        <div class="tab-pane" role="tabpanel" id="tab-4">
            <p>Recipes for Bourbon Go Here</p>
        </div>
        <div class="tab-pane" role="tabpanel" id="tab-5">
            <p>Recipes for Gin Go Here</p>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <br />
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span><span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav">
                    <li role="presentation"><a href="index.html"><i class="glyphicon glyphicon-home"></i></a></li>
                    <li role="presentation"><a href="redwine.html">Red Wine</a></li>
                    <li role="presentation"><a href="whitewine.html">White Wine</a></li>
                    <li role="presentation"><a href="beer.html">Craft Beer</a></li>
                    <li role="presentation"><a href="whitemeat.html">White Meat</a></li>
                    <li role="presentation"><a href="redmeat.html">Red Meat</a></li>
                    <li role="presentation"><a href="dessert.html">Dessert</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
    推荐文章
    xajetin  ·  导航不更改滚动上的颜色
    2 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    2 年前
    Bryan Santos  ·  固定表头与引导
    2 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    2 年前
    tym  ·  根据用户偏好显示字段
    2 年前
    Sheryar Khan  ·  如何仅使用html、css、bootstrap、javascript/jquery创建html页面?
    2 年前
    Pavel  ·  当验证DIV可见时,引导网格会移动
    6 年前
    Sam  ·  在标题中嵌入Bootstrap 3导航栏
    6 年前
    Alexander David  ·  折叠卡打开,然后立即再次关闭
    6 年前
    Sandeep Bhardwaj  ·  div的一致行为,与设备分辨率无关
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号