软帝实训第二周总结

最新推荐文章于 2021-11-21 13:46:07 发布

Asshead_

最新推荐文章于 2021-11-21 13:46:07 发布

阅读量475

点赞数

分类专栏：总结文章标签：总结

本文链接：https://blog.csdn.net/Asshead_/article/details/90722651

版权

总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本周实训让我对bootstrap有了一定的了解，了解到其中的栅格系统（栅格系统中的列是通过指定1到12的值来表示其跨越的范围所以不会有col-**-15 ，最大也就是12）、列表组（list-group：可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件）的基本使用、面包屑导航（Breadcrumbs：是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加）等等，就不一一说了。还了解到一点Tomcat服务器的相关知识。

第一天

实现音乐播放器底部的进度条和时间的显示。了解web服务器Tomcat安装与配置，了解到如何在服务器中运行静态文件和动态文件，知道如何将Tomcat服务器集成到Eclip中。

第二天

用户登录界面的实现和增加链接，了解到一些选择器和animatecss使用，了解到搞前端需要懂那些知识。

第三天

了解了bootstrap，并知道它的基本用法（boostrap快捷设置按钮样式），了解了bootstrap栅格系统

<div class="container">
			<div class="col-md-6 col-xs-6">占宽度一半</div>
			<div class="col-md-3 col-xs-3">占1/4</div>
			<div class="col-md-3 col-xs-3">占1/4</div>
			<div class="col-md-6 col-md-offset-3">另一行元素</div>
		</div>

第四天

了解到bootstrap里的table表格基本用法。中间还带了点jQuery，实现了用jQuery完成菜单切换效果、去除所有菜单项的激活效果和为当前点击的菜单项添加激活效果。下午，基本上是听了一下午的有关就业方面的知识，了解到了一些面试的技巧。

jQuery完成菜单切换效果、去除所有菜单项的激活效果和为当前点击的菜单项添加激活效果代码如下：

//完成菜单切换效果
			$(function(){
				//选中所有的菜单项,并绑定点击事件
				$('#menu>div>a').on('click',function(){
					//去除所有菜单项的激活效果
					$('#menu>div>a').removeClass('active');
					//为当前点击的菜单项添加激活效果
					$(this).addClass('active');	
				})
			})

按钮：

<div class="btn-group" style="margin-bottom:20px">
			<a href="music_add.html" class="btn btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;上传音乐</a>
			<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>&nbsp;批量删除</button>
		</div>

音乐列表表格代码：

<table class="table table-bordered table-striped table-hover table-condensed">
					<tr>
						<th><input type="checkbox" name="" id=""></th>	
						<th>序号</th>
						<th>歌曲名</th>
						<th>歌手</th>
						<th>专辑</th>
						<th>风格</th>
						<th>路径</th>
						<th>大小</th>
						<th>上传时间</th>
						<th>操作</th>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id=""></td>
						<td>1</td>
						<td>小苹果</td>
						<td>筷子兄弟</td>
						<td>老男孩</td>
						<td>广场</td>
						<td>/musics/01/xiaopingguo.mp3</td>
						<td>4.5MB</td>
						<td>2019-01-02 10:22:10</td>
						<td>
							<button class="btn btn-info btn-xs">详情</button>
							<button class="btn btn-danger btn-xs">删除</button>
						</td>
					</tr>
		</table>

第五天

完善了云音乐后台管理系统的音乐上传、用户管理、密码修改。让我对bootstrap了解更深了。对他的基本格式也有一定的了解。从中知道如何用bootstrap写分页链接
音乐上传：

