数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Bootstrap 默认克隆侧边栏？
在网页上，侧边栏是一个垂直列，放置在左侧或右侧。它通常用于显示其他信息或导航链接。Bootstrap 的响应式和移动优先“画布外”组件从屏幕侧面滑入视图。
Bootstrap 是一种 CSS 框架，它提供多种工具和功能来创建在所有设备上都具有响应性的网站。侧边栏是 Bootstrap 最常用的元素之一。它将页面划分为 12 列，侧边栏就是使用此框架创建的。我们将使用 CSS 网格框架和一些独特的样式来创建侧边栏。
方法 1
在此示例中，我们将使用 Bootstrap 创建一个导航侧边栏。侧边栏将使用 Bootstrap 进行克隆。
算法
步骤 1创建一个新的 HTML 文件，并包含 Bootstrap CSS 和 JavaScript 文件。
步骤 2在其中添加一个容器 div 和一个行 div。
步骤 3添加带有 <ul> <li> 标签的 div 以在侧边栏中创建行。
步骤 4在行中添加导航菜单项。
步骤 5将页面的主要内容添加到第二个 div 中。
步骤 6>自定义 CSS 样式以使侧边栏固定且响应。
示例
<html>
<head>
<style>
.sidebar {
background-color: skyblue;
height: 100%;
width: 500px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding-right: 60px;
transition: 0.5s;
}
.sidebar h2,
li {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
/* Transition effect of h2 and li */
transition: 0.3s;
}
.sidebar li:hover {
/* Sidebar items change color
when hovered over */
color: white;
}
.content {
background-color: white;
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
input[type="checkbox"] {
display: none;
}
/* Toggling of sidebar */
input:checked~.content {
left: 0;
}
input:checked~label {
left: 0;
}
/* Styling of the button */
label {
z-index: 2;
position: absolute;
top: 0;
left: 200px;
background-color: Skyblue;
color: white;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
</style>
</head>
<body>
<!-- This division contains
the sidebar and its content -->
<div class="main-wrap">
<input id="slide-sidebar" type="checkbox"
role="button"/>
<label for="slide-sidebar">
<span>menu</span>
</label>
<div class="sidebar">
<h2>ABC.com</h2>
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
<div class="content">
<h1 style="color: Blue;">
Welcome To ABC Business
</h1>
</div>
</div>
</body>
</html>
方法 2
在此示例中，我们将设计一个在点击按钮时打开的侧边栏。
算法
步骤 1 创建一个新的 HTML 文件，并包含 Bootstrap CSS 和 JavaScript 文件。
步骤 2添加 div 和行中的导航菜单项。
步骤 3将页面的主要内容添加到第二个 div 中。
步骤 4自定义 CSS 样式以使侧边栏固定且响应。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sidebar {
width: 0;
height: 100%;
/* 0 width */
position: fixed;
/* Fixed place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: skyblue;
/* Disable horizontal scroll */
overflow-x: hidden;
/* Place content 60px from the top */
padding-top: 60px;
/* Transition effect to slide
in the sidebar */
transition: 0.5s;
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
}
/* Mouse over the navigation
links, to change their color */
.sidebar a:hover {
color: blue;
}
/* Position and style the close
button at top right corner */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The button used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: skyblue;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: skyblue;
}
#main {
/* If you want a transition effect */
transition: margin-left 0.5s;
padding: 20px;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="newSidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav()">
Menu
</a>
<a href="#">This is sidebar menu</a>
</div>
<div id="main">
<h1 style="color: Blue;">
Welcome to ABC Business
</h1>
<button class="openbtn" onclick="openNav()">Menu
</button>
<h2>
Click button to open menu </h2>
</div>
<script>
function openNav() {
document.getElementById(
"newSidebar").style.width = "200px";
document.getElementById(
"main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById(
"newSidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script>
</body>
</html>
结论
使用 Bootstrap 克隆侧边栏是一种快速有效的方法，可以提供实用的功能并增强用户与您网站的交互。了解 Bootstrap 的组件以及如何使用它们来构建侧边栏对于创建响应式网站至关重要。在克隆侧边栏时，还必须牢记您网站及其访问者的特定需求。
更新于： 2023年5月19日
225 次查看
广告