图片样式，辅助类样式

最新推荐文章于 2024-05-10 14:37:58 发布
最新推荐文章于 2024-05-10 14:37:58 发布
阅读量303 收藏
点赞数
分类专栏： Bootstrap 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxyuan/article/details/76223662
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<title>bootstrap入门</title>
		<script src="js/jquery-1.6.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>
	<body style="padding: 50px;background-color: orange;">
		<div class="container" style="padding: 30px; background-color:white ;">
			<h3 class="page-header">图片样式应用</h3>
			<div>
				<img class="img-responsive img-rounded" width="400px" height="270px" src="img/IMG_8421.jpg" />
				<p>这是一条信息</p>
			</div>
		</div>
		<br />
		<h2 class="page-header">浮动和清除的应用</h2>
		<div style="border: 1px solid greenyellow; width: 400px;" class="clearfix">
			<ul class="list-unstyled">
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				
			</ul>
			
		</div>
	</body>
</html>






<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<title>bootstrap入门</title>
		<script src="js/jquery-1.6.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>
	<body style="padding: 50px;background-color:gainsboro;">
		<div class="container" style="padding: 30px; background-color:white ;">
			<h3 class="page-header">图片样式应用</h3>
			<div>
				<img class="img-responsive img-rounded" width="400px" height="270px" src="img/IMG_8421.jpg" />
				<p>这是一条信息</p>
			</div>
		</div>
		<br />
		<h5 class="page-header container">浮动和清除的应用</h5>
		<div style="border: 1px solid greenyellow; width: 400px;" class="clearfix container">
			<ul class="list-unstyled">
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
				<li class="pull-left" style="padding: 10px;">
					<a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br />
					<a href="#">这是一个测试</a>
				</li>
			</ul>
		</div>
		<!--下拉菜单的应用-->
		<h5 class="page-header container">下拉菜单的应用</h5>
		<div class="dropdown container">
			<button type="button" class="btn btn-default" data-toggle="dropdown">
				php课程体系<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">html</a></li>
				<li><a href="#">css</a></li>
				<li><a href="#">js</a></li>
				<li class="divider"></li>
				<li><a href="#">jQuery</a></li>
				<li><a href="#">ajax</a></li>
			</ul>
		</div>
			<!--按钮组的应用 -->
			<h5 class="page-header container">按钮组的应用</h5>
		<div class="container">
		<div class="btn-group btn-group-lg">
			<button type="button " class="btn btn-primary">left</button>
			<button type="button" class="btn btn-primary">center</button>
			<button type="button" class="btn btn-primary">right</button>		
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-success">left2</button>
			<button type="button" class="btn btn-success">center2</button>
			<button type="button" class="btn btn-success">right2</button>		
		</div>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-warning">left3</button>
			<button type="button" class="btn btn-warning">center3</button>
			<button type="button" class="btn btn-warning">right3</button>		
		</div>
		</div>
		<!--按钮式的下拉菜单应用 -->
		<h5 class="page-header container">按钮式的下拉菜单应用</h5>
		<div class="btn-group container">
			<button class="btn btn-danger" data-toggle="dropdown">ship
				<span class="caret"></span>
			</button>
				<ul class="dropdown-menu">
					<li><a href="#">html</a></li>
					<li><a href="#">html</a></li>
					<li><a href="#">html</a></li>
					<li><a href="#">html</a></li>
				</ul>
		</div>
		
	</body>
</html>


