BootStrap学习笔记-7

最新推荐文章于 2024-06-06 15:27:03 发布
最新推荐文章于 2024-06-06 15:27:03 发布
阅读量353 收藏
点赞数
分类专栏： BootStrap 文章标签： bootstrap 媒体对象 面板 well
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/devileatapple/article/details/49613841
版权

sevenLesson-BootStrap-组件-媒体对象，面板，well

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset = "utf-8">
	<title>BootStrap-组件-媒体对象，面板，well</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<!-- 设置样式以显示出对齐效果 -->
	<style>
	body
	{
		margin:10px 0;
	}
	img
	{
		width:70px;
		height:70px;
	}
	</style>
</head>
<body>
	<!-- media 媒体对象 -->
	<div class="container">
		<div class="media">
			<a class="media-left" href="#" >
				<img src="icon.png" alt="">
			</a>
			<div class="media-body">
					<h4 class="media-heading">
						欢迎来到大学糖
					</h4>
					<p>
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					</p>

					<div class="media">
					<div class="media-body">
						<h4 class="media-heading">
							欢迎来到大学糖
						</h4>
						<p>
							欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
							欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
							欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
							欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						</p>
					</div>
					<!-- img放右边需要注意代码运行，需要剪切到后面 -->
					<a class="media-right media-bottom" href="#" >
						<img src="icon.png" alt="">
					</a>
				</div>
			</div>
		</div>
		<div class="media">
			<a class="media-right media-middle" href="#" >
				<img src="icon.png" alt="">
			</a>
			<div class="media-body">
					<h5 class="media-heading">
						欢迎来到大学糖
					</h5>
					<p>
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					</p>
				</div>
		</div>
		<div class="media">
			<a class="media-left media-bottom" href="#" >
				<img src="icon.png" alt="">
			</a>
			<div class="media-body">
				<h4 class="media-heading">
					欢迎来到大学糖
				</h4>
				<p>
					欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
				</p>
			</div>
		</div>
		<hr>
		<!-- 使用table来创建media -->
		<ul class="media-list">
			<li class="media">
				<a class="media-left" href="#">
					<img src="icon.png" alt="">
				</a>
				<div class="media-body">
					<h4 class="media-heading">
						欢迎来到大学糖
					</h4>
					<p>
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					</p>
				</div>
			</li>
			<li class="media">
				<a class="media-left media-bottom" href="#">
					<img src="icon.png" alt="">
				</a>
				<div class="media-body">
					<h4 class="media-heading">
						欢迎来到大学糖
					</h4>
					<p>
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					</p>
				</div>
			</li>
			<li class="media">
				<a class="media-left media-middle" href="#">
					<img src="icon.png" alt="">
				</a>
				<div class="media-body">
					<h4 class="media-heading">
						欢迎来到大学糖
					</h4>
					<p>
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
						欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖
					</p>
				</div>
			</li>
		</ul>
		<hr>
		<!-- 面板组件-内容包在一个盒子当中 -->
		<div class="panel panel-success">
			<div class="panel-body">hello world</div>
		</div>
		<!-- 创建带标题与footer panel -->
		<div class="panel panel-default">
			<div class="panel-heading">学习网站</div>
			<div class="panel-body">hello world<br>hello world</div>
			<div class="panel-footer panel-danger">www.tangxinli.com</div>
		</div>
		<!-- 代表各的面板 -->
		<div class="panel panel-default">
			<div class="panel-heading">学习网站</div>
			<div class="panel-body">
				<table ></table>
			</div>
			<div class="panel-footer panel-danger">www.tangxinli.com</div>
		</div>
		<hr>
		<!-- 响应式 -->
		<div class="embed-responsive embed-responsive-16by9">
			
		</div>
		<!-- well -->

	</div>
</body>
</html>


bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Bootstrap学习笔记之环境配置(1)
09-01
1. Bootstrap学习教程：深入理解各个组件和API，以及如何在项目中应用。 2. Bootstrap实战教程：通过实际案例学习如何构建完整的响应式网站。 3. Bootstrap插件使用教程：了解并掌握Bootstrap提供的各种插件，如日期...
bootstrap学习笔记-viewport
Shine_QianMo的博客
05-04 299
Bootstrap学习笔记-1
beeworkshop的博客
11-23 158
参考网站 Bootstrap参考这里 jQuery参考这里 LESS参考这里 环境搭建 在eclipse中新建Web（Dynamic Web Project）项目 在项目的WebContent目录下新建bootstrap3目录，用于存放bootstrap的源文件。 拷贝bootstrap的源文件： bootstrap是基于jQuery的，还要拷贝jQuery。 到这里： ...
Bootstrap学习笔记-表格
wyyblog
03-29 204
1.源码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="/js/jquery-1.12.3.min.js"&gt;&lt;/script&gt; &lt;link r
Bootstrap学习笔记
m0_74530944的博客
04-23 873
在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！大家看完有什么不懂的可以在下方留言讨论也可以关注。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！也可以关注。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
bootstrap学习笔记--bootstrap安装环境
abn1122的博客
01-05 127
Bootstrap 安装是非常容易的。此文是本人的学习汇总，便于以后查询学习，同时也希望给大家带来帮助。 下载 Bootstrap 您可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： 您会看到两个按钮： Download Bootstrap：下载 Bootstrap。点击该按钮，...
Bootstrap学习笔记-代码
wyyblog
03-29 182
1.源码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="/js/jquery-1.12.3.min.js"&gt;&lt;/script&gt; &lt;link r
bootstrap5-学习笔记3-文字格式+表格+徽章
陆沙的博客
06-06 499
bs5
Bootstrap学习笔记 01 - 开始
Cynhard的专栏
10-31 480
获取 Bootstrap通过 bower 获取：bower install bootstrap如果用到 jQuery，则可以通过 npm 下载：npm install --save jquery第一个页面<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype --> <!DOCTYPE html> <html> <head> <!-- 使用 utf-8
bootstrap学习笔记--初识bs
qq_38409944的博客
05-24 786
参考： https://www.quanzhanketang.com/bootstrap/bootstrap_grid_basic.html bootstrap是基于jQuery的前端CSS框架 预定于好了各种CSS类 相当于API接口，直接调用即可使用css样式，方便前端开发。 这个相信大部分的前端框架都可以搞定 但是Bootstrap还可以让你轻松创建响应式设计，这什么概念？ 意...
bootstrap学习笔记-列偏移
NRGAGA的专栏
04-02 1819
https://blog.youkuaiyun.com/hellochenlu/article/details/50339805 有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会...
bootstrap模板ion-model-for-ne开发笔记
06-11
总结来说，“bootstrap模板ion-model-for-ne开发笔记”涵盖了使用Bootstrap框架构建用户界面，以及结合深度学习模型（CNN-Bi-LSTM-Attention Model）进行网络入侵检测的实践。开发者需要掌握Bootstrap的组件用法，...
bootstrap模板ntion-model-for-netwo开发笔记
06-07
在“bootstrap模板ntion-model-for-netwo开发笔记”中，我们可以推测这是一个关于如何利用Bootstrap框架来创建网络监控或网络入侵检测系统用户界面的项目。 首先，Bootstrap的核心组件包括网格系统、排版工具、导航...
ssm070基于SSM框架的校园代购服务订单管理系统的设计与实现(文档+源码)_kaic
05-19
ssm070基于SSM框架的校园代购服务订单管理系统的设计与实现(文档+源码)_kaic
SSM框架下的在线车位销售系统的设计与实现及源码和数据库
05-19
在线车位销售系统源码及数据库。该软件使用spring、springMVC和mybatis编写，数据库为mysql。安装时需将代码clone到idea项目中，导入mysql配置，并配置tomcat（开发版本9.0.45），然后启动即可。使用说明：Qiang文件夹包含开发商页面，Da文件夹包含平台页面，Miao文件夹包含用户页面。。内容来源于网络分享，如有侵权请联系我删除。
【地理信息系统】基于Google Earth Engine的K-Means图像分类：遥感影像处理与土地覆盖分类系统实现
05-19
内容概要：本文档详细介绍了如何使用Google Earth Engine (GEE) 进行基于K-Means算法的土地覆盖分类。首先，用户需要定义感兴趣区域（ROI）并绘制参考区域（如水体、植被、城市区域等）。接下来，设置图像和分类参数，包括选择Sentinel-2影像的时间范围、云量阈值、波段选择等。然后，对选定区域内的影像进行预处理和采样，准备用于训练K-Means聚类器的数据集。训练完成后，将整个影像应用聚类器进行分类，并通过定义颜色调色板来可视化分类结果。最后，提供了可选的导出功能，允许用户将分类结果保存为GeoTIFF格式。 适合人群：具备一定遥感基础知识和GEE使用经验的科研人员或地理信息系统（GIS）专业学生。 使用场景及目标：①帮助用户理解如何利用GEE平台进行土地覆盖分类；②掌握K-Means算法在遥感影像处理中的具体实现步骤；③学会通过参考几何图形辅助解释分类结果；④能够根据实际需求调整参数以优化分类效果。 阅读建议：由于本文档涉及较多技术细节，建议读者在阅读过程中结合实际操作练习，逐步熟悉各个步骤的功能与作用，同时注意查看控制台输出的信息以便及时发现并解决问题。此外，对于不熟悉的术语或概念，可以通过查阅相关文献资料加深理解。
1. 免费PDF编辑软件，轻松修改文字、添加图片！ 2. 无需付费，这些软件让PDF编辑超简单 3. 免费软件来袭，轻松搞定PDF编辑难题
最新发布
05-19
1. 免费PDF编辑软件，轻松修改文字、添加图片！ 2. 无需付费，这些软件让PDF编辑超简单 3. 免费软件来袭，轻松搞定PDF编辑难题
钢琴播放音符的程序代码QZQ1.zip
05-19
钢琴播放音符的程序代码QZQ1.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值