Bootstrap入门练手小项目，创建有侧边栏三级标题可页面跳转的导航
风骨咕咕
帮助1人
目录
前言
在已学习HTML和CSS，以及了解一些JS的基础上接触Bootstrap，编写一个具有侧边栏、三级标题以及可实现页面跳转的小项目
给目前不了解这些内容的小伙伴提供学习链接~
运行效果
效果展示如下，目前只完善了其中一部分，但是基本操作已经可以实现~代码可参考
代码
demo.html
-
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>爱猫人士进</title>
-
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
-
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
</head>
-
<body>
-
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
-
<div class="container-fluid">
-
<div class="navbar-header">
-
<a class="navbar-brand" href="/Admin/index.html" id="logo">
-
常见家猫品种
-
</a>
-
</div>
-
</div>
-
</div>
-
<div class="container-fluid">
-
-
<div class="row">
-
<div class="col-md-2" id="menulist">
-
<ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
-
<li class="active">
-
<a href="#">
-
<i class="glyphicon glyphicon-th-large"></i>
-
首页
-
</a>
-
</li>
-
<li>
-
<a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
-
<i class="glyphicon glyphicon-cog"></i>
-
狸花猫
-
<span class="pull-right glyphicon glyphicon-chevron-down"></span>
-
</a>
-
<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
-
-
<li>
-
<a href="#systemSetting1" class="nav-header collapsed" data-toggle="collapse">
-
<i class="glyphicon glyphicon-cog"></i>
-
黑色狸花猫
-
<span class="pull-right glyphicon glyphicon-chevron-down"></span>
-
</a>
-
<ul id="systemSetting1" class="nav nav-list collapse thirdmenu" style="height: 0px;">
-
<li><a href="#"><i class="glyphicon glyphicon-a"></i>豹纹</a></li>
-
<li><a href="#"><i class="glyphicon glyphicon-th-b"></i>点纹</a></li>
-
<li><a href="#"><i class="glyphicon glyphicon-c"></i>条纹</a></li>
-
</ul>
-
</li>
-
-
<li><a href="#systemSetting1" onclick="loadPage('橘色狸花猫.html')"><i class="glyphicon glyphicon-th-list"></i>橘色狸花猫</a></li>
-
</ul>
-
</li>
-
<li>
-
<a href="./三花猫.html">
-
<i class="glyphicon glyphicon-credit-card"></i>
-
三花猫
-
</a>
-
</li>
-
<li>
-
<a href="./奶牛猫.html">
-
<i class="glyphicon glyphicon-globe"></i>
-
奶牛猫
-
</a>
-
</li>
-
<li>
-
<a href="./黑猫.html">
-
<i class="glyphicon glyphicon-calendar"></i>
-
黑猫
-
</a>
-
</li>
-
<li>
-
<a href="#">
-
<i class="glyphicon glyphicon-fire"></i>
-
白猫
-
</a>
-
</li>
-
</ul>
-
</div>
-
<div class="col-sm-10" id="right">
-
<div class="col-sm-10" id="right">
-
<div class="col-md-10">
-
点击左侧可查看猫咪种类
-
</div>
-
</div>
-
</div>
-
-
</body>
-
</html>
-
<script>
-
/*
-
* 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
-
* （实现左侧菜单中的标签点击后变色的效果）
-
*/
-
$(document).ready(function () {
-
$('#menulist> a').click(function (e) {
-
//e.preventDefault(); 加上这句则导航的<a>标签会失效
-
$('#menulist> a').removeClass('active');
-
$(this).addClass('active');
-
});
-
});
-
-
-
function loadPage(url) {
-
$.get(url, function (data, status) {
-
$("#right").html(data);
-
});
-
}
-
</script>
这里的想法是在左边菜单栏不变的情况下，右边页面内容会根据选项跳转，于是建立了一个function函数，用来复制要跳转页面的内容显示在右边。
记住需要改变哪部分内容，就在哪里引用该函数，比如我需要改变默认显示的首页中的“点击左侧可查看猫咪种类”，就要在该部分代码添加一个<div>
-
<div class="col-sm-10" id="right">
-
<div class="col-sm-10" id="right">
-
<div class="col-md-10">
-
点击左侧可查看猫咪种类
-
</div>
-
</div>
-
</div>
demo.css
-
#main-nav
-
-
{
-
margin-left: 1px;
-
}
-
-
#main-nav.nav-tabs.nav-stacked > li > a {
-
padding: 10px 8px;
-
font-size: 12px;
-
font-weight: 600;
-
color: #4A515B;
-
background: #E9E9E9;
-
background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
-
background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
-
background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
-
background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
-
background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
-
border: 1px solid #D5D5D5;
-
border-radius: 4px;
-
}
-
-
#main-nav.nav-tabs.nav-stacked > li > a > span {
-
color: #4A515B;
-
}
-
-
#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
-
color: #FFF;
-
background: #3C4049;
-
background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
-
background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
-
background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
-
background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
-
background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
-
-ms-filter: "FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorstr='#4A515B', endColorstr='#3C4049')";
-
border-color: #2B2E33;
-
}
-
-
#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
-
color: #FFF;
-
}
-
-
#main-nav.nav-tabs.nav-stacked > li {
-
margin-bottom: 4px;
-
}
-
/*定义二级菜单样式*/
-
.secondmenu a {
-
font-size: 10px;
-
color: #4A515B;
-
text-align: center;
-
}
-
/*定义三级菜单样式*/
-
.thirdmenu a {
-
font-size: 10px;
-
color: #4A515B;
-
text-align: center;/*设置文本居中对齐*/
-
}
-
-
.navbar-static-top {
-
background-color: #212121;
-
margin-bottom: 5px;
-
}
-
-
.navbar-brand {
-
background: url('') no-repeat 10px 8px;
-
display: inline-block;
-
vertical-align: middle;
-
padding-left: 50px;
-
color: #fff;
-
}
-
demo.js
-
<script>
-
/*
-
* 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
-
* （实现左侧菜单中的标签点击后变色的效果）
-
*/
-
$(document).ready(function () {
-
$('#menulist> a').click(
-
function (e) {
-
//e.preventDefault(); 加上这句则导航的<a>标签会失效
-
$('#menulist> a').removeClass('active');
-
$(this).addClass('active');
-
});
-
});
-
-
-
function loadPage(url) {
-
$.get(url, function (data, status) {
-
$("#right").html(data);
-
});
-
}
-
</script>
橘色狸花猫.html
-
<div class="container">
-
<div class="row clearfix">
-
<div class="col-sm-11 column">
-
<ol class="breadcrumb">
-
<li class="active">
-
狸花猫
-
</li>
-
<li class="active">
-
橘色狸花猫
-
</li>
-
</ol>
-
<div class="jumbotron">
-
<h2>
-
可爱的温柔大橘能不能捕获你的心~
-
</h2>
-
<p>
-
橘猫（orange cats），也叫橘子猫、桔猫，拥有家猫中常见的一种毛色，
-
普遍存在于混种猫和不具独特规定毛色的注册纯种猫种，与品种无关，与被毛基因有关。
-
国内大部分橘猫都是狸花猫，因此也称为橘狸、黄狸。
-
</p>
-
<p>
-
<a href="https://baike.百度.com/item/橘猫/20604547?fr=kg_general" target="_blank">点击了解更多</a>
-
/*该部分是插入了一个百度百科的超链接*/
-
</p>
-
</div>
-
</div>
-
</div>
-
</div>
遇到的一些问题
在使用VS运行项目时，在页面跳转的过程中总是会遇到一个问题
百度其为文件跨域问题，VScode的解决方法较为简单，需要下载一个插件即可，但是其他就比较麻烦，尝试了几种，无效，问了前辈，推荐使用一个叫HBuilder X的软件，尝试后顺利解决~
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgfbheb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
