bootstrap的经典案例

最新推荐文章于 2025-02-10 13:26:05 发布

背地里装个英雄

最新推荐文章于 2025-02-10 13:26:05 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/qq_44193064/article/details/106044829

版权

一.tab页切换
1.通过data属性
可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式.

eg:

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#profile" data-toggle="tab">介绍</a></li>
  <li><a href="#messages" data-toggle="tab">消息</a></li>
  <li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>

二.通过JS
(1).通过JavaScript启用可切换标签 (每个标签都需要单独激活):

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

(2)以多种方式激活标签:

$('#myTab a[href="#profile"]').tab('show'); // 通过名字选择
$('#myTab a:first').tab('show'); // 选择第一个标签
$('#myTab a:last').tab('show'); // 择最后一个标签
$('#myTab li:eq(2) a').tab('show'); // 选择第三个标签

三.
$().tab
激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。
eg:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">首页</a></li>
    <li><a href="#profile">介绍</a></li>
    <li><a href="#messages">消息</a></li>
    <li><a href="#settings">设置</a></li>
  </ul>
  
  <div class="tab-content">
    <div class="tab-pane active" id="home">首页内容..</div>
    <div class="tab-pane" id="profile">介绍内容...</div>
    <div class="tab-pane" id="messages">消息内容..</div>
    <div class="tab-pane" id="settings">设置内容..</div>
  </div>
  
  

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<script>
	$(function () {
	    $('#myTab a:last').tab('show');
	  })
	  $('#myTab a').click(function (e) {
	  e.preventDefault();
	  $(this).tab('show');
	})
	
	</script>
  </body>
</html>

在这里插入图片描述
四.事件描述:
show: 该事件在标签开始展示时（尚未渲染完之前）触发。 event.target 指向要激活的标签，event.relatedTarget 提向之前已激活的标签（如果有的话）。
shown: 该事件在标签已经呈现后（已渲染完成）触发。 event.target 指向要激活的标签， event.relatedTarget提向之前已激活的标签（如果有的话）。
eg:

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // 当前活动的标签
  e.relatedTarget // 上一个选择的标签
})

二.导航栏

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <style>
	.nav>li{
		margin-left: 20px;
	}
	.nav>li>a{
		line-height: 50px;
	}
	.nav{
		width: 500px;
		height: 50px;
		background-color: red;
		margin: 0 auto;
			}
	 </style>
    <title></title>
  </head>
  <body>

  <!--导航-->
 <ul class="nav nav-tabs">
   <li role="presentation" class="active"><a href="#">首页</a></li>
   <li role="presentation"><a href="#">活动</a></li>
   <li role="presentation"><a href="#">官网</a></li>
 </ul>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	
  </body>
</html>

在这里插入图片描述
三.分页

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <style>
	/* .nav>li{
		margin-left: 20px;
	}
	.nav>li>a{
		line-height: 50px;
	}
	.nav{
		width: 500px;
		height: 50px;
		background-color: red;
		margin: 0 auto;
			} */
			.pagination li a{
				display: inline-block;
				width: 30px;
				height: 30px;
				border: 1px solid red;
				background-color: gold;
				padding-top: 1px;
				list-style: none;
				
			}
	 </style>
    <title></title>
  </head>
  <body>

 <nav aria-label="Page navigation">
   <ul class="pagination">
     <li>
       <a href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
       </a>
     </li>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
     <li><a href="#">5</a></li>
     <li>
       <a href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
       </a>
     </li>
   </ul>
 </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<script>
	
	
	</script>
  </body>
</html>

在这里插入图片描述