简单的主页"/>
使用Bootstrap实现简单的主页
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="=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",//请求成功后要执行的函数，拼接htmlsuccess: 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><a href="MV.html">图片资源</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="updatePerson.html">我的使用记录</a></li><li><a href="updatePerson.html">点击我修改个人信息</a></li><li><a href="reg.html">欢迎注册！</a></li><li><a href="main.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="=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 style="margin-top: 0px" 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>
更多推荐
使用Bootstrap实现简单的主页
发布评论