BootStrap应用实例--乐队网站的设计

本文主要是介绍BootStrap应用实例--乐队网站的设计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我们是XX乐队</title>	
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="mycss.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap-3.3.7.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</head><body id="myPage" data-spy="scroll" data-toggle=".navbar" data-offset="50"><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">		  <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="#home">主页</a></li><li><a href="#band">成员</a></li><li><a href="#tour">巡演</a></li><li><a href="#contact">联系</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" >更多<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">单曲</a></li><li><a href="#">专辑</a></li>				</ul></li><li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><div id="home"><div id="myCarousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><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><div class="carousel-inner" role="listbox"><div class="item active"><img src="../img/06.jpg"><div class="carousel-caption"><h3>北京</h3><p>北京久等了</p></div></div><div class="item"><img src="../img/07.jpg"><div class="carousel-caption"><h3>上海</h3><p>一个难忘的夜晚</p></div></div><div class="item"><img src="../img/08.jpg"><div class="carousel-caption"><h3>武汉</h3><p>越听，越想走回青春</p></div></div></div><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
</div><div class="container text-center" id="band"><h3>我们的成员</h3><p><em>我们爱音乐</em></p><p>1983年Beyond成立，同年参加“山叶吉他比赛”获得冠军并正式出道。</p><p>1986年自资发行乐队首张专辑《再见理想》。</p><p>1988年凭借粤语专辑《秘密警察》获得关注。1989年凭借歌曲《真的爱你》获得第12届十大中文金曲奖、第7届十大劲歌金曲奖。</p><p>1990年凭借歌曲《光辉岁月》获得第8届十大劲歌金曲奖 。</p><p>1991年主演电影《Beyond日记之莫欺少年穷》，同年9月，在香港红磡体育馆举办“生命接触”演唱会 。</p><p>1992年，赴日本发展演艺事业。1993年发行粤语专辑《乐与怒》，专辑中的歌曲《海阔天空》获得第16届十大中文金曲奖 ；6月30日，乐队主唱黄家驹去世，Beyond以三名成员的组成形式继续发展。</p><div class="row"><div class="col-sm-4"><p class="text-center"><strong>黄贯中</strong></p><br><a href="#demo2" data-toggle="collapse"><img src="../img/hgz.jpg" class="img-circle person"></a><div id="demo2" class="collapse">黄贯中（Paul Wong），1964年3月31日生于中国香港，中国香港男歌手、音乐人、香港摇滚乐队Beyond的主音吉他手。</div></div><div class="col-sm-4"><p class="text-center"><strong>黄家强</strong></p><br><a href="#demo1" data-toggle="collapse"><img src="../img/hjq.jpg" class="img-circle person"></a><div id="demo1" class="collapse">黄家强（Steve Wong），1964年11月13日出生于中国香港，祖籍广东省台山市，中国香港男歌手、音乐人、香港摇滚乐队Beyond的贝斯手，已故歌手黄家驹的弟弟。</div></div><div class="col-sm-4"><p class="text-center"><strong>叶世荣</strong></p><br><a href="#demo3" data-toggle="collapse"><img src="../img/ysr.jpg" class="img-circle person"></a><div id="demo3" class="collapse">叶世荣（Yip Sai Wing），1963年8月19日出生于中国香港，歌手、音乐人、摇滚乐队BEYOND鼓手及创队成员</div></div></div>
</div>	<div class="bg-1"><div class="container" id="tour"><h3 class="text-center">巡演日期</h3><p class="text-center">我们将会演绎自己的音乐。<br>快点来购票吧！</p><ul class="list-group"><li class="list-group-item">September<span class="label label-danger">售完！</span></li><li class="list-group-item">October<span class="label label-danger">售完！</span></li><li class="list-group-item">November<span class="badge">3</span></li></ul><div class="row text-center"><div class="col-md-4"><div class="thumbnail"><img src="../img/06.jpg"><p>北京</p><p>Sat. 28 Novermber 2019</p><button class="btn" data-toggle="modal" data-target="#myModal">购票</button></div></div><div class="col-md-4"><div class="thumbnail"><img src="../img/07.jpg"><p>上海</p><p>Sat. 29 Novermber 2019</p><button class="btn" data-toggle="modal" data-target="#myModal">购票</button></div></div><div class="col-md-4"><div class="thumbnail"><img src="../img/08.jpg"><p>武汉</p><p>Sat. 27 Novermber 2019</p><button class="btn" data-toggle="modal" data-target="#myModal">购票</button></div></div></div></div>	
</div>	<div class="container" id="contact"><h3 class="text-center">联系我们</h3><p class="text-center"><em>我们热爱我们的粉丝</em></p><div class="row"><div class="col-md-4"><p>喜欢我们，就给我们留言吧</p><p><span class="glyphicon glyphicon-map-marker"></span> 上海，中国</p><p><span class="glyphicon glyphicon-phone"></span> 电话:+00 18798765432</p><p><span class="glyphicon glyphicon-envelope"></span> 邮箱地址:mail@mail.com</p></div><div class="col-md-8"><div class="row"><div class="col-md-6 form-group"><input class="form-control" id="name" name="name" placeholder="Name" type="text" required></div><div class="col-md-6 form-group"><input class="form-control" id="email" name="email" placeholder="Email" type="email" required></div></div><div class="row"><div class="col-md-12 form-group"><button class="btn pull-right" type="submit">发送</button></div></div></div></div><div id="baiduMap"><script type="text/javascript">var map=new BMap.Map("baiduMap");map.centerAndZoom(new BMap.Point(120.23265,31.41114),10);map.addControl(new BMap.MapTypeControl());map.setCurrentCity("上海");map.enableScrollWheelZoom(true);</script></div></div>	<div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times</button><h4><span class="glyphicon glyphicon-lock" ></span>Tickets</h4></div><div class="modal-body"><form role="form"><div class="form-group"><label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>Tickets,每人1314元</label><input type="number" class="form-control" id="psw" placeholder="How many?"></div><div class="form-group"><label for="username"><span class="glyphicon glyphicon-user"></span>发送</label><input type="text" class="form-control" id="username" placeholder="Enter email"></div><buttom type="submit" class="btn btn-block">支付<span class="glyphicon glyphicon-ok"></span></buttom>					</form></div><div class="modal-footer"><button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"> 取消</span></button><p>需要<a href="#">帮助？</a></p></div></div></div>	
</div> 	
<footer class="text-center"><a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP"><span class="glyphicon glyphicon-chevron-up"></span></a><br></footer>
</body><script>$(document).ready(function(){$(".navbar a,footer a[href='#myPage']").on('click',function(event){event.preventDefault();var hash=this.hash;$('html,body').animate({scrollTop:$(hash).offset().top},900,function(){window.location.hash=hash;});});$("[data-toggle='tooltip']").tooltip();})
</script></html>

