bootstrap红色欧美样式IT信息网页模板代码下载



11 43 15



模板描述:bootstrap 红色 欧美样式 IT信息,bootstrap红色欧美样式IT信息网页模板代码下载HTML模板下载

代码结构

1. 引入CSS

<link href="./css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="./css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<link href="./css/theme-style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700,800,900,600,200' rel='stylesheet' type='text/css'>
<link href="./css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="./css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<link href="./css/theme-style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700,800,900,600,200' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.easing.min.js"></script>
<script src="./js/html5shiv.js"></script>
<script src="./js/respond.min.js"></script>
<script type="text/javascript" 	src="./js/jquery.smint.js"></script>
<script src="./js/hover_pack.js"></script>
<script type="text/javascript" src="./js/jquery.mixitup.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.easing.min.js"></script>
<script src="./js/html5shiv.js"></script>
<script src="./js/respond.min.js"></script>
<script type="text/javascript" 	src="./js/jquery.smint.js"></script>
<script src="./js/hover_pack.js"></script>
<script type="text/javascript" src="./js/jquery.mixitup.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

3. HTML代码

<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
	<head>
		<title>Flat style website for Iphone, Android &nbsp; Smartphone Mobile Website Template | Home :: w3layouts</title>
		<link rel="shortcut icon" type="image/x-icon" href="./images/fav-icon.png" />
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		 <!-- Custom Theme files -->
   		 <!-- Custom Theme files -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" type="image/x-icon" href="./images/fav-icon.png" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts---->
		<!----//webfonts---->
		<!----requred-js-files---->
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<![endif]-->
		<!----//requred-js-files---->
		<script type="text/javascript">
			$(document).ready( function() {
			    $('.subMenu').smint({
			    	'scrollSpeed' : 1000
			    });
			});
		</script>
	</head>
	<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
		<!----start-container----->
		<div class="head-bg sTop">
			<div class="conatiner">
				<div class="col-lg-12 header-note">
					<a href="#"><img src="./images/logo.png" title="Flat style" /></a>
					<h1>We are a Creative Digital Agency</h1>
					<a class="btn btn-primary big-btn" href="#">Learn More <span> </span></a>
				</div>
			</div>
		</div>
		<!----//End-container----->
		<!----start-top-nav---->
		<nav class="subMenu navbar-custom navbar-scroll-top" role="navigation">
	        <div class="container">
	            <div class="navbar-header page-scroll">
	                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
	                    <img src="./images/nav-icon.png" title="drop-down-menu" /> 
	                </button>
	            </div>
	            <!-- Collect the nav links, forms, and other content for toggling -->
	            <div class="collapse navbar-collapse navbar-left navbar-main-collapse">
	                <ul class="nav navbar-nav">
	                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
	                    <li class="active">
	                        <a id="sTop" class="subNavBtn" href="#">Home</a>
	                    </li>
	                    <li class="page-scroll">
	                        <a id="s1" class="subNavBtn" href="#">About</a>
	                    </li>
	                    <li class="page-scroll">
	                        <a id="s2" class="subNavBtn" href="#">Portfolio</a>
	                    </li>
	                    <li class="page-scroll">
	                        <a id="s3" class="subNavBtn" href="#">Testimonials</a>
	                    </li>
	                </ul>
	            </div>
	            <!-- /.navbar-collapse -->
	             	<a  id="s4" class="right-msg subNavBtn msg-icon"href="#"><span> </span></a>
	                <div class="clearfix"> </div>
	        </div>
	        <!-- /.container -->
   	  </nav>
		<!----//End-top-nav---->
		<!---- start-top-grids---->
		<div class="container">
			<div class="row  section s1 top-grids">
				<div class="col-md-3 top-grid">
					<span class="icon1"> </span>
					<h2>Responsive Design</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
				</div>
				<div class="col-md-3 top-grid">
					<span class="icon2"> </span>
					<h2>Web Development</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
				</div>
				<div class="col-md-3 top-grid">
					<span class="icon3"> </span>
					<h2>Internet Marketing</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
				</div>
				<div class="col-md-3 top-grid">
					<span class="icon4"> </span>
					<h2>IOS Development</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!---- //End-top-grids---->
		<!----start-about---->
		<div class="about">
			<div class="container">
				<div class="col-md-6 divice">
					<img class="img-responsive" src="./images/divice.png" title="divice" />
				</div>
				<div class="col-md-6 divice-info">
					<h3>Responsive Design</h3>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
					<a class="btn btn-primary btn-red" href="#">Read More <span> </span></a>
				</div>
			</div>
		</div>
		<!----//End-about---->
		<!----start-portfolio---->
		<div class="portfolio section s2">
			<div class="container portfolio-head">
				<h3> Portfolio</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
			</div>
			<!---- start-portfolio-script----->
			<script type="text/javascript">
				$(function () {
					var filterList = {
						init: function () {
							// MixItUp plugin
							// http://mixitup.io
							$('#portfoliolist').mixitup({
								targetSelector: '.portfolio',
								filterSelector: '.filter',
								effects: ['fade'],
								easing: 'snap',
								// call the hover effect
								onMixEnd: filterList.hoverEffect()
							});				
						},
						hoverEffect: function () {
							// Simple parallax effect
							$('#portfoliolist .portfolio').hover(
								function () {
									$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
									$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
								},
								function () {
									$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
									$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
								}		
							);				
						}
					};
					// Run the show!
					filterList.init();
				});	
			</script>
			<!----//End-portfolio-script----->
					<ul id="filters" class="clearfix">
						<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
						<li><span class="filter" data-filter="app">Branding</span></li>
						<li><span class="filter" data-filter="card">Illustraions</span></li>
						<li><span class="filter" data-filter="icon">Web design</span></li>
					</ul>
					<div id="portfoliolist">
					<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>				
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>		
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p3.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>				
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p4.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>	
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p5.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>			
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p6.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>	
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p7.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>	
					<div class="portfolio logo1 mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
						     <img src="./images/p8.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="./images/link-ico.png" alt=""/></h2>
						  	</div></a>
		                </div>
					</div>		
					<div class="clearfix"> </div>																																					
				</div>
		</div>
		<!----//End-portfolio---->
		<!---testmonials---->
		<div  class="testmonials section s3">
			<div class="container">
			<div class="bs-example">
			    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
			    	<!-- Carousel indicators -->
			        <ol class="carousel-indicators pagenate-icons">
			            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			            <li data-target="#myCarousel" data-slide-to="1"></li>
			            <li data-target="#myCarousel" data-slide-to="2"></li>
			        </ol>   
			       <!-- Carousel items -->
			        <div class="carousel-inner">
			            <div class="active item">
			                <h2><img src="./images/people.jpg" title="name" /></h2>
			                <div class="carousel-caption caption">
			                  <h3>Dan Cederholm</h3>
			                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
			                </div>
			            </div>
			            <div class="item">
			                <h2><img src="./images/people.jpg" title="name" /></h2>
			                <div class="carousel-caption caption">
			                  <h3>Dan Cederholm</h3>
			                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
			                </div>
			            </div>
			            <div class="item">
			                <h2><img src="./images/people.jpg" title="name" /></h2>
			                <div class="carousel-caption caption">
			                  <h3>Dan Cederholm</h3>
			                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
			                </div>
			            </div>
			        </div>
			        <!-- Carousel nav -->
			    </div>
		</div>
		</div>
		</div>
		<!---testmonials---->
		<!----start-model-box---->
						<a data-toggle="modal" data-target=".bs-example-modal-md" href="#"> </a>
						<div class="modal fade bs-example-modal-md light-box" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
						  <div class="modal-dialog modal-md">
						    <div class="modal-content light-box-info">
						    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><img src="./images/close.png" title="close" /></button>
						     <h3>Place Yours content here</h3>
						     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas orci et blandit dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
						    </div>
						  </div>
						</div>
						<!----start-model-box---->
		<!----start-contact---->
		<div class="contact section s4">
			<div class="container">
				<h4>Contact</h4>
				<p class="contact-head">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. </p>
				<div class="row contact-form">
					<form>
						<div class="col-md-6 text-box">
							<input type="text" placeholder="Name" />
							<input type="text" placeholder="Email" />
							<input type="text" placeholder="Subject" />
						</div>
						<div class="col-md-6 textarea">
							<textarea>Message</textarea>
						</div>
						<div class="clearfix"> </div><br />
						<input class="btn btn-primary btn-red-lg" type="submit" value="Submit Message" />
					</form>
				</div>
				<!----start-social-icons--->
				<div class="social-icons">
					<ul>
						<li><a class="facebook" href="#"> <span> </span></a></li>
						<li><a class="twitter" href="#"> <span> </span></a></li>
						<li><a class="dribbble" href="#"> <span> </span></a></li>
					</ul>
				</div>
				<!----//End-social-icons--->
				<!----start-copy-right---->
				<div class="copy-right">
					<p>Copyright &#169; 2014 <span>Flat Style.</span> All Rights Reserved.</p>
					<p>Design by<a href="https://www.51qianduan.com/">51前端</a></p>
				</div>
				<!----//End-copy-right---->
			</div>
		</div>
		<!----//End-contact---->
		<!-- Include all compiled plugins (below), or include individual files as needed -->
	</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到