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

最新推荐文章于 2024-05-25 11:20:11 发布
最新推荐文章于 2024-05-25 11:20:11 发布
阅读量3.7k 收藏 51
点赞数 13
分类专栏： html5+css3+JavaScript实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29681777/article/details/98207875
版权

 

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;
}

 

不吃鱼的猫748
关注
  • 13
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
中国传统节日端午节网页HTML代码 学生网页课程设计期末作业下载 春节大学生网页设计制作成品下载 DW春节节日网页作业代码下载
qq___365392777的博客
10-22 7476
HTML5期末大作业：节日网站设计——中国传统节日端午节网页HTML代码(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目
BeyondAdmin基于bootstrap3.2.0框架的响应式多用途管理主题
04-19
BeyondAdmin - 基于bootstrap3.2.0框架的响应式多用途管理主题，多种主题任意切换。
游戏音乐娱乐类网站源码-乐队演唱会网页模板-适配手机端.zip
03-24
【HTML娱乐游戏音乐网站源码】激发激情，点燃创意！ 定制娱乐体验 — 专为游戏爱好者设计，这份源码打造了一个视觉震撼、互动性强的在线平台。 音乐元素融合 — 音乐播放器与游戏内容无缝对接，为用户带来动感十足的音乐体验。 高度适配性 — 无论是桌面还是移动设备，全面优化的响应式设计确保网站在各种屏幕尺寸上完美展现。 SEO友好结构 — 强化搜索引擎可见度，吸引更多目标用户访问你的网站。 立即采用这份专业级源码，开启你的娱乐游戏音乐网站之旅，抓住用户的心，领跑市场竞争。
royband:乐队网站
04-01
royband.com使用 Ruby 2.7.2 杰基尔 html 希望 安装 gem install bundle bundle 提供页面并在发生更改时重新生成 bundle exec jekyll serve --watch 建立网站的新版本 bundle exec jekyll build --destination docs echo "royband.com" > docs/CNAME 如何 royband.com的复古模板和主题是在Seamonkey作曲家中创建的，并嫁接到了Ruby静态站点框架Jekyll中。
推荐：Bootstrap Theme Machine - 创意无限的Bootstrap主题库
gitblog_00075的博客
05-19 384
推荐：Bootstrap Theme Machine - 创意无限的Bootstrap主题库 项目地址:https://gitcode.com/HackerThemes/theme-machine Bootstrap Theme Machine 是一个由HackerThemes提供的开源项目，它集合了所有免费且开放源码的Bootstrap主题。每个主题都封装在独立的文件夹下，便于直接集成到你的项目...
音乐Party响应式bootstrap网站模板
04-02
音乐Party响应式bootstrap网站模板
摇滚音乐bootstrap主题网站模板
04-09
摇滚音乐bootstrap主题网站模板
简洁扁平化风格bootstrap响应式社交音乐网站
09-23
简洁扁平化风格bootstrap响应式社交音乐网站模板html整站下载
（Bootstrap）案例学习
南淮北安的博客
02-29 539
文章目录一、分析页面二、页眉部分三、主体部分五、页脚部分 一、分析页面 整个页面分为三部分：页眉部分，主题部分，页脚部分 这里借用 Bootstrap 对 HTML案例 进行优化处理 二、页眉部分 可以看到这里共可分为四行，而且页眉部分采用未留白方式，百分百宽度 container-fluid <!-- 页眉部分--> <!-- header形式化阅读，相当于 div--&gt...
使用Bootstarp技术实现响应式音乐网站
沐小侠
05-22 244
使用Bootstarp技术、网易云音乐API、Ajax技术实现响应式音乐网站，包括首页、歌单列表页等
【程序源代码】音乐网站
程序源代码
11-06 954
！！“关键字:“音乐网站"01————【总体介绍】【音乐网站】 基于springboot+bootstrap+vue开发的音乐网站。 主要应该在PC端运行使用。主要功能可实现：在线音乐播放、排行榜、歌曲收藏、歌曲分类、歌手分类、滚动图展示、用户注册。 源码是用java语言开发，数据库使用的是mysql数据库；开发工具使用的idea开发工具。02————【详...
学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
热门推荐
HTML网页设计
07-26 1万+
1网页简介此作品为学生个人主页网页设计题材，学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作dreamweaver网页设计与制作代码web前端期末大作业2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。一套合格的网页应该包含(具体可根据个人要求而定)...
bootstrap常用的一些应用示例
09-19
bootstrap常用的一些应用示例,这些示例使用很简单，上手容易，包含了一些bootstrap使用的最多的功能，如：表单美化，弹出层，消息框，页面布局等...
bootstrap-5.1.3-dist.zip
11-11
综上所述，"bootstrap-5.1.3-dist.zip"是一个包含Bootstrap 5.1.3所有静态资源的压缩包，包括CSS、JavaScript文件以及必要的图片和其他资源，用于快速构建现代Web应用。无论你是初学者还是经验丰富的开发者，这个...
bootstrap-table-master.rar
06-18
Bootstrap框架以其简洁、直观和响应式的设计理念，深受开发者喜爱，而Bootstrap Table则进一步增强了表格的交互性和实用性。在这个"bootstrap-table-master.rar"压缩包中，你将找到所有必要的资源来在你的项目中实现...
bootstrap-5.0.0-beta3-dist.zip
05-02
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，用于快速构建响应式、移动优先的网站。Bootstrap 5.0.0-beta3是该框架的一个重要版本，标志着Bootstrap向5.0稳定版的迈进。在这个...
Java bootstrap-3.4.1-dist 前端框架
03-18
5. **响应式设计**：Bootstrap 3.4.1支持响应式设计，意味着网站的布局和内容会根据用户的设备和屏幕大小自动调整。这种设计方法使得网站在任何设备上都能提供一致的用户体验。 6. **字体图标**：Bootstrap包含了...
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框，这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑，包括选择下拉框中的值。 `bootstrap-...
设计一个简单HTML爵士音乐网页（HTML+CSS）
最新发布
weixin__BJ050106的博客
05-25 268
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
bootstrap-5.0.1-dist
01-26
Bootstrap是一个流行的开源前端框架，用于构建响应式和移动优先的网页设计。bootstrap-5.0.1-dist是Bootstrap框架的一个特定版本，它包含了所有必要的文件和资源，以便于开发者快速集成到自己的项目中使用。该版本...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值