2021-06-28

最新推荐文章于 2021-11-09 20:10:55 发布

奶油利口酒�

最新推荐文章于 2021-11-09 20:10:55 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/qq_55977356/article/details/118313542

版权

信息管理创新实践课程第四周学习周记
信息管理创新实践课程学习进度已至第四周，应课堂要求，创作此学习周记，并将以此方式持续记录。

学习内容
本节课初步学习HTML和Bootstrap，可完成一些简单操作。
菜鸟教程自学地址：link.
编辑器：HBuilder X

知识点
1、Bootstrap 页面标题（Page Header）
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。

2、Bootstrap 缩略图
本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class .thumbnail 的 < a > 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

3、Bootstrap 警告（Alerts）
本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用警告（Alerts） jQuery 插件。
您可以通过创建一个

，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
4、Bootstrap 进度条
本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。
默认的进度条
创建一个基本的进度条的步骤如下：
添加一个带有 class .progress 的 < div >。
接着，在上面的 < div > 内，添加一个带有 class .progress-bar 的空的 < div >。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width: 60%”; 表示进度条在 60% 的位置。
交替的进度条
创建不同样式的进度条的步骤如下：
添加一个带有 class .progress 的 < div >。
接着，在上面的 < div > 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 < div >。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“60%”; 表示进度条在 60% 的位置。

5、Bootstrap 多媒体对象（Media Object）
本章我们将讲解 Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	</head>
	<body>
		<div class="page-header">
		    <h1>小城大乡
		        <small>城乡物联网电商扶贫项目</small>
		    </h1>
		</div>
		<p>摘要：经过初期市场调研，我们认为在乡村的无公害农产品收购价格低于在城市中无公害瓜果蔬菜的售卖价格，其间经过乡村农产品收购商、货运物流和城市瓜果蔬菜经销商等多方中间商接手，才使价格一步步提了上去。我们旨在城市与乡村之间进行合作，向城市输送新鲜并且特色的无公害瓜果蔬菜，向乡村普及电商购物等新兴生活方式。并在已有物流线路的基础上建立或者合作建立直线到达乡村和城市两点的物流线路，而后转向城市销售。我们主动将流程透明化，提升瓜果蔬菜在城市市民间的信任度和口碑，以此获利。</p>
	<div class="row">
	    <div class="col-sm-6 col-md-3">
	        <div class="thumbnail">
	            <img src="/wp-content/uploads/2014/06/kittens.jpg"
	                 alt="通用的占位符缩略图">
	            <div class="caption">
	                <h3>背景</h3>
	                <p>还没想好</p>
	                <p>
	                    <a href="#" class="btn btn-primary" role="button">
	                        好难啊
	                    </a>
	                    <a href="#" class="btn btn-default" role="button">
	                        太难了
	                    </a>
	                </p>
	            </div>
	        </div>
	    </div>
	    <div class="col-sm-6 col-md-3">
	        <div class="thumbnail">
	            <img src="/wp-content/uploads/2014/06/kittens.jpg"
	                 alt="通用的占位符缩略图">
	            <div class="caption">
	                <h3>简介</h3>
	                <p>也没想好</p>
	                <p>
	                    <a href="#" class="btn btn-primary" role="button">
	                        好难啊
	                    </a>
	                    <a href="#" class="btn btn-default" role="button">
	                        太难了
	                    </a>
	                </p>
	            </div>
	        </div>
	    </div>
	     <!-- 左对齐 -->
	     <div class="media">
	       <div class="media-left">
	         <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
	       </div>
	       <div class="media-body">
	         <h4 class="media-heading">队长</h4>
	         <p>唐僧</p>
	       </div>
	     </div>
	     <hr>
	     
	     <!-- 右对齐 -->
	     <div class="media">
	       <div class="media-body">
	         <h4 class="media-heading">队员</h4>
	         <p>小可爱</p>
	       </div>
	       <div class="media-right">
	         <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
	       </div>
	     </div>
	   </div>
	</div>
	</body>
</html>