資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
廣告