<form action="" class="form-horizontal">
					<div class="form-group">
						<label for="" class="col-md-1 control-label">音乐文件</label>
						<div class="col-md-6">
							<button class="btn btn-success">
								<span class="glyphicon glyphicon-cloud-upload"></span>
								选择音乐文件
							</button>
						</div>
					</div>
					<div class="form-group">
						<label for="" class="control-label col-md-1">歌曲名称</label>
						<div class="col-md-6">
							<input type="text" class="form-control" placeholder="请输入歌曲名称">
						</div>
					</div>
					<div class="form-group">
						<label for="" class="control-label col-md-1">歌手名称</label>
						<div class="col-md-6">
							<input type="text" class="form-control" placeholder="请输入歌手名称">
						</div>
					</div>
					<div class="form-group">
						<label for="" class="control-label col-md-1">专辑名称</label>
						<div class="col-md-6">
							<input type="text" class="form-control" placeholder="请输入专辑名">
						</div>
					</div>
					<div class="form-group">
						<label for="" class="control-label col-md-1">歌曲风格</label>
						<div class="col-md-11">
							<span class="label label-info">流行</span>
							<span class="label label-info">摇滚</span>
							<span class="label label-info">乡村</span>
							<span class="label label-info">轻音乐</span>
							<span class="label label-info">爵士</span>
							<span class="label label-info">民谣</span>
							<span class="label label-info">鬼畜</span>
							<span class="label label-info">重金属</span>
							<span class="label label-info">说唱</span>
							<span class="label label-info">怀旧</span>
							<span class="label label-info">古风</span>
						</div>
					</div>
					<div class="form-group">
						<label for="" class="control-label col-md-1 sr-only">歌曲风格</label>
						<div class="col-md-6">
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-3 col-md-offset-4">
							<button type="button" class="btn btn-primary btn-block">确定上传</button>
						</div>
					</div>
				</form>

用户管理:

<ol class="breadcrumb">
			<li><a href="">用户管理</a></li>
		</ol>
		
		<button class="btn btn-primary" style="margin-bottom:20px" type="button" data-toggle="modal" data-target="#addUser">
			<span class="glyphicon glyphicon-plus"></span>
			用户添加
		</button>
		
		<div class="panel panel-primary">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-user"></span>
				用户管理
			</div>
			<div class="panel-body">
				
				<table class="table table-bordered table-hover table-striped table-condensed">
					<tr>
						<th>序号</th>
						<th>用户名</th>
						<th>手机号</th>
						<th>创建时间</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>1</td>
						<td>softeem</td>
						<td>13866688898</td>
						<td>2019-05-31 10:12:22</td>
						<td><span class="label label-danger">禁用</span></td>
						<td>
							<a href="">启用</a>
							<a href="">删除</a>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>admin</td>
						<td>1867654321</td>
						<td>2019-02-11 17:52:27</td>
						<td><span class="label label-success">启用</span></td>
						<td>
							<a href="">禁用</a>
							<a href="">删除</a>
						</td>
					</tr>
				</table>
				<div class="page text-center">
					<ul class="pagination">
						<li>
							<a href="">
								<span>&laquo;</span>
							</a>
						</li>
						<li><a href="">1</a></li>
						<li class="active"><a href="">2</a></li>
						<li><a href="">3</a></li>
						<li>
							<a href="">
								<span>&raquo;</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

用户添加的模态框 :

		<div class="modal" id="addUser">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal" type="button">&times;</button>
						<h4 class="modal-title">管理员新增</h4>
					</div>
					<div class="modal-body">
						
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary">添加</button>
					</div>
				</div>
			</div>
		</div>

密码修改：

<form action="" class="form-horizontal">
					<div class="form-group">
						<label for="" class="col-md-1 control-label">原密码:</label>
						<div class="col-md-4">
							<input type="password" name="" id="" class="form-control" placeholder="请输入原始密码">
						</div>
					</div> 
					<div class="form-group">
						<label for="" class="col-md-1 control-label">新密码:</label>
						<div class="col-md-4">
							<input type="password" name="" id="" class="form-control" placeholder="请输入新密码">
						</div>
					</div> 
					<div class="form-group">
						<label for="" class="col-md-1 control-label">重复密码:</label>
						<div class="col-md-4">
							<input type="password" name="" id="" class="form-control" placeholder="请输入重复密码">
						</div>
					</div> 
					<div class="form-group">
						<div class="col-md-2 col-md-offset-3">
							<button class="btn btn-warning btn-block">确认修改</button>
						</div>
					</div>
				</form>

Asshead_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
软帝实训第二周总结

本周实训让我对bootstrap有了一定的了解，了解到其中的栅格系统（栅格系统中的列是通过指定1到12的值来表示其跨越的范围所以不会有col-**-15 ，最大也就是12）、列表组（list-group：可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件）的基本使用、面包屑导航（Breadcrumbs：是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布...
复制链接

扫一扫