javascript - 将弹出栏与 Bootstrap 5 集成
问题描述
我正在使用 bootstrap 5，并且正在尝试集成组件调用bizzbar。
在下面找到我的示例代码：
/*
Bizz Bar
*/
$(document).ready(function() {
$("open").click(function() {
$("#bizzbar").effect("bounce", "slow");
$("open").slideUp()
})
});
$(document).ready(function() {
$("#bizzbar").effect("bounce", "slow");
$("close").click(function() {
$("#bizzbar").slideUp();
$("open").slideDown()
})
});/**
* Hellobar
*/
#bizzbar {
background: #eb593c;
width: 100%;
text-align: center;
color: #fff;
padding: 2px;
overflow: hidden;
height: 30px;
z-index: 1000;
font-family: Georgia;
font-size: 14px;
line-height: 30px;
position: fixed;
top: 0;
left: 0;
border-bottom: 3px solid rgb(255, 255, 255);
box-shadow: 0 1px 5px rgba(0, 0, 0, .7)
}
#bizzbar button {
-webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
background: #333;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: none;
box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
color: white;
cursor: pointer;
font-size: 0.854em;
margin: 0px 0px 0px 7px;
outline: none;
padding: 2px 10px 1px;
position: relative;
text-decoration: initial
}
#bizzbar button:hover {
cursor: pointer;
background: #444
}
#bizzbar button:active {
top: 1px
}
close {
width: 20px;
height: 19px;
bottom: 6px;
right: 20px;
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px;
position: absolute
}
close:hover {
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px;
cursor: pointer;
height: 19px
}
open {
-webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png);
background-position: 0px -8px;
background-repeat: no-repeat no-repeat;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 3px solid rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
display: block;
height: 0px;
outline: none;
overflow: hidden;
padding: 80px 0px 0px;
position: absolute;
right: 10px;
top: -50px;
width: 35px;
z-index: 100;
background-color: #eb593c;
display: none
}
open:hover {
background-color: #ff5a3d;
cursor: pointer
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Product</a></li>
<li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li>
<li><a href="#" class="nav-link px-2 text-white">Industries</a></li>
<li><a href="#" class="nav-link px-2 text-white">Education</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>
<div class="text-end">
<!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="container pt-3">
<!--
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item" aria-current="page">Insider</li>
<li class="breadcrumb-item active" aria-current="page">Apple</li>
</ol>
</nav>
-->
<div id='bizzbar'>
<p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p>
<close></close>
</div>
<open></open>
<div class="text-center py-5 px-0">
Content
</div>
</main>
<!-- /.container -->
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">Build by Test.com</p>
<p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p>
</div>
</footer>目前我的 hellobar 覆盖了我的标题。
任何建议如何动态地将我的标题推到 hellobar 下方，如果我删除它，标题会再次上升？
感谢您的回复！
解决方案
您可以在打开 Bizzbar 时添加margin-top与 Bizzbar ( ) 高度相同的值，30px并在关闭 Bizzbar 时将其删除。但这是不好的做法，因为您必须在更改 CSS 时更改脚本。
工作示例：（我在标题中添加了一个，以便在应用transition时它不会“跳转”margin）
/*
Bizz Bar
*/
$(document).ready(function() {
$("#bizzbar").effect("bounce", "slow");
$('header').css('margin-top', '30px');
$("open").click(function() {
$("#bizzbar").effect("bounce", "slow");
$("open").slideUp();
$('header').css('margin-top', '30px');
});
$("close").click(function() {
$("#bizzbar").slideUp();
$("open").slideDown();
$('header').css('margin-top', '0px');
});
});header {
transition: margin .8s;
}
/**
* Hellobar
*/
#bizzbar {
background: #eb593c;
width: 100%;
text-align: center;
color: #fff;
padding: 2px;
overflow: hidden;
height: 30px;
z-index: 1000;
font-family: Georgia;
font-size: 14px;
line-height: 30px;
position: fixed;
top: 0;
left: 0;
border-bottom: 3px solid rgb(255, 255, 255);
box-shadow: 0 1px 5px rgba(0, 0, 0, .7)
}
#bizzbar button {
-webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
background: #333;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: none;
box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
color: white;
cursor: pointer;
font-size: 0.854em;
margin: 0px 0px 0px 7px;
outline: none;
padding: 2px 10px 1px;
position: relative;
text-decoration: initial
}
#bizzbar button:hover {
cursor: pointer;
background: #444
}
#bizzbar button:active {
top: 1px
}
close {
width: 20px;
height: 19px;
bottom: 6px;
right: 20px;
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px;
position: absolute
}
close:hover {
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px;
cursor: pointer;
height: 19px
}
open {
-webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png);
background-position: 0px -8px;
background-repeat: no-repeat no-repeat;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 3px solid rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
display: block;
height: 0px;
outline: none;
overflow: hidden;
padding: 80px 0px 0px;
position: absolute;
right: 10px;
top: -50px;
width: 35px;
z-index: 100;
background-color: #eb593c;
display: none
}
open:hover {
background-color: #ff5a3d;
cursor: pointer
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Product</a></li>
<li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li>
<li><a href="#" class="nav-link px-2 text-white">Industries</a></li>
<li><a href="#" class="nav-link px-2 text-white">Education</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>
<div class="text-end">
<!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="container pt-3">
<!--
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item" aria-current="page">Insider</li>
<li class="breadcrumb-item active" aria-current="page">Apple</li>
</ol>
</nav>
-->
<div id='bizzbar'>
<p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p>
<close></close>
</div>
<open></open>
<div class="text-center py-5 px-0">
Content
</div>
</main>
<!-- /.container -->
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">Build by Test.com</p>
<p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p>
</div>
</footer>更好的方法是使用脚本检查/获取高度。不幸的是，outerHeight()当您关闭 Bizzbar 时，唯一的结果是正确的：
/*
Bizz Bar
*/
$(document).ready(function() {
$("#bizzbar").effect("bounce", "slow");
console.log($('#bizzbar').outerHeight());
$("open").click(function() {
$("#bizzbar").effect("bounce", "slow");
$("open").slideUp();
console.log($('#bizzbar').outerHeight());
});
$("close").click(function() {
$("#bizzbar").slideUp();
$("open").slideDown();
console.log($('#bizzbar').outerHeight());
});
});header {
transition: margin .8s;
}
/**
* Hellobar
*/
#bizzbar {
background: #eb593c;
width: 100%;
text-align: center;
color: #fff;
padding: 2px;
overflow: hidden;
height: 30px;
z-index: 1000;
font-family: Georgia;
font-size: 14px;
line-height: 30px;
position: fixed;
top: 0;
left: 0;
border-bottom: 3px solid rgb(255, 255, 255);
box-shadow: 0 1px 5px rgba(0, 0, 0, .7)
}
#bizzbar button {
-webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
background: #333;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: none;
box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
color: white;
cursor: pointer;
font-size: 0.854em;
margin: 0px 0px 0px 7px;
outline: none;
padding: 2px 10px 1px;
position: relative;
text-decoration: initial
}
#bizzbar button:hover {
cursor: pointer;
background: #444
}
#bizzbar button:active {
top: 1px
}
close {
width: 20px;
height: 19px;
bottom: 6px;
right: 20px;
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px;
position: absolute
}
close:hover {
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px;
cursor: pointer;
height: 19px
}
open {
-webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png);
background-position: 0px -8px;
background-repeat: no-repeat no-repeat;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 3px solid rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
display: block;
height: 0px;
outline: none;
overflow: hidden;
padding: 80px 0px 0px;
position: absolute;
right: 10px;
top: -50px;
width: 35px;
z-index: 100;
background-color: #eb593c;
display: none
}
open:hover {
background-color: #ff5a3d;
cursor: pointer
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Product</a></li>
<li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li>
<li><a href="#" class="nav-link px-2 text-white">Industries</a></li>
<li><a href="#" class="nav-link px-2 text-white">Education</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>
<div class="text-end">
<!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="container pt-3">
<!--
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item" aria-current="page">Insider</li>
<li class="breadcrumb-item active" aria-current="page">Apple</li>
</ol>
</nav>
-->
<div id='bizzbar'>
<p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p>
<close></close>
</div>
<open></open>
<div class="text-center py-5 px-0">
Content
</div>
</main>
<!-- /.container -->
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">Build by Test.com</p>
<p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p>
</div>
</footer>因此你必须得到padding和border计算高度：
let bb_height = $('#bizzbar').height();
const bb_padding = parseInt($('#bizzbar').css('padding'));
const bb_border = parseInt($('#bizzbar').css('border-bottom-width'));
bb_height += (2 * bb_padding) + bb_border;
工作示例：
/*
Bizz Bar
*/
$(document).ready(function() {
let bb_height = $('#bizzbar').height();
const bb_padding = parseInt($('#bizzbar').css('padding'));
const bb_border = parseInt($('#bizzbar').css('border-bottom-width'));
bb_height += (2 * bb_padding) + bb_border;
$("#bizzbar").effect("bounce", "slow");
$('header').css('margin-top', bb_height + 'px');
$("open").click(function() {
$("#bizzbar").effect("bounce", "slow");
$("open").slideUp();
$('header').css('margin-top', bb_height + 'px');
});
$("close").click(function() {
$("#bizzbar").slideUp();
$("open").slideDown();
$('header').css('margin-top', '0px');
});
});header {
transition: margin .8s;
}
/**
* Hellobar
*/
#bizzbar {
background: #eb593c;
width: 100%;
text-align: center;
color: #fff;
padding: 2px;
overflow: hidden;
height: 30px;
z-index: 1000;
font-family: Georgia;
font-size: 14px;
line-height: 30px;
position: fixed;
top: 0;
left: 0;
border-bottom: 3px solid rgb(255, 255, 255);
box-shadow: 0 1px 5px rgba(0, 0, 0, .7)
}
#bizzbar button {
-webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
background: #333;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: none;
box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
color: white;
cursor: pointer;
font-size: 0.854em;
margin: 0px 0px 0px 7px;
outline: none;
padding: 2px 10px 1px;
position: relative;
text-decoration: initial
}
#bizzbar button:hover {
cursor: pointer;
background: #444
}
#bizzbar button:active {
top: 1px
}
close {
width: 20px;
height: 19px;
bottom: 6px;
right: 20px;
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px;
position: absolute
}
close:hover {
background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px;
cursor: pointer;
height: 19px
}
open {
-webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png);
background-position: 0px -8px;
background-repeat: no-repeat no-repeat;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 3px solid rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
display: block;
height: 0px;
outline: none;
overflow: hidden;
padding: 80px 0px 0px;
position: absolute;
right: 10px;
top: -50px;
width: 35px;
z-index: 100;
background-color: #eb593c;
display: none
}
open:hover {
background-color: #ff5a3d;
cursor: pointer
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Product</a></li>
<li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li>
<li><a href="#" class="nav-link px-2 text-white">Industries</a></li>
<li><a href="#" class="nav-link px-2 text-white">Education</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>
<div class="text-end">
<!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="container pt-3">
<!--
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item" aria-current="page">Insider</li>
<li class="breadcrumb-item active" aria-current="page">Apple</li>
</ol>
</nav>
-->
<div id='bizzbar'>
<p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p>
<close></close>
</div>
<open></open>
<div class="text-center py-5 px-0">
Content
</div>
</main>
<!-- /.container -->
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">Build by Test.com</p>
<p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p>
</div>
</footer>推荐阅读
- javascript - 使用 Azure 函数的动态输出 blob 路径
- jquery - 考虑到 thead 和 tbody 添加具有 td 索引的行
- javascript - 为什么Javascript构造函数不返回
- hashicorp-vault - Hashicorp Vault 令牌看起来不像 UUID
- angular - SweetAlert 与 Angular 7
- cmd - 查找文件夹中的所有目录大小
- c# - 拍摄不带显示的网络摄像头快照的任务
- zpl - ZPL 字符串方尖碑
- python - 使用子进程在 Shell/Python 中获取字符串
- amazon-web-services - SQS 或 Kinesis 哪个更适合排队？