使用Bootstrap实现简单的主页
Posted 保护眼睛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Bootstrap实现简单的主页相关的知识，希望对你有一定的参考价值。
效果
未登录时页面：
点击登录
登录之后
未登录时代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>请先登录！</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<!-- container 剧中两边留白 -->
<!-- container 100%宽度 -->
<!-- 栅格系统将一行分为十二列
栅格参数：col-屏幕尺寸-占用列数-->
<body>
<nav class="navbar navbar-inverse" style="margin-bottom: 0px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.html">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="login.html">获取音乐资源请先登录！ <span class="sr-only">(current)</span></a></li>
<li><a href="login.html">获取资源mv资源请先登录！</a></li>
<li><a href="login.html">获取图片资源请先登录！</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="reg.html">欢迎注册！</a></li>
<li><a href="login.html">欢迎登录！</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://blog.csdn.net/qq_45859087?spm=1000.2115.3001.5343">欢迎访问我的博客主页</a></li>
<li><a href="#">欢迎访问我的github</a></li>
<li><a href="#">有问题联系下面的qq啊！</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">qq:2897781091</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div>
<h3 style="text-align: center">！！！！！！！！！！！！！！！！！！广告位出租！！！！！！！！！！！！！！！！！！！</h3>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/0.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/9.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/7.jpg" alt="...">
<div class="carousel-caption">
hello
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
登陆后代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的主页</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$.ajax({
//请求方式
type: "GET",
//文件位置
url: "mainsuccess",
//返回数据格式为json,也可以是其他格式如
dataType: "json",
//请求成功后要执行的函数，拼接html
success: function (data) {
var userName = data.msg;
var str = "<h4 style=\\"margin-top: 0px;margin-bottom: 100px\\">欢迎";
str += userName;
str += "先生！</h4>"
$("#info").html(str);
}
});
});
</script>
</head>
<!-- container 剧中两边留白 -->
<!-- container 100%宽度 -->
<!-- 栅格系统将一行分为十二列
栅格参数：col-屏幕尺寸-占用列数-->
<body>
<nav class="navbar navbar-inverse" style="margin-bottom: 0px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a id="info" valign="middle"class="navbar-brand" href="mainsuccess.html"></a>-->
<a class="navbar-brand" id="info" href="mainsuccess.html">欢迎</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="list.html?curPage=1">音乐资源 <span class="sr-only">(current)</span></a></li>
<li><a href="MV.html">mv资源</a></li>
<li<以上是关于使用Bootstrap实现简单的主页的主要内容，如果未能解决你的问题，请参考以下文章