Bootstrap Frontend Demo

Bootstrap Frontend Demo:

main.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- <link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> -->
		<link rel="stylesheet" href="css/unicorn.main.css" />
		<link rel="stylesheet" href="css/unicorn.myred.css" class="skin-color" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	 
	<frameset rows="60,*" cols="*" frameborder="no" border="0" framespacing="0">
	  <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
	  <frameset cols="220,*" frameborder="no" border="0" framespacing="0">
	    <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
	    <frame src="" name="mainFrame" id="mainFrame"/>
	  </frameset>
	</frameset>
	 
</html>
 


top.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/unicorn.main.css" />
		<link rel="stylesheet" href="css/unicorn.myred.css" class="skin-color" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<body>
		
		<div id="header">
			<img src="hsbc.jpg">		
		</div>
				
		<div id="user-nav" class="navbar navbar-inverse">
            <ul class="nav btn-group">
                <li class="btn btn-inverse"><a title="" href="#"><i class="icon icon-user"></i> <span class="text">Sowon S Y TANG/HBAP/HSBC</span></a></li>                
                <li class="btn btn-inverse"><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">Logout</span></a></li>
            </ul>
        </div>
             
		</div>
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery.ui.custom.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/jquery.validate.js"></script>
            <script src="js/jquery.wizard.js"></script>
           
	</body>
</html>
<script type="text/javascript">
	$(function(){

 
		//set menu link
		var menuLink = {};
		menuLink["menu_home"] = "http://www.ifeng.com/";
		menuLink["menu_form_sub_1"] = "form1.html";
		menuLink["menu_form_sub_2"] = "form2.html";
		menuLink["menu_form_sub_3"] = "http://www.baidu.com";
		menuLink["menu_button"] = "buttons.html";
		$("a[id^=menu_]").click(function(e){	
			 e.preventDefault();		
			$("#ContractId").prop("src",menuLink[$(this).prop("id")]);
		});

		//set active
		$("#sidebar ul li a").click(function(e){	
			e.preventDefault();			
			//alert($(this).prop("id"))			
			var parent = $(this).parent();
			if(parent.parent().parent().hasClass("submenu")){
				$("#sidebar ul li").removeClass("active open");
				parent.parent().parent().addClass("active open");
				parent.parent().find("li").removeClass("active");
				parent.addClass("active");
				return true;
			}			
			if( parent.hasClass("submenu")){
				parent.addClass("open");
				return true;
			}
			$("#sidebar ul li").removeClass("active open");
      		parent.addClass("active");
      	});


	});
</script>
<style type="text/css">
	html,body{
		height:100%;
	}

	#content{
		width: 100%;
		height: 100%;
		background: none;
	}

	iframe{
		width: 100%;
		height: 100%;
	}
	#header img{
		margin-top: 10px;
	}
	#user-nav ul li a{
		color: #F2F2F2
	}
</style>


left.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>HRR & CWA</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- <link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> -->
		<link rel="stylesheet" href="css/unicorn.main.css" />
		<link rel="stylesheet" href="css/unicorn.myred.css" class="skin-color" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<body>
		
		 <!-- http://v2.bootcss.com/base-css.html -->
		<div id="sidebar">			
			<ul>
				<li><a id="menu_home" href="#"  ><i class="icon icon-home"></i> <span>Home</span></a></li>
				<li class="submenu"> 
					<a href="#"><i class="icon icon-th-list"></i> <span>CWA Request</span> </a>
					<ul>
						<li><a id="menu_form_sub_1" href="#">Request</a></li>
						<li><a id="menu_form_sub_2" href="#">View1</a></li>
						<li class=""><a id="menu_form_sub_3" href="#">View2</a></li> 
					</ul>
				</li>
				<li class="submenu"> 
					<a href="#"><i class="icon icon-th-list"></i> <span>HRR Request</span> </a>
					<ul>
						<li><a id="menu_form_sub_1" href="#">Request</a></li>
						<li><a id="menu_form_sub_2" href="#">View1</a></li>
						<li class=""><a id="menu_form_sub_3" href="#">View2</a></li> 
					</ul>
				</li>
				<li><a id="menu_home" href="#"  ><i class="icon icon-home"></i> <span>HRR Approved Customer</span></a></li>
				<li><a id="menu_home" href="#"  ><i class="icon icon-home"></i> <span>HRR MTM Amount</span></a></li>
				
			</ul>
		
		</div>
		
		 
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.ui.custom.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.validate.js"></script>
        <script src="js/jquery.wizard.js"></script>
           
	</body>
</html>
<script type="text/javascript">
	$(function(){

		//set menu link
		var menuLink = {};
		menuLink["menu_home"] = "http://www.ifeng.com/";
		menuLink["menu_form_sub_1"] = "form1.html";
		menuLink["menu_form_sub_2"] = "form2.html";
		menuLink["menu_form_sub_3"] = "http://www.baidu.com";
		menuLink["menu_button"] = "buttons.html";
		$("a[id^=menu_]").click(function(e){	
			 e.preventDefault();				 
			 self.parent.frames["mainFrame"].location = menuLink[$(this).prop("id")];			  
		});

		//set active
		$("#sidebar ul li a").click(function(e){	
			e.preventDefault();							
			var parent = $(this).parent();
			if(parent.parent().parent().hasClass("submenu")){
				$("#sidebar ul li").removeClass("active open");
				parent.parent().parent().addClass("active open");
				parent.parent().find("li").removeClass("active");
				parent.addClass("active");
				return true;
			}			
			if( parent.hasClass("submenu")){
				$(".submenu").removeClass("open");
				parent.addClass("open");
				return true;
			}
			$("#sidebar ul li").removeClass("active open");
      		parent.addClass("active");
      	});

	});
