如何手动实现Bootstrap导航栏？探索媒体对象和导航组件的使用方法
最编程
2024-01-22 08:35:14
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap 组件之 媒体对象（图文混排）、 导航组件</title>
<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">
<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>
</head>
<body>
<!--
媒体组件：使用类名 media
使用： 只需要引用bootstrap 的css即可
使用方法：
<div class="container">
<div class="row">
<div class="col">
// media为媒体组件的外部盒子
<div class="meida">
<a href="#"><img src="xxxx" alt="" srcset=""></a>
// 媒体组件的body
<div class="media-body">
<h5>标题</h5>
xxx内容
</div>
</div>
</div>
</div>
</div>
// 对齐方式：
顶部对齐（默认）：使用类名 align-self-start 放在a 链接那里
垂直对齐：使用类名 align-self-center 放在a 链接那里
底部对齐：使用类名 align-self-end 放在a 链接那里
==================导航组件===============================
使用： 需要3个js,(jq, bootstrap, prop) 1个css(bootstrap)
导航组件：使用类名 nav nav-link
使用方法：
<div class="container">
<div class="row">
<div class="col">
// nav 标志为导航的外部盒子
<ul class="nav">
// nav-link 单个选项
<li><a href="#" class="nav-link">item1</a></li>
<li><a href="#" class="nav-link">item2</a></li>
<li><a href="#" class="nav-link">item3</a></li>
<li><a href="#" class="nav-link">item4</a></li>
<li><a href="#" class="nav-link">item5</a></li>
</ul>
// 或者直接使用h5里面的语义化标签
<nav class="nav">
<a href="#" class="nav-link">item1</a>
<a href="#" class="nav-link">item2</a>
<a href="#" class="nav-link">item3</a>
<a href="#" class="nav-link">item4</a>
<a href="#" class="nav-link">item5</a>
</nav>
</div>
</div>
</div>
// 对齐方式： 需要加载nav 这个类名后面
左对齐（默认）： justify-content-start
右对齐： justify-content-end
居中对齐 justify-content-center
两端对齐 justify-content-between
均分对齐 justify-content-around
// 垂直排列： 需要加在nav的后面
flex-column: 垂直排列， 一行排列，含有响应式，
含有响应式： flex-{breakpoint}-column
// tabs标签， 选项卡 使用类名 nav-tabs 加在nav的后面
使用方法：
<div class="container">
<div class="row">
<div class="col">
// nav-tabs 标志为tabs的选项卡
<ul class="nav nav-tabs ">
// nav-item 每一个选项卡的样式 active 选中的
<li class="nav-item active"><a href="#item1" data-toggle='tab' class="nav-link">item1</a></li>
<li class="nav-item"><a href="#item2" data-toggle='tab' class="nav-link">item2</a></li>
<li class="nav-item"><a href="#item3" data-toggle='tab' class="nav-link">item3</a></li>
<li class="nav-item"><a href="#item4" data-toggle='tab' class="nav-link">item4</a></li>
<li class="nav-item"><a href="#item5" data-toggle='tab' class="nav-link disabled">item5</a></li>
</ul>
<div class='tab-content'>
<div class="tab-pane fade show active" id="">item1</div>
<div class="tab-pane fade show" id="">item2</div>
<div class="tab-pane fade show" id="">item3</div>
<div class="tab-pane fade show" id="">item4</div>
<div class="tab-pane fade show" id="">item5</div>
</div>
</div>
</div>
</div>
// 胶囊tabs 使用类名 nav-pills
//分配大小，内容自动撑开 使用类名 nav-fill 使用在nav的后面
// 分配大小，宽度为等宽 使用类名 nav-justified 使用在nav的后面
// 弹性布局：
列如：
flex-column， flex-sm-row； 除了小屏幕以外屏幕下面都是竖着排列，小屏幕横着排列
// 下拉菜单
只需要在li里面放一个下拉菜单组件即可
js 方法与事件：
方法：
// 选中第几个的tab,确定选中某一个为激活状态
$('').tab('show')
事件:
显示当前项
$('').on('show.sb.tab',function(){})
完全显示当前项
$('').on('shown.sb.tab',function(){})
隐藏当前项
$('').on('hide.sb.tab',function(){})
完全隐藏当前项
$('').on('hidden.sb.tab',function(){})
==================导航栏=======================
导航栏包含导航组件和其他的组件
引入的文件： 3js 1css
使用方法: 使用nav标签 使用类名 nav-bar
：
//navbar-expand-lg 用于做响应式布局横向排列
<nav class="nav-bar navbar-expand-lg">
// logo
<a href="#" class="nav-brand"><img src="xxx" width="30">logo</a>
// 导航
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
<a href="#" class="nav-link">item2</a>
<a href="#" class="nav-link">item3</a>
</li>
</ul>
</nav>
// 配色方案
使用的背景是原来的8个bg-primary/success 等
使用字体的颜色， 深色使用navbar-dark 浅色使用navbar-light
// 居中容器：
使用container就行
//定位
使用类名：
flex-top（固定在顶部） 加在navbar后面
flex-bottom（固定在底部） 加在navbar后面
sticky-top（粘性固定在顶部） 加在navbar后面
// 响应式：
实现响应式导航:
<nav class="navbar navbar-expand-md bg-success navebar-dark">
<a href="#" class="nav-brand"><img src="xxx" width="30">logo</a>
// 在小屏显示三杆的按钮
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbar'>
<span class="navbar-toggler-icon"></span>
</button>
// collapse 折叠面板基础类名
<div class="collapse navbar-collapse" id="navbar">
// 导航
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
<a href="#" class="nav-link">item2</a>
<a href="#" class="nav-link">item3</a>
</li>
</ul>
</div>
</nav>
=====================导航案列==============================
实现bootstrap官网的导航
-->
<style>
.navbarBg {
min-height: 4rem;
background-color: #563d7c;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.navbar-nav-svg {
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: text-top;
}
</style>
<header class="navbar navbar-expand navbar-dark navbarBg flex-column flex-md-row">
<!-- 图标 -->
<a href="#" class="navbar-brand mr-0 mr-md-2">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612"
role="img" focusable="false">
<title>Bootstrap</title>
<path fill="currentColor"
d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z">
</path>
<path fill="currentColor"
d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z">
</path>
</svg>
</a>
<!-- 左侧的导航栏 -->
<ul class="navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">item1</a></li>
<li class="nav-item"><a href="#" class="nav-link">item2</a></li>
<li class="nav-item"><a href="#" class="nav-link">item3</a></li>
<li class="nav-item"><a href="#" class="nav-link">item4</a></li>
<li class="nav-item"><a href="#" class="nav-link">item5</a></li>
</ul>
<!-- 右侧的导航栏 -->
<ul class="navbar-nav ml-md-auto">
<li class="nav-item dropdown active">
<a href="#" class="nav-link dropdown-toggle mr-2" data-toggle='dropdown'> v4.5
</a>
<div class="dropdown-menu dropdown-menu-md-right">
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank"
rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg"
viewBox="0 0 512 499.36" role="img" focusable="false">
<title>GitHub</title>
<path fill="currentColor" fill-rule="evenodd"
d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z">
</path>
</svg></a>
</li>
<li class="nav-item">
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank"
rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg"
viewBox="0 0 512 499.36" role="img" focusable="false">
<title>GitHub</title>
<path fill="currentColor" fill-rule="evenodd"
d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z">
</path>
</svg></a>
</li>
<li class="nav-item">
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank"
rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg"
viewBox="0 0 512 499.36" role="img" focusable="false">
<title>GitHub</title>
<path fill="currentColor" fill-rule="evenodd"
d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z">
</path>
</svg></a>
</li>
<li class="nav-item">
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank"
rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg"
viewBox="0 0 512 499.36" role="img" focusable="false">
<title>GitHub</title>
<path fill="currentColor" fill-rule="evenodd"
d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02
推荐阅读
-
在React和Vue中，我们是如何玩转router的？ - 使用HTML5 History API，React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作： 1. 当URL发生变化时，React Router悄悄地“监听”浏览器地址栏的改动，主要通过popstate事件来察觉url更改。 2. 随着URL的变化，Router会对照预先设定好的JavaScript路由配置对象，依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线，React Router就会如魔法般地渲染相应的组件到网页上，从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
如何手动实现Bootstrap导航栏？探索媒体对象和导航组件的使用方法