蓝色欧美形式bootstrap企业开发网页模板代码下载



8 29 10



模板描述:bootstrap企业开发,蓝色欧美形式bootstrap企业开发网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/default.css" id="theme-color">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/default.css" id="theme-color">

2. 引入JS

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/feather.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/feather.min.js"></script>
<script src="js/scripts.js"></script>

3. HTML代码

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<meta name="description" content="" /> 
<!--Google fonts-->
<!--vendors styles-->
<!-- Bootstrap CSS / Color Scheme -->
</head>
<body data-spy="scroll" data-target="#boom-navbar" data-offset="0">
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation" id="boom-navbar">
	<a class="navbar-brand" href="index.html">
		Boom
	</a>
	<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" 
			data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
		<span data-feather="menu"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarCollapse">
		<ul class="navbar-nav mx-auto">
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#about">About</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#portfolio">Portfolio</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#services">Services</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#blog">Blog</a>
			</li>
		</ul>
		<form class="form-inline">
			<a class="btn btn-primary page-scroll" href="#contact">
				Contact us
			</a>
		</form>
	</div>
</nav>
<!--hero header-->
<section class="py-6 py-md-0 bg-gradient" id="home">
	<div class="container">
		<div class="row vh-md-100">
			<div class="col-md-8 col-sm-10 my-auto mx-auto text-center">
				<h1 class="display-3 text-white">Stunning websites & app built by our team</h1>
				<p class="lead text-light mb-5">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				<a href="#" class="btn btn-outline-light btn-lg">
					Get started now
				</a>
			</div>
		</div>
	</div>
</section>
<!-- about section -->
<section class="pt-6" id="about">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<span class="text-uppercase text-muted large-sm">Meet Boom</span>
				<h2 class="display-4">A better way to design</h2>
				<p class="lead">
					Donec lacus enim, ullamcorper nec lectus id, ornare finibus nunc. 
					Integer id ante posuere, vestibulum mauris eget, efficitur felis. 
				</p>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-10 mx-auto">
				<img src="img/mockup.png" class="img-fluid d-block mx-auto" alt="Mockup"/>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-3 col-sm-4 mb-3">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="layout" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="mt-0 mb-3">Page builder</h5>
						Nam liber tempor cum soluta nobis eleifend option congue nihil imper. <br/> <a href="#">Learn more</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-4 mb-3">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="monitor" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="mt-0 mb-3">Responsive design</h5>
						Nam liber tempor cum soluta nobis eleifend option congue nihil imper. <br/> <a href="#">Learn more</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-4 mb-3">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="headphones" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="mt-0 mb-3">Lifetime support</h5>
						Nam liber tempor cum soluta nobis eleifend option congue nihil imper. <br/> <a href="#">Learn more</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-4 mb-3">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="refresh-cw" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="mt-0 mb-3">Free updates</h5>
						Nam liber tempor cum soluta nobis eleifend option congue nihil imper. <br/> <a href="#">Learn more</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<hr class="mt-6" />
