很棒的Bootstrap选项卡切换效果

前端技术 2023/09/01 JavaScript

今天学习了Bootstrap的选项卡，在这里分享一下，具体解释代码中都有，不再重复了。
先看一下效果图吧，显目一些！


实现代码：

<!DOCTYPE html>
<html lang=\"zh-cn\">
<head>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">
  <title>Bootstrap选项卡</title>
  <!-- 引入Bootstrap的样式表 -->
  <link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.min.css\">
  <link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap-responsive.min.css\">
</head>
<body>

<h1 class=\"btn btn-success btn-large\"><i class=\"icon-user icon-white\"></i>Hello world!</h1>
<!-- nav 清除li的默认样式 -->
<!-- nav-tabs 定义选项卡的标题栏 -->
<!-- tab-content 定义了选项卡的内容栏 -->
<!-- 在内容栏中，每个子框都必须包含tab-pane类 -->
<!-- a标签中的href必须要和内容栏中的子框的id对应 -->
<!-- active表示活动中的标题栏和内容子框，且每个标签栏都必须对于一个data-toggle=\'tab\' -->
<ul class=\"nav nav-tabs\">
  <li><a href=\"#tab1\" data-toggle=\"tab\">li1</a></li>
  <li><a href=\"#tab2\" data-toggle=\"tab\">li2</a></li>
  <li class=\"active\"><a href=\"#tab3\" data-toggle=\"tab\">li3</a></li>
  <li><a href=\"#tab4\" data-toggle=\"tab\">li4</a></li>
</ul>
<div class=\"tab-content\">
  <div class=\"tab-pane\" id=\"tab1\"><img src=\"img/1.png\"></div>
  <div class=\"tab-pane\" id=\"tab2\"><img src=\"img/2.png\"></div>
  <div class=\"active tab-pane\" id=\"tab3\"><img src=\"img/3.png\"></div>
  <div class=\"tab-pane\" id=\"tab4\"><img src=\"img/4.png\"></div>
</div>


<!-- 引入Bootstrap的js文件 -->
<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"js/bootstrap.min.js\"></script>
<script type=\"text/javascript\" src=\"js/bootstrap-tab.js\"></script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/2466

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案