自定义样式表 mycss.css

/* CSS Document */
.corousel-inner img{-webkit-filter:grayscale(90%);fliter:grayscale(90%);width: 100%;margin: auto;
}.carousel-caption h3{color: #fff !important;
}@media (max-width:600px){.carousel-caption{display:none;}
}.container{padding:80px 120px;
}.person{border:10px solid transparent;margain-bottom:25px;width:200px;height: 200px;opacity: 0.7;
}.person:hover{border-color:#f1f1f1;
}.bg-1{background:#2d2d30;color:#bdbdbd;
}.bg-1 h3{color:#fff;}.bg-1 p{font-style: italic;}.list-group-item:first-child{border-top-right-radius: 0px;border-top-left-radius: 0px;
}.list-group-item:last-child{border-top-right-radius: 0px;border-top-left-radius: 0px;
}.thumbnail{padding:0 0 15px 0;border:none;border-radius: 0;
}.thumbnail p{margain-top:15px;color:#555;
}.btn{padding: 10px 20px;background-color: #333;color:#f1f1f1;border-radius: 0;transition:.2s;
}.btn:hover, .btn:focus{border:1px solid #333;background-color: #fff;color:#000;
}.modal-header,h4,.close{background-color: #333;color:#fff !important;text-align: center;font-size: 30px;
}.modal-header,.modal-body{padding: 40px 50px;
}#baiduMap{width:100%;height: 400px;fliter:grayscale(100%);
}.navbar{margin-bottom: 0px;background-color: #2d2d30;border:0;font-size:16px !important;letter-spacing: 6px;opacity: 0.9;
}.navbar li a, .navbar .navbar-brand{color:#d5d5d5 !important;
}.navbar li a:hover{color:#fff !important;background-color: #000 !important;
}.navbar-nav li.active a{color:#000 !important;background-color: #fff!important;	
}.navbar-default .navbar-toggle{border-color:transparent;
}.open .dropdown-toggle{color:#fff;background-color: #555;
}.dropdown-menu li a{color:#000 !important;
}.dropdown-menu li a:hover{background-color: red !important;
}footer{background-color: #2d2d30;color:#f5f5f5;padding:32px;
}footer a{color:#f5f5f5;
}footer a:hover{color:#777;text-decoration: none;
}

这篇关于BootStrap应用实例--乐队网站的设计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！