<!-- portfolio section -->
<section class="py-6" id="portfolio">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<span class="text-uppercase text-muted large-sm">Case studies</span>
				<h2 class="display-4">We work with awesome companies</h2>
				<p class="lead">
					Donec lacus enim, ullamcorper nec lectus id, ornare finibus nunc. 
					Integer id ante posuere, vestibulum mauris eget, efficitur felis. 
				</p>
			</div>
		</div>
		<div class="row mt-5 projects">
			<div class="col-sm-6 mb-4">
				<div class="card">
					<a href="#">
						<img src="img/work-1.jpg" alt="Work 1" class="card-img-top img-raised rounded"/>
					</a>
					<div class="card-body px-0">
						<h4>iOS app design</h4>
						<a href="#" class="text-muted d-flex flex-row align-items-center">
							Read case study
							<em class="ml-1" data-feather="arrow-right" with="16" height="16"></em>
						</a>
					</div>
				</div>
			</div>
			<div class="col-sm-6 mb-4">
				<div class="card">
					<a href="#">
						<img src="img/work-2.jpg" alt="Work 2" class="card-img-top img-raised rounded"/>
					</a>
					<div class="card-body px-0">
						<h4>HTC price comparator</h4>
						<a href="#" class="text-muted d-flex flex-row align-items-center">
							View case study
							<em class="ml-1" data-feather="arrow-right" with="16" height="16"></em>
						</a>
					</div>
				</div>
			</div>
			<div class="col-sm-6 mb-4">
				<div class="card">
					<a href="#">
						<img src="img/work-3.jpg" alt="Work 3" class="card-img-top img-raised rounded"/>
					</a>
					<div class="card-body px-0">
						<h4>T-shirt design</h4>
						<a href="#" class="text-muted d-flex flex-row align-items-center">
							Open case study
							<em class="ml-1" data-feather="arrow-right" with="16" height="16"></em>
						</a>
					</div>
				</div>
			</div>
			<div class="col-sm-6 mb-4">
				<div class="card">
					<a href="#">
						<img src="img/work-4.jpg" alt="Work 4" class="card-img-top img-raised rounded"/>
					</a>
					<div class="card-body px-0">
						<h4>Weekly top tracks</h4>
						<a href="#" class="text-muted d-flex flex-row align-items-center">
							Read their story
							<em class="ml-1" data-feather="arrow-right" with="16" height="16"></em>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="row d-md-flex my-6">
			<div class="col-md-5 offset-md-1">
				<div class="card border review">
					<div class="card-body">
						<img src="img/client-1.jpg" class="img-review rounded-circle mr-2" alt="Client 1"/>
						<p class="quote">Praesent vulputate dolor velit, in condimentum odio pellentesin condimentum odio pellentesque libero.</p>
						<div class="mt-4">
							Ryan Siddle &mdash; <span class="text-muted">Google Design</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-5">
				<div class="card border review review-alt">
					<div class="card-body">
						<img src="img/client-2.jpg" class="img-review rounded-circle mr-2" alt="Client 2"/>
						<p class="quote">Praesent vulputate dolor velit, in condimentum vulputate odio pellentesin condimentum odio pellentesque libero.</p>
						<div class="mt-4">
							Ameli Mao &mdash; <span class="text-muted">Developer</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-4">
			<div class="col-md-10 mx-auto">
				<div class="card p-4 bg-gradient-alt">
					<div class="card-body d-flex flex-row align-items-center">
						<h4 class="mb-0 text-white">Need a custom design or mobile app?</h4>
						<a href="#contact" class="btn btn-light text-primary ml-auto page-scroll">Contact us now</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--services section-->
<section class="bg-light py-6" id="services">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-5">
				<img src="img/mobile.png" class="img-fluid d-block mx-auto" alt="Mobile" />
			</div>
			<div class="col-md-5 mr-auto my-auto py-md-0 py-5">
				<span class="text-uppercase text-muted large-sm">What we do</span>
				<h2 class="display-4">Services we offer</h2>
				<p class="lead mb-5">
					Donec lacus enim, ullamcorper nec lectus id, ornare finibus nunc. 
					Integer id ante posuere, vestibulum mauris eget, efficitur felis. 
				</p>
				<div class="media">
					<div class="icon-box hover-box">
						<div class="icon-box-inner small-xs">
							<span data-feather="droplet" width="30" height="30"></span>
						</div>
					</div>
					<div class="media-body">
						<h4 class="mt-0 mb-3">UI/UX design</h4>
						<span class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</span>
					</div>
				</div>
				<div class="media my-5">
					<div class="icon-box hover-box">
						<div class="icon-box-inner small-xs">
							<span data-feather="smartphone" width="30" height="30"></span>
						</div>
					</div>
					<div class="media-body">
						<h4 class="mt-0 mb-3">Mobile apps development</h4>
						<span class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</span>
					</div>
				</div>
				<div class="media">
					<div class="icon-box hover-box">
						<div class="icon-box-inner small-xs">
							<span data-feather="monitor" width="30" height="30"></span>
						</div>
					</div>
					<div class="media-body">
						<h4 class="mt-0 mb-3">Web development</h4>
						<span class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</span>
					</div>
				</div>
				<p class="mt-4">
					<a href="https://www.51qianduan.com/">51前端</a>
				</p>
			</div>
		</div>
	</div>
