BootStrap学习笔记-7

最新推荐文章于 2025-03-04 08:01:21 发布
原创 最新推荐文章于 2025-03-04 08:01:21 发布 · 372 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #媒体对象 #面板 #well

本文介绍了 BootStrap 中的媒体对象、面板和 well 组件的使用方法，并通过实例展示了如何构建媒体列表、不同样式的面板等内容。

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>


bootstrap5-学习笔记3-文字格式+表格+徽章
陆沙的博客
06-06 590
bs5
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
bootstrap学习笔记-viewport
Shine_QianMo的博客
05-04 331
Bootstrap学习笔记
m0_74530944的博客
04-23 945
在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！大家看完有什么不懂的可以在下方留言讨论也可以关注。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！也可以关注。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
Bootstrap学习笔记-1
beeworkshop的博客
11-23 178
参考网站 Bootstrap参考这里 jQuery参考这里 LESS参考这里 环境搭建 在eclipse中新建Web（Dynamic Web Project）项目 在项目的WebContent目录下新建bootstrap3目录，用于存放bootstrap的源文件。 拷贝bootstrap的源文件： bootstrap是基于jQuery的，还要拷贝jQuery。 到这里： ...
Bootstrap学习笔记-表格
wyyblog
03-29 222
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】Bootstrap5学习笔记
一只爱做笔记的码农
03-04 400
学完Blazor以后，我自己用这个写了一个小工具，但是我发现自己对前端粗浅的认知确实很难把UI层的组件弄出我想要的样子，所以我思来想去决定再把前端知识补一补.记录基于菜鸟教程的Bootstrap5教程，然后有些不清楚的我还补充一些AI说的知识。
bootstrap学习笔记--bootstrap安装环境
abn1122的博客
01-05 143
Bootstrap 安装是非常容易的。此文是本人的学习汇总，便于以后查询学习，同时也希望给大家带来帮助。 下载 Bootstrap 您可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： 您会看到两个按钮： Download Bootstrap：下载 Bootstrap。点击该按钮，...
Bootstrap学习笔记-代码
wyyblog
03-29 202
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学习笔记 01 - 开始
Cynhard的专栏
10-31 498
获取 Bootstrap通过 bower 获取：bower install bootstrap如果用到 jQuery，则可以通过 npm 下载：npm install --save jquery第一个页面<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype --> <!DOCTYPE html> <html> <head> <!-- 使用 utf-8
bootstrap学习笔记-列偏移
NRGAGA的专栏
04-02 1850
https://blog.youkuaiyun.com/hellochenlu/article/details/50339805 有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会...
Bootstrap学习笔记之环境配置(1)
09-01
1. Bootstrap学习教程：深入理解各个组件和API，以及如何在项目中应用。 2. Bootstrap实战教程：通过实际案例学习如何构建完整的响应式网站。 3. Bootstrap插件使用教程：了解并掌握Bootstrap提供的各种插件，如日期...
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的核心组件包括网格系统、排版工具、导航...
mamba-ssm-2.2.2-cp310-cp310-win-amd64.whl+安装环境+测试脚本.7z
最新发布
12-15
编译环境： vs2022 win10 x64 anaconda3+python3.10 torch==2.3.1+cu118 cuda11.8.0+cudnn8.9.7 triton==2.1.0 causal_conv1d==1.4.0 mamba==2.2.2 RTX2070显卡 注意编译的whl是不能用于RTX50显卡的，可以用于RTX20-RTX40系列显卡，安装时候尽量和模块一致
toplus1s_calculator_32040_1765656584703.zip
12-15
toplus1s_calculator_32040_1765656584703.zip
【创新无忧】基于多元宇宙优化算法MVO优化相关向量机RVM实现数据多输入单输出回归预测附matlab代码.zip
12-15
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于可靠性评估序贯蒙特卡洛模拟法的配电网可靠性评估研究（Matlab代码实现）
12-15
基于可靠性评估序贯蒙特卡洛模拟法的配电网可靠性评估研究（Matlab代码实现）内容概要：本文围绕“基于可靠性评估序贯蒙特卡洛模拟法的配电网可靠性评估研究”，介绍了利用Matlab代码实现配电网可靠性的仿真分析方法。重点采用序贯蒙特卡洛模拟法对配电网进行长时间段的状态抽样与统计，通过模拟系统元件的故障与修复过程，评估配电网的关键可靠性指标，如系统停电频率、停电持续时间、负荷点可靠性等。该方法能够有效处理复杂网络结构与设备时序特性，提升评估精度，适用于含分布式电源、电动汽车等新型负荷接入的现代配电网。文中提供了完整的Matlab实现代码与案例分析，便于复现和扩展应用。; 适合人群：具备电力系统基础知识和Matlab编程能力的高校研究生、科研人员及电力行业技术人员，尤其适合从事配电网规划、运行与可靠性分析相关工作的人员； 使用场景及目标：①掌握序贯蒙特卡洛模拟法在电力系统可靠性评估中的基本原理与实现流程；②学习如何通过Matlab构建配电网仿真模型并进行状态转移模拟；③应用于含新能源接入的复杂配电网可靠性定量评估与优化设计； 阅读建议：建议结合文中提供的Matlab代码逐段调试运行，理解状态抽样、故障判断、修复逻辑及指标统计的具体实现方式，同时可扩展至不同网络结构或加入更多不确定性因素进行深化研究。
基于控制李雅普诺夫-屏障函数(CLBF)与分布式模型预测控制（DMPC）研究（Matlab代码实现）
12-15
基于控制李雅普诺夫-屏障函数(CLBF)与分布式模型预测控制（DMPC）研究（Matlab代码实现）内容概要：本文介绍了基于控制李雅普诺夫-屏障函数（CLBF）与分布式模型预测控制（DMPC）的电力系统优化控制研究，并提供了相应的Matlab代码实现。该研究聚焦于提升含光热电站电力系统的安全性与稳定性，特别计及N-k安全约束，通过结合CLBF的稳定性保证能力和DMPC的分布式协同优化优势，实现对复杂电力系统的高效、可靠控制。文中还展示了多个相关
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值