boxyuan
关注
专栏目录
bootstrap图片加上遮蔽罩_BootStrap 图片样式、辅助类样式和CSS组件的实例详解
weixin_39885469的博客
12-22 232
首先把模板代码上上来:BootStrap基础入门图片样式.img-responsive：直接为图片添加该样式，可以实现响应式图片。.center-block：图片居中样式，而不能使用text-center样式。图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)图片样式应用 文字文字文字文字文字文字文字文字文字文字文...
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
在本文中，我们将深入探讨BootStrap框架中的图片样式、辅助类样式以及CSS组件的实例应用。Bootstrap是一款流行的前端开发框架，它提供了丰富的预定义样式和组件，使得开发者能够快速构建响应式和移动设备优先的网页...
Bootstrap框架之图片和辅助类
weixin_42146366的博客
07-20 423
一、简介 这一篇博客是Bootstrap中全局CSS样式介绍的最后一篇博客了，这篇博客主要介绍图片和辅助类的一些基本的用法，想要更全面的了解Bootstrap的全局CSS样式，可以看《Bootstrap全局CSS样式》。 二、图片 响应式图片 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:...
图片与辅助样式
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-04 416
图片与辅助样式 响应式图片.img-responsive 1.新建一个web项目ch08。 2.在ch08中新建一个demo01.html，将css文件模版导入进来。 3.将移动设备优先拷贝到demo01的头文件中。 name="viewport" content="wid
图片，辅助类样式
weixin_30838873的博客
06-20 58
图片样式 .img-responsive: 给图片加该样式可实现响应式布局 .center-block:图片居中样式， 图片形状样式：.img-rounded(圆角图片) ， .img-circle(圆形图片)，.img-thumbnail(边框圆角） 辅助类样式 文本颜色：.text-muted(柔和类) .text-primary .text-success .te...
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
谙忆-陈浩翔
01-19 3212
转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 首先把模板代码上上来:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap之辅助类样式，响应式工具和小图标组件
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-07 3874
Bootstrap之辅助类样式，响应式工具和小图标组件的使用 一. 辅助类样式Bootstrap 在布局方面提供了一些细小的辅助类样式，用于文字颜色以及背景色的设置、显示关闭图标等等。 1. 文本颜色类 2. 背景颜色类 3. 其他类 关闭按钮 close 三角符号 caret 块级居中 center-block 快速浮动 pull-left（左浮动），pull-right(右浮动)
Bootstrap 全局CSS样式：辅助类的使用
WangMin@汪末末
09-01 283
作者: WangMin 格言: 努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 情境文本颜色 六种文本色， 分别代表不同的场景，以text-开头，在鼠标经过时颜色可以还可以加深 。 -primary 主色 -info 副色 -success 成功色 -warning 警告色 -danger 错误色 文本多了一种柔弱色text-muted, 默认为浅灰 <p class="text-muted">text-muted</p> <p clas
前端基础之《Bootstrap（4）—全局CSS样式_图片、辅助类、响应式工具》
csj50的专栏
11-02 411
1、表格响应式（.table-responsive）2、图片响应式（.img-responsive）1、让块标签居中（.center-block）2、蓝色（.text-primary）3、绿色（.text-success）5、黄色（.text-warning）1、圆角（.img-rounded）2、右浮动（.pull-right）2、圆形（.img-circle）1、灰色（.text-muted）1、蓝色（.bg-primary）2、绿色（.bg-success）1、左浮动（.pull-left）
Bootstrap 的辅助类
歪脖先生的博客
03-12 396
辅助类Bootstrap提供了大量的公共样式类，有的用于辅助设计，有的作为工具供用户使用。以下是 4 个常用的辅助类：.pull-left：用于把元素浮动到容器左侧。.pull-right：用于把元素浮动到容器右侧。.muted：用于把页面元素的颜色改为 #999。.clearfix：为任意页面元素清除浮动。版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。...
css样式辅助网站
2201_75294326的博客
05-10 1092
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
11.全局css样式之辅助类.wmv
05-05
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
12.Bootstrap图片与辅助样式.rar
08-02
这个压缩包“12.Bootstrap图片与辅助样式.rar”显然是一个关于如何使用Bootstrap处理图片和辅助样式的教学资源。从标签“C#”我们可以推断，虽然Bootstrap主要是一个HTML、CSS和JavaScript框架，但可能在讲解中会...
120个C#辅助类.zip
04-29
在C#编程中，辅助类通常是一些封装了常用功能的静态类，它们提供便捷的方法，使得开发者在处理特定任务时能快速而高效地完成工作。"120个C#辅助类.zip"这个压缩包文件集合了一系列实用的C#辅助类，涵盖了多个领域的...
Python 实现 LSTM 和 XGBoost 组合模型来预测 Apple Inc.（AAPL）股票价格（包含详细的完整的程序
10-06
内容概要：详细演示了使用 Python 中的 LSTM 和 XGBoost 结合来创建股票价格预测模型的方法。该示例介绍了从数据提取到模型优化全过程的操作，并最终通过图形比较预测值和真实值，展示模型的有效性，有助于提高金融投资决策水平和风险管理能力。本项目的亮点之一就是它融合 LSTM 捕获时间关系的强大能力和 XGBoost 在复杂特征之间的建模优势。 适用人群：有Python编程经验的人士以及金融市场投资者和技术分析师。 使用场景及目标：应用于金融市场的投资策略规划，特别是针对需要长期监控、短期交易决策的股票，用于辅助进行市场走势判断和交易决策支持。 额外信息：此外还包括对未来工作的改进建议：加入更多金融技术指标的考量以及使用更高级机器学习模型的可能性。
2019年计算机网络专业学生实习总结(二篇).pdf
10-06
计算机试题试卷课件
222222222222222222222222222222222222222222222
最新发布
10-06
222222222222222222222222222222222222222222222
2020年计算机机试和笔试01至考试题.pdf
10-06
计算机试题试卷课件
2019年计算机项目实训总结.pdf
10-06
计算机试题试卷课件
BootStrap样式与组件实战：图片、辅助类与CSS详解
"BootStrap 图片样式、辅助类样式和CSS组件的实例详解" Bootstrap 是一个流行的前端开发框架，它提供了丰富的预定义样式、组件和工具，帮助开发者快速构建响应式和移动优先的网页。本篇文章主要关注的是BootStrap中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值