章节
问答
课签
笔记
评论
占位
占位

按钮(嵌套分组)

很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。如下所示:

使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。如下所示:

<div class="btn-group">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
   <ul class="dropdown-menu">
         <li><a href="##">公司简介</a></li>
         <li><a href="##">企业文化</a></li>
         <li><a href="##">组织结构</a></li>
         <li><a href="##">客服服务</a></li>
    </ul>
</div>
</div>

实现的样式代码:

/*查看bootstrap.css文件第3192行~第3223行*/

.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}

 

任务

我来试试:完成下面任务

编写代码实现导航条效果,效果图:

备注:这一小节没有正确性验证,请查看结果窗口与任务所给的结果图片是否一致,从而判断输入代码是否正确。

?不会了怎么办

参考代码:

<div class="btn-group">
  <button class="btn btn-default" type="button">首页</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="##">收割机</a></li>
        <li><a href="##">电动机</a></li>
        <li><a href="##">拖拉机</a></li>
        <li><a href="##">电动车</a></li>
      </ul>
  </div>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <button class="btn btn-default" type="button">关于我们</button>
</div>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
body{margin:30px
    ;padding
    :30px}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / Gan干
如果是强迫症的话,你可以把btn-group换成dropdown,一样的效果.或者你在btn-group的后面再加一个dropdown也可以.

最新回答 / 慕用0199381
data-toggle 为类名,这个类名下会有一些样式,控制着元素的形态

最新回答 / qq_阿喀琉斯_0
修改一下JQ和BOOTSTRAP的引用路径就好了~

已采纳回答 / 慕码人1194994
a href ="" 默认打开的还是当前页面,会刷新一下重新打开。a href ="#" 浏览器地址栏网址后面会多显示1个#。不会刷新页面,会回到页面顶部。使用 <a> 标签 + onclick='{jscode}'  时经常会加一个 href='###',而有时这个 href='###' 会被误写为 <a href='#'> 是因为使用者没有理解 '#' 和 '###' 的区别, '#' 是有特定意义的,如果 '#' 后有内容会被认为是一个标签而从页面找到相应标签跳转到该处,找不...

最新回答 / 慕粉4218480
直接覆盖CSS即可

最新回答 / qq_你好旧时光_2
有效果啊。。。。我试了一下阔以的啊

最新回答 / 一个学渣
用,mousehover,  $(function(){$("li").mouseover(function(){$(this).show()})})

最新回答 / flyforeverth
data-toggle的值只能是modal

最新回答 / NadiaSmile
我也不知道 /(ㄒoㄒ)/~~直接这么用吧,出事了再说吧。。。。

已采纳回答 / Neo_嘟教授
强行加,看看有反应不。<...code...>

最新回答 / qq_溪水潺潺_0
你先拷贝别人 的代码去试试下拉菜单能否显示。然后在看自己代码是否出错了。仔细检查

最新回答 / Deany
可以弹出来,是你浏览器的问题

已采纳回答 / 灬诺诺
dropdown-toggle是下拉菜单样式,data-toggle是js属性,而dropdown是属性值。data-toggle="dropdown"表示引用js给外层添加一个open类,<div class="dropdown">默认没有open,点击一次为<div class="dropdown open">,再点击一次为<div class="dropdown">,以此
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言