</script>
<style type="text/css">
	html,body{
		height:100%;
	}

	#content{
		width: 100%;
		height: 100%;
		background: none;
	}

	iframe{
		width: 100%;
		height: 100%;
	}
	#header img{
		margin-top: 10px;
	}	 
</style>

unicorn.main.css

/**
 * Unicorn Admin Template
 * Diablo9983 -> diablo9983@gmail.com
**/
* {
	outline:none !important;
	-moz-outline: none !important;
}
/* Main */
body {
	overflow-x: hidden;
    /*margin-top: -9px;*//**/
}
a:hover {
	text-decoration: none;
}

/* Header */
#header {
    height: 55px;
    position: relative;
    width: 100%;
    z-index: -9;
}
  
/* Top user navigation */
#user-nav {
    position: absolute;
    right: 30px;
    top: 5px;
    z-index: 20;
    margin: 0;
}
#user-nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#user-nav > ul > li {
    float: left;
    list-style-type: none;
    margin: 0;
    position: relative;
    padding: 0;
}

#user-nav > ul > li > a {
	padding: 5px 10px;
	display: block;
	font-size: 10px;
}

#user-nav > ul > li > a:hover, #user-nav > ul > li.open > a {
	color: #ffffff;
}
#user-nav > ul > li > a > i, #sidebar li a i {
	vertical-align: top;
	background-image: url('../img/glyphicons-halflings-white.png');
	opacity: .5;
	margin-top: 2px;
}
#user-nav > ul > li > a:hover > i, #user-nav > ul > li.open > a > i {
	opacity: 1;
}

#user-nav > ul > li > a > .label {
	vertical-align: middle;
	padding: 1px 4px 1px;
	margin: -2px 4px 0;
	display: inline-block;
}


#user-nav > ul ul > li > a {
	text-align: left;
	text-shadow: 0 1px 0 #ffffff;
}
#user-nav > ul ul > li > a:hover {
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}


/* Sidebar Navigation */
#sidebar {
    display: block;
    float: left;
    position: relative;
    width: 220px;
    z-index: 16;
}

#sidebar > ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	position: absolute;
	width: 220px;
}
#sidebar > ul > li {
	display: block;	
	position: relative;
}

#sidebar > ul > li.active {
	box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
}

#sidebar > ul > li > a {
	padding: 10px 0 10px 15px;
	display: block;
	color: #F2F2F2;
}

#sidebar > ul > li > a > i {
	margin-right: 10px;
}

#sidebar > ul > li.active > a {
	background: url("../img/menu-active.png") no-repeat scroll right center transparent !important;
}

#sidebar > ul > li > a > .label {
	margin: 0 20px 0 0;
	float: right;
	padding: 3px 5px 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
}

#sidebar > ul ul {
	display: none;
	margin: 0;
	padding: 0;
	box-shadow: 0 0 3px rgba(0,0,0,0.5) inset;
}
#sidebar > ul li.open ul {
	display: block;
}
#sidebar > ul ul li a{
	padding: 10px 0 10px 25px;
	display: block;
	color: #F2F2F2;
}

#sidebar > ul ul li:first-child a {
	border-top: 0;
}
#sidebar > ul ul li:last-child a {
	border-bottom: 0;
}




unicorn.myred.css

/**
 * Unicorn Admin Template
 * Diablo9983 -> diablo9983@gmail.com
**/
body {
	background-color: #FFF;
}

#header {    
    border-bottom: 5px solid #FE1706; /*深红*/
}
 

#user-nav .btn-inverse {
    background-color: #FA1100;	
	border-top-color: #FE382A;
	background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#FE2F20), to(#FE1706));
}
#sidebar > ul {
	background-color: #FE1706; /*深红*/
	border-bottom: 1px solid #FE382A; /*淡红*/
}
#sidebar > ul > li {
	border-top: 1px solid #FE382A; /*淡红*/
	border-bottom: 1px solid #FA1100; /*中红*/
}
#sidebar > ul > li.active {
    background-color: #FF0000; /**/
	
}

#sidebar > ul > li.open.submenu > a {
	border-bottom: 1px solid #FE2A1B;/**/
}
#sidebar > ul > li.open.active.submenu > a {
	border-bottom: 1px solid #FE2A1B;/**/
}
#sidebar > ul > li > a > .label {
	background-color: #431B1B;
}
#sidebar > ul > li > a:hover {
	background-color: #FF0000;/**/
}
#sidebar > ul ul {
	border-top: 1px solid #FE2A1B;
	background-color: #EF1101;/**/
}
#sidebar > ul ul li a {
	border-top: 1px solid #DF1001;/**/
	border-bottom: 1px solid #FE2A1B;
}
#sidebar > ul ul li a:hover, #sidebar > ul ul li.active a {
	color: #F2F2F2;
	background-color: #FF0000;/**/
}

.dropdown-menu li a:hover, .dropdown-menu .active a, .dropdown-menu .active a:hover {
	background-color: #FF0000;/**/    
    color: #eeeeee;
}

 
img/glyphicons-halflings-white.png







阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页