Bootstrap（十一）（残）

最新推荐文章于 2020-11-20 15:49:21 发布

mwwb

最新推荐文章于 2020-11-20 15:49:21 发布

阅读量121

点赞数

分类专栏： bootstrap学习文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_43278421/article/details/106572591

版权

bootstrap学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

下午来学一下bootstrap的扁平化风格页面

扁平化设计概述
设计理念
扁平化的风格式抛弃一切效果，例如阴影、透视、纹理、渐变和3d等，就是避免任何拟物化设计的元素。
更有层次感，视觉效果更加鲜明，用户能更直观地了解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style>
			@media (min-width:7688px) and (max-width:979px){
				#menu{
					display: none;
				}
				#mobile-nav{
					display: block;
					float: right;
				}
				#menu-nav-mobile{
					margin:0;
				}
			}
			@media (min-width:481px) and (max-width:767px){
				#menu{
					display: none;
				}
				#mobile-nav{
					display:block;
					float:right;
				}
				#menu-nav-mobile{
					margin-left:-20px;
					margin-right:-20px;
					margin-bottom:0;
				}
			}
			@media (max-width:480px){
			     #menu{
					 display: none;
				 }
				 #mobile-nav{
					 display: block;
					 float: right;
				 }
				 #menu-nav-mobile{
					 margin-left:-20px;
					 margin-right: -20px;
					 margin-bottom:0;
				 }
				 #id-navigation-mobile li a{
					 font-size: 14px;
					 padding: 12px 0;
				 }
			}
		</style>
	</head>
	<body>
		<header>
			<div class="sticky-nav">
				<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
				<div id="logo">
					<a id="goUp" href="#id-home-slider" title="Bootstrap"></a>
				</div>
				<nav id="menu">
					<ul id="menu-nav">
						<li class="current"><a href="#id-home-slider">Home</a></li>
						<li><a href="#id-projects">projects</a></li>
						<li><a href="#id-contacts">Contacts</a></li>
						<li><a href="#id-about">About</a></li>
					</ul>
				</nav>
			</div>
		<div class="row">
			<div class="span3">
				<nav id="filters" class="work-nav">
					<ul id="filters" class="option-set" data-option-key="filter">
						<li class="type-work">Naaaa</li>
						<li><a href="#filter" data-option-value="*" class="selected">ALLL</a></li>
						<li><a href="#filter" data-option-value=".contact">CCC</a></li>
						<li><a href="#filter" data-option-value=".about">About</a></li>
					</ul>
				</nav>
			</div>
		</div>	
			
			
			
			
		<div class="row">
			<div class="span12">
				<div class="title-page">
					<h2 class="title">Booooooooooooo</h2>
					<h3 class="title-description">xxxxxxsssssss</h3>
				</div>
			</div>
		</div>
			
			
		</header>
		<script>
			$(function(){
				var cloneMobileMemu = $('#menu').clone().attr('id','id-navigation-mobile');
				$('#mobile-nav').on('click',function(e){
					$(this).toggleClass('open');
					if($('#mobile-nav').hasClass('open')){
						$('#id-navigation-mobile').slideDown(500,'easeOutExpo');
					} else{
						$('#id-navigation-mobile').slideUp(500,'easeOutExpo');
					}
					e.preventDefault();
				});
			});
		</script>
	</body>
</html>