CSS实现系统登录界面（二）
登录完成之后是跳转到欢迎界面。比较常见的管理系统的欢迎界面分为导航栏区、左下侧的菜单栏区和右下侧的窗口区。
1.导航栏的颜色 通过 navbar navbar-inverse 实现颜色反转。
2.导航栏的文本 通过 navbar-text 实现纯文本的显示。
3.导航栏的文本 通过
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
< ul class="nav navbar-nav">
实现 li 标签项的横向显示。
4.各级菜单在折叠显示的展现方式下，同级菜单不可同时展开。通常采用jQuery语句实现页面的初始化和折叠框的可同步显示。
5.实现隐线的效果通常采用 hr 标签即可。
1.导航栏的颜色 通过 navbar navbar-inverse 实现颜色反转。
2.导航栏的文本 通过 navbar-text 实现纯文本的显示。
3.导航栏的文本 通过
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
< ul class="nav navbar-nav">
实现 li 标签项的横向显示。
4.各级菜单在折叠显示的展现方式下，同级菜单不可同时展开。通常采用jQuery语句实现页面的初始化和折叠框的可同步显示。
5.实现隐线的效果通常采用 hr 标签即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoginSuccess</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="row clearfix">
<div class="col-md-12 column">
<!-- Top Part -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<img class="navbar-brand" href="#">Brand</img>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<h4 class="navbar-text"> 导 航 栏 </h4>
</li>
<li class="active">
<a href="#">常用网址 A </a>
</li>
<li class="active">
<a href="#">常用网址 B </a>
</li>
<li class="active">
<a href="#">常用网址 C </a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">常用网址 D<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">D 子模块 A</a>
</li>
<li>
<a href="#">D 子模块 B</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">DB 子模块 DBA</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">DBA 子模块 DBAA</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" type="text"/>
</div>
<button type="submit" class="btn btn-primary">宜信搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!--Star Logo Fail Adding-->
<!--<li>-->
<!--<button type="button" class="btn btn-default btn-lg">-->
<!--<span class="glyphicon glyphicon-star"></span> Star-->
<!--</button>-->
<!--</li>-->
<li>
<p class="navbar-text navbar-right">欢迎您,</p>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">UserName<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">常用功能 A</a>
</li>
<li>
<a href="#">常用功能 B</a>
</li>
<li class="divider">
</li>
<li>
<a href="#"> 个人中心 </a>
</li>
<li>
<a href="#"> 退出</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Welcome Part -->
<div class="container">
<div class="row clearfix">
<center>
<h2 >
欢迎使用 **** 系统
</h2>
</center>
</div>
<hr>
<!-- Left Part -->
<div class="row clearfix">
<div class="col-md-3 column">
<div class="panel-group" id="Fir">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Fir"
href="#FirA">
一级菜单 A
</a>
</h4>
</div>
<div id="FirA" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel-group" id="FirSec">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#FirSec"
href="#SecAA">
二级菜单 AA
</a>
</h4>
</div>
<div id="SecAA" class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item"> <a>三级菜单 AAA </a></li>
<li class="list-group-item"> <a>三级菜单 AAA </a></li>
<li class="list-group-item"> <a>三级菜单 AAA </a></li>
</ul>
<!--<div class="panel-body">-->
<!--<div class="panel-group" id="FirThr">-->
<!--<div class="panel panel-default">-->
<!--<div class="panel-heading">-->
<!--<h4 class="panel-title">-->
<!--<a data-toggle="collapse" data-parent="#SecAA"-->
<!--href="#">-->
<!--三级菜单 AAA-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel panel-success">-->
<!--<div class="panel-heading">-->
<!--<h4 class="panel-title">-->
<!--<a data-toggle="collapse" data-parent="#SecAA"-->
<!--href="#">-->
<!--三级菜单 AAB-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel panel-info">-->
<!--<div class="panel-heading">-->
<!--<h4 class="panel-title">-->
<!--<a data-toggle="collapse" data-parent="#SecAA"-->
<!--href="#">-->
<!--三级菜单 AAC-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel panel-warning">-->
<!--<div class="panel-heading">-->
<!--<h4 class="panel-title">-->
<!--<a data-toggle="collapse" data-parent="#accordion"-->
<!--href="#collapseFour">-->
<!--点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法-->
<!--</a>-->
<!--</h4>-->
<!--</div>-->
<!--<div id="collapseFour" class="panel-collapse collapse">-->
<!--<div class="panel-body">-->
<!--Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred-->
<!--nesciunt sapiente ea proident. Ad vegan excepteur butcher vice-->
<!--lomo.-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#FirSec"
href="#SecAB">
二级菜单 AB
</a>
</h4>
</div>
<div id="SecAB" class="panel-collapse collapse">
<div class="panel-body">
<a> 三级菜单 ABA </a>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#FirSec"
href="#SecAC">
二级菜单 AC
</a>
</h4>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#FirSec"
href="#collapseFour">
二级菜单 AD
</a>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Fir"
href="#FirB">
一级菜单 B
</a>
</h4>
</div>
<div id="FirB" class="panel-collapse collapse">
<div class="panel-body">
二级菜单 BA
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Fir"
href="#FirC">
一级菜单 C
</a>
</h4>
</div>
<div id="FirC" class="panel-collapse collapse">
<div class="panel-body">
二级菜单 CA
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Fir"
href="#FirD">
一级菜单 D
</a>
</h4>
</div>
<div id="FirD" class="panel-collapse collapse">
<div class="panel-body">
二级菜单 DA
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#FirA').collapse('show')});
$(function () { $('#FirB').collapse({
toggle: false
})});
$(function () { $('#FirC').collapse({
toggle: false
})});
$(function () { $('#FirD').collapse({
toggle: false
})});
// $(function () { $('#SecAA').collapse('hide')});
</script>
</div>
<!-- Right Part -->
<div class="col-md-9 column">
<div class="tabbable" id="PagePart">
<ul class="nav nav-tabs">
<li>
<a href="#page01" data-toggle="tab">Page 001</a>
</li>
<li class="active">
<a href="#page02" data-toggle="tab">Page 002</a>
</li>
<li>
<a href="#page03" data-toggle="tab">Page 003</a>
</li>
<li class="active">
<a href="#page04" data-toggle="tab">Page 004</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="page01">
<br>
<center>
<p>
This *** First *** Page <br>
This *** First *** Page <br>
This *** First *** Page <br>
</p>
</center>
</div>
<div class="tab-pane" id="page02">
<p>
This Second Page
</p>
</div>
<div class="tab-pane" id="page03">
<p>
This Thrid Page
</p>
</div>
<div class="tab-pane" id="page04">
<p>
This Fourth Page
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="footer">
<center>
<p>Copyright © 2005-2015 ****.CN All Rights Reserved **** 互联网中心<br/>隐私权政策 京ICP证 ***** 号</p>
</center>
</div>
<br>
</body>
</html>
<!-- ***************************************************************************************************************************************************** -->
<!--尝试 dropdown-toggle、list-group 不太合适 -->
<!-- ***************************************************************************************************************************************************** -->
<!--<nav class="navbar navbar-default" role="navigation">-->
<!--<div class="navbar-header">-->
<!--<button type="button" class="navbar-toggle" data-toggle="collapse"-->
<!--data-target="#example-navbar-collapse">-->
<!--<span class="sr-only">切换导航</span>-->
<!--<span class="icon-bar"></span>-->
<!--<span class="icon-bar"></span>-->
<!--<span class="icon-bar"></span>-->
<!--</button>-->
<!--</div>-->
<!--<div class="collapse navbar-collapse" id="example-navbar-collapse">-->
<!--<ul class="nav navbar-nav">-->
<!--<li class="dropdown">-->
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
<!--Java <b class="caret"></b>-->
<!--</a>-->
<!--<ul class="dropdown-menu">-->
<!--<li><a href="#">jmeter</a></li>-->
<!--<li><a href="#">EJB</a></li>-->
<!--<li><a href="#">Jasper Report</a></li>-->
<!--<li class="divider"></li>-->
<!--<li><a href="#">分离的链接</a></li>-->
<!--<li class="divider"></li>-->
<!--<li><a href="#">另一个分离的链接</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</nav>-->
<!-- ***************************************************************************************************************************************************** -->
<!--<ul class="list-group">-->
<!--<li class="list-group-item">免费域名注册</li>-->
<!--<li class="list-group-item">免费 Window 空间托管</li>-->
<!--<li class="list-group-item">图像的数量</li>-->
<!--<li class="list-group-item">-->
<!--<span class="badge">新</span>-->
<!--24*7 支持-->
<!--</li>-->
<!--<li class="list-group-item">每年更新成本</li>-->
<!--<li class="list-group-item">-->
<!--<span class="badge">▽</span>-->
<!--折扣优惠-->
<!--</li>-->
<!--</ul>-->
<!-- ***************************************************************************************************************************************************** -->
<!-- 分页 -->
<!--<ul class="pagination">-->
<!--<li>-->
<!--<a href="#">Prev</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">1</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">2</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">3</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">4</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">5</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">Next</a>-->
<!--</li>-->
<!--</ul>-->
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