</section>
<!--blog section-->
<section class="pt-6" id="blog">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<span class="text-uppercase text-muted large-sm">From our blog</span>
				<h2 class="display-4">Latest articles</h2>
				<p class="lead">
					Donec lacus enim, ullamcorper nec lectus id, ornare finibus nunc. 
					Integer id ante posuere, vestibulum mauris eget, efficitur felis. 
				</p>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-4">
				<div class="card">
					<a href="#">
						<img class="card-img-top img-raised" src="img/work-1.jpg" alt="Blog 1">
					</a>
					<div class="card-body px-0">
						<h4 class="card-title mb-2"><a href="#">Basic of mobile apps</a></h4>
						<p class="text-muted small-xl mb-2">January 27, 2018</p>
						<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit. <a href="#">Learn more</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card">
					<a href="#">
						<img class="card-img-top img-raised" src="img/work-2.jpg" alt="Blog 2">
					</a>
					<div class="card-body px-0">
						<a href="#">
							<h4 class="card-title mb-2"><a href="#">How to create gradient</a></h4>
							<p class="text-muted small-xl mb-2">December 16, 2017</p>
							<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit. <a href="#">Learn more</a></p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card">
					<a href="#">
						<img class="card-img-top img-raised" src="img/work-3.jpg" alt="Blog 3">
					</a>
					<div class="card-body px-0">
						<a href="#">
							<h4 class="card-title mb-2"><a href="#">How to create T-shirt design</a></h4>
							<p class="text-muted small-xl mb-2">December 2nd, 2017</p>
							<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit. <a href="#">Learn more</a></p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<hr class="mt-6" />
<!--contact section-->
<section class="py-6" id="contact">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<span class="text-uppercase text-muted large-sm">Want to hire us?</span>
				<h2 class="display-4">Let's talk</h2>
				<p class="lead">
					Donec lacus enim, ullamcorper nec lectus id, ornare finibus nunc. 
					Integer id ante posuere, vestibulum mauris eget, efficitur felis. 
				</p>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-8 mx-auto">
				<form>
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Your name">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<input type="email"  class="form-control" placeholder="Your email address">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<input type="tel"  class="form-control" placeholder="Phone number">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<input type="url"  class="form-control" placeholder="Your website">
							</div>
						</div>
						<div class="col-12">
							<div class="form-group">
								<textarea rows="5"  class="form-control" placeholder="What are you looking for?"></textarea>
							</div>
						</div>
					</div>
					<div class="text-center mt-3">
						<button class="btn btn-primary">Send your message</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<!--footer / contact-->
<footer class="py-5 bg-light">
	<div class="container">
		<div class="row">
			<div class="col-md-4 my-auto text-center text-md-left"></div>
			<div class="col-md-4 text-center">
				<ul class="list-inline social social-rounded social-sm mb-0">
					<li class="list-inline-item">
						<a href=""><i class="fa fa-facebook"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-twitter"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-google-plus"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-dribbble"></i></a>
					</li>
				</ul>
			</div>
			<div class="col-md-3 text-center text-md-right mb-0">
				<ul class="list-inline">
					<li class="list-inline-item"><a href="#">Privacy</a></li>
					<li class="list-inline-item"><a href="#">Terms</a></li>
					<li class="list-inline-item"><a href="#">Support</a></li>
				</ul>
			</div>
		</div>
		<div class="row mt-4">
			<div class="col-12 text-muted text-center small">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></div>
		</div>
	</div>
</footer>
<!--scroll to top-->
<div class="scroll-top">
	<i class="fa fa-angle-up" aria-hidden="true"></i>
</div>
<!-- theme switcher (FOR DEMO ONLY - REMOVE FROM PRODUCTION)-->
<div class="switcher-wrap">
	<div class="switcher-trigger">
		<span class="fa fa-gear"></span>
	</div>
	<div class="color-switcher">
		<h6>Color Switcher</h6>
		<ul class="mt-3 clearfix">
			<li class="bg-blue active" data-color="default" title="Default Blue"></li>
			<li class="bg-orange" data-color="orange" title="Orange"></li>
			<li class="bg-red" data-color="red" title="Red"></li>
			<li class="bg-indigo" data-color="indigo" title="Indigo"></li>
			<li class="bg-cyan" data-color="cyan" title="Cyan"></li>
			<li class="bg-green" data-color="green" title="Green"></li>
			<li class="bg-black" data-color="black" title="Black"></li>
			<li class="bg-teal" data-color="teal" title="Teal"></li>
			<li class="bg-purple" data-color="purple" title="Purple"></li>
			<li class="bg-pink" data-color="pink" title="Pink"></li>
		</ul>
		<p>These are just demo colors. You can <b>easily</b> create your own color scheme.</p>
	</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
</body>
</html>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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