应用bootstrap

最新推荐文章于 2024-05-21 00:30:00 发布

留得住☞

最新推荐文章于 2024-05-21 00:30:00 发布

阅读量113

点赞数

分类专栏：组件技术文章标签：前端组件

本文链接：https://blog.csdn.net/weixin_45121542/article/details/90740577

版权

技术同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

组件

1 篇文章 0 订阅

订阅专栏

应用bootstrap

这个星期主要学习了如何使用bootstrap、如何利用文本文档写出界面、如何利用Tomcat使前端页面也可以在eclipse中运行等等，影响最深的就是老师讲解的bootstrap，这个开源工具包的使用，可以大大减少代码量，使web开发更加快捷。以下就是在制作前端界面时所利用到的一些全局css样式和组件。

布局容器，.container类，用于固定宽度并支持响应式布局的容器，而.container-fluid类用于宽度100%，占据全部视口（viewport）的容器，两者不可互相嵌套。
栅格系统，用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放在这些好的布局中（系统最多可自动分为12列）。.col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。
col-md-offset-3类将.col-md-4元素向右侧偏移了3个列的宽度。
下面就是本周上课做的:

占宽度一半

占1/4

占1/4

另一行元素

占宽度一半

占1/4

占1/4

因为我们这次主要做的是云音乐后台管理系统，里面所包含了音乐上传、音乐列表、用户管理、密码修改、系统退出，其中密码管理、音乐上传都用到了表单。单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的、和元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
内联表单
为元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

歌曲名称

水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

音乐文件
选择音乐文件

其余两个界面采用了表格样式，为任意
标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
紧缩表格 添加.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
鼠标悬停 添加 .table-hover 类可以让中的每一行对鼠标悬停状态作出响应。
带边框的表格 添加 .table-bordered 类为表格和其中的每个单元格增加边框。
条纹状表格 通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。

<table class="table table-bordered table-striped table-hover table-condensed">
					<tr>
						<td><input type="checkbox" name="" id=""></td>
						<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:01</td>
						<td>
							<button class="btn btn-info btn-sm">详情</button>
							<button class="btn btn-danger btn-sm">删除</button>
						</td>
					</tr>
				</table>


以上就是实训第二周我总结的知识点，虽然都是关于bootstrap组件的部分学习内容，但体会的不仅仅是知识的重要性，还有工作时应该有的心态。虽只是一次校外实训，但近一步地了解了将来面对的就业事宜。跟社会相适应就得不断地学习更多的知识，现在所学的知识相当有限，为了更好的掌握知识，得自觉地学习更多的知识。学校只是个启蒙的地方WEB专业的技术发展迅速，知识层出不穷。为了跟上时代的潮流，为了跟上IT这个行业的日新月异，我们更应该去把握现下的时间，努力的去拼搏。</font>