") == -1) { html = " " + html; } html = html.replace("",""); html = html.replace("",""); html = html.replace("",""); html = html.trim(); doc.innerHTML = html; return ( doc.innerHTML.toLowerCase() === html.toLowerCase() ); } function codeCheckWarningClose() { document.getElementById("codeCheckWarning").style.display = "none"; } function codeCheckCorrectClose() { document.getElementById("codeCheckCorrect").style.display = "none"; }
菜单
×
×
正确!

练习

添加所需的属性以使选项卡可切换。

<ul class="nav nav-tabs"> <li><a data-toggle="tab" href="#home">首页</a></li> <li><a data-toggle="tab" href="#menu1">菜单 1</a></li> <li><a data-toggle="tab" href="#menu2">菜单 2</a></li> </ul>
<ul class="nav nav-tabs"> <li><a data-toggle='tab' href="#home">首页</a></li> <li><a data-toggle='tab' href="#menu1">菜单 1</a></li> <li><a data-toggle='tab' href="#menu2">菜单 2</a></li> </ul>
<ul class="nav nav-tabs"> <li><a DATA-TOGGLE='tab' href="#home">首页</a></li> <li><a DATA-TOGGLE='tab' href="#menu1">菜单 1</a></li> <li><a DATA-TOGGLE='tab' href="#menu2">菜单 2</a></li> </ul>
<ul class="nav nav-tabs"> <li><a DATA-TOGGLE="tab" href="#home">首页</a></li> <li><a DATA-TOGGLE="tab" href="#menu1">菜单 1</a></li> <li><a DATA-TOGGLE="tab" href="#menu2">菜单 2</a></li> </ul>

不正确

点击这里重新尝试。

正确!

下一个 ❯
<ul class="nav nav-tabs"> <li><a  href="#home">首页</a></li> <li><a  href="#menu1">菜单 1</a></li> <li><a  href="#menu2">菜单 2</a></li> </ul>

  
  
  




 

BOOTSTRAP 3 表格
BOOTSTRAP 3 图片
BOOTSTRAP 3 警报
BOOTSTRAP 3 按钮
BOOTSTRAP 3 图示
BOOTSTRAP 3 徽章
BOOTSTRAP 3 进度条
BOOTSTRAP 3 分页
BOOTSTRAP 3 面板
BOOTSTRAP 3 下拉菜单
BOOTSTRAP 3 选项卡
BOOTSTRAP 3 导航栏

×

重置分数?

这将重置所有 54 个练习的分数。

您确定要继续吗?



×

恭喜!

您已完成所有 54 个 BOOTSTRAP 3 练习。

分享您的分数



获取认证!

参加我们的 Bootstrap 开发人员认证,证明您拥有 Bootstrap 3 的基础知识。