Bootstrap（十）

最新推荐文章于 2024-05-11 09:36:24 发布
最新推荐文章于 2024-05-11 09:36:24 发布
阅读量168 收藏
点赞数
分类专栏： bootstrap学习 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43278421/article/details/106563356
版权

今天学习任务是bootstrap的响应式多媒体
响应式之前了解过了，就是自动根据屏幕大小变化
这个多媒体包括了图标，图像，视频

Bootstrap图标的响应式
图标有很多种，有img导入的，还有Sprites（雪碧图），Icon font（字体图标），SVG Icon，DataURI，在技术实现时，需要考虑页面的可访问性、重构的灵活性、可复用性、可维护性。

img
操作简单方便，只需要更换路径就可以很容易更换图片，但是如果用的过多会增加http的请求数，直接影响页面的加载性能，并且不易与修改图标样式

Sprites
又叫CSS精灵，它可以极大限度地减小http请求数，而且有很好的兼容性，但是制作开发需要花大量时间，维护成本高，图片尺寸只是固定的，不易修改图片的大小和定位。随着retina屏幕的使用，图标也变得模糊不清。

Icon Font
字体图标，为了解决屏幕分辨率对图标影响的问题而诞生，相对于位图而言，它不受限于屏幕分辨率，只要与字体相关的css属性都适合字体图标。只不过字体图标只能被渲染成单色或css3的渐变色，文件体积往往会很大的，会直接影响加载性能

SVG
这种图标也能够适应屏幕分辨率，它是一种矢量图标。Svg图标是一个服务于浏览器的xml文件，而不是一个字体或者像素的位图，它是由浏览器直接渲染xml，任何大小下都会保持图像清晰，并且可以在代码中直接使用动画或者修改颜色、描边等，不需要借助任何图形编辑软件便可以直接自定义图像

dataURI
这种图标形式是利用base64编码规范将图片转换为文本字符，不仅仅是图片，还能够编码js，css，html等文件。将图标文件转换成文本字符后，就可以直接写在html/css文件中，也就不需要发送什么请求了。他的劣势在于每次都都要解码从而阻塞了css渲染，可以把其他css和图片css分成两部分，但是这样就需要增加一个请求，这样一来，原本的优势就没了。

如何选择web中的图标方案。
1.如果你需要信息更加丰富的图片，不仅仅是图标时，推荐img
2.如果是装饰性的图片，不怎么需要改变大小的，推荐sprites
3.如果需要高分辨率高清的适应，推荐svg
4.如果仅仅使用icon这些小图标的时候，又希望做一定啊个性化样式，考虑使用icon font
5.如果需要图标更具有扩展性，又不希望加载其它额外的图标，可以考虑在页面中直接使用svg

其实就是一句话，要求高用svg，要求低用其他小图标

boottstrap图像的响应式
不同平台不可能用同一张大小的图片，这样会影响加载速度
但是我想，总不能同一个图片准备好几种分辨率和大小的文件吧，这样加载是的速度会很慢，这些图片虽然只选用了其中一张，但是实际上是加载了所有的，网页会非常地臃肿
有以下几个方案：
focal point，
他是一个框架，作用是帮助"种植"图片并且控制焦点，开发者只需要向对应的标签中添加含有目标图片的类即可（…书上写的种植，我完全不知道它想表达什么…）
CSS Sprites
他的作用是把网页需要的各种大小的图片都包含到一张大图中供选择器引用，如此，只需要一个http请求
自适应图片
自适应图片的解决方法是通过检测设备的屏幕尺寸，为html嵌入符合屏幕尺寸需求的图片资源，他需要在被本地运行的js来检测，但是她主要还是依靠apache2网络服务器，php5.x以及GD库。他的优势就在于不需要改变标记（…我也不是很清楚什么标记…）

<img src="dog-689.jpg"
      srcset="dog-689.jpg   689w,
             dog-1378.jpg    1378w,
             dog-500.jpg     500w,
             dog-1000.jpg    1000w"
      sizes="(min-width:1066px)   689px,
             (min-width:800px)    calc(75vw-137px),
             (min-width:530px)    calc(100vw-96px),
             100vw">

举例，如果是800px的窗口，那么800*0.75-137=463
然后463xdpr 再到secset中找到适合于这个数的图片

图像网格
网格布局能够基于固定数量、浏览器窗口中的可用空间划分网页主要区域的空间

网格布局将元素按列和行对齐，但是没有内容结构

<!DOCTYPE html>
<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>
		<style>
			.cbp-ig-grid{
				list-style:none;
				padding:0 0 50px 0;
				margin:0;
			}
			
			.cbp-ig-grid::before,
			.cbp-ig-grid:after{
				content: "";
				display: table;
			}
			.cbp-ig-grid:after{
				clear: both;
			}
			.cbp-ig-grid li{
				width:33%;
				float: left;
				height: 420px;
				text-align: center;
				border-top:1px solid #ddd;
			}
			.cbp-ig-grid li:nth-child(-n+3){
				border-top: none;
			}
			.cbp-ig-grid li:nth-child(3n-1),
			.cbp-ig-grid li:nth-child(3n-2){
				box-shadow:1px 0 0 #ddd;
			}
			.cbp-ig-grid li>a{
				display: block;
				height: 100%;
				color:#47a3da;
				-webkit-transition:backgroud 0.2s;
			}
			
			.cbp-ig-grid .cbp-ig-title{
				margin:20px 0 10px 0;
				padding:20px 0 0 0;
				font-size:2em;
				position:relative;
				-webkit-transition:-webkit-transform 0.2s;
			}
			
			.cbp-ig-grid li>a:hover{
				background:#47a3da;
			}
			
			.cbp-ig-grid li>a:hover .cbp-ig-icon{
				-webkit-transform:translateY(10px);
				
			}
			
			.cbp-ig-grid li>a:hover .cbp-ig-icon:before,
			.cbp-ig-grid li>a:hover .cbp-ig-title{
				color:#fff;
			}
			
			.cbp-ig-grid li>a:hover .cbp-ig-title{
				-webkit-transform:translateY(-30px);
				
			}
			.cbp-ig-grid li>a:hover .cbp-ig-title:before{
				background:#fff;
				margin-top:80px;
			}
			
			@media screen and (max-width:62.75em){
				.cbp-ig-grid li{
					width:50%;
				}
				.cbp-ig-grid li:nth-child(-n+3){
					border-top:1px solid #ddd;
				}
				.cbp-ig-grid li:nth-child(3n-1),
				.cbp-ig-grid li:nth-child(3n-2){
					box-shadow:none;
				}
				.cbp-ig-grid li:nth-child(-n+2){
					border-top:none;
				}
				.cbp-ig-grid li:nth-child(2n-1){
					box-shadow:1px 0 0 #ddd;
				}
			}
			@media screen and (max-width:41.6em){
				.cbp-ig-grid li{
					width: 100%;
				}
				.cbp-ig-grid li:nth-child(-n+2){
					border-top:1px solid #ddd;
				}
				.cbp-ig-grid li:nth-child(2n-1){
					box-shadow:none;
				}
				.cbp-ig-grid li:first-child{
					border-top: none;
				}
			}
			@media screen and (max-width:25em){
				.cbp-ig-grid{
					font-size:80%;
				}
				.cbp-ig-grid .cbp-ig-category{
					margin-top:20px;
				}
			}
		</style>
	</head>
	<body>
		<ul class="cbp-ig-grid">
			<li>
				<a href="#">
					<span class="cbp-ig-icon cbp-ig-icon-shoe"></span>
					<h3 class="cbp-ig-title">经典款</h3>
					<span class="cbg-ig-category">时尚</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="cbp-ig-icon cbp-ig-icon-milk"></span>
					<h3 class="cbp-ig-title">运动时</h3>
					<span class="cbg-ig-category">休闲款</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="cbp-ig-icon cbp-ig-icon-spectacles"></span>
					<h3 class="cbp-ig-title">眼睛</h3>
					<span class="cbg-ig-category">实用</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="cbp-ig-icon cbp-ig-icon-ribbon"></span>
					<h3 class="cbp-ig-title">录像带</h3>
					<span class="cbg-ig-category">设计版</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="cbp-ig-icon cbp-ig-icon-whippy"></span>
					<h3 class="cbp-ig-title">甜品</h3>
					<span class="cbg-ig-category">视频</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="cbp-ig-icon cbp-ig-icon-doumbek"></span>
					<h3 class="cbp-ig-title">衣柜</h3>
					<span class="cbg-ig-category">经典</span>
				</a>
			</li>
		</ul>
	</body>
</html>

以上是书上的全部代码
它根据屏幕的大小不同，一共分了3种显示形式，单列、双列、三列

bootstrap视频的响应式
视频的响应式大部分的时候光靠css是做不到的，还需要结合js
书上推荐使用iframe+CSS
具体的她没写很详细，以后需要了再学吧

mwwb
关注
专栏目录
Bootstrap Icons开源SVG图标库-其他
06-29
Bootstrap Icons是Bootstrap开源的SVG图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以免费用于任何项目，无论此项目是否使用了Bootstrap。 Bootstrap Icons是SVG图标库，因此它们可以快速、轻松地扩展，并且可以配合CSS的使用进行个性化定制。根据自己的设置，可以通过多种方式将Bootstrap Icons添加到项目： 将SVG复制粘贴为嵌入式HTML 通过元素引用 使用SVG精灵 通过CSS包含 Tags：icons svg 开源图标库 SVG图标库
Bootstrap系列之官方图标库
老__L的博客
06-19 6924
官方图标库
Bootstrap
weixin_61561066的博客
07-25 1205
Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。常用来开发响应式布局和移动设备优先的web项目，能够帮助开发者快速搭建前端页面。
Bootstrap系列之图片（Image）
老__L的博客
05-27 3735
图片（Image）
Bootstrap 快速入门之第五章 组件之图标&下拉菜单&按钮组&按钮式下拉菜单
qq_61313896的博客
05-01 1646
一：图标 Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置width: 1em（以及可选的height: 1em），便于你通过font-size属性重置图标的大小。 用法： 1.内嵌 将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。 <svg xmlns="...
bootstrap 十四套合集
01-27
bootstrap 十四套合集
bootstrap-datepicker
07-28
Bootstrap-datepicker是一款基于Bootstrap框架的日期选择插件，用于在网页上提供美观且功能丰富的日期选择功能。这款插件设计简洁，易于集成，并提供了多种自定义选项以满足不同项目的需求。 一、基本使用 ...
bootstrap.zip
04-29
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含...
bootstrap 界面Demo
05-12
Bootstrap是世界上最受欢迎的前端开发框架之一，主要用于构建响应式布局和移动设备优先的Web项目。在"bootstrap 3.0界面Demo"中，我们可以深入学习和理解如何利用Bootstrap 3.0版本创建美观且功能丰富的网页设计。这...
bootstrap3.4.1源代码,bootstrap
最新发布
06-16
十、兼容性和浏览器支持 Bootstrap 3.4.1致力于保持广泛的浏览器兼容性，支持现代浏览器如Chrome、Firefox、Safari、Edge，以及IE9+。它还提供了对移动设备的支持，确保在各种设备上都能获得良好的用户体验。 总结...
BootstrapIcons开源SVG图标库 v1.0
09-28
为您提供BootstrapIcons开源SVG图标库下载，Bootstrap Icons是Bootstrap开源的SVG图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以用于任何项目，无论此项目是否使用了Bootstrap。Bootstrap Icons是SVG图标库，因此它们可以快速、轻松地扩展，并且可以配合CSS的使用进行个性化定制。根据自己的设置，可以通过多种方式将Bootstrap Icons添加到项目：将
BootstrapIcons开源SVG图标库 v1.1.0
12-15
为您提供BootstrapIcons开源SVG图标库下载，Bootstrap Icons是Bootstrap开源的SVG图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以用于任何项目，无论此项目是否使用了Bootstrap。Bootstrap Icons是SVG图标库，因此它们可以快速、轻松地扩展，并且可以配合CSS的使用进行个性化定制。根据自己的设置，可以通过多种方式将Bootstrap Icons添加到项目：将
Bootstrap Icons开源SVG图标库
07-06
Bootstrap开源的SVG图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以免费用于任何项目，无论此项目是否使用了Bootstrap。 Bootstrap Icons是SVG图标库，因此它们可以快速、轻松地扩展，并且可以配合CSS的使用进行个性化定制。根据自己的设置，可以通过多种方式将Bootstrap Icons添加到项目：
推荐使用：Bootstrap Icons - 超过2000个官方开源SVG图标库
gitblog_00001的博客
05-11 510
推荐使用：Bootstrap Icons - 超过2000个官方开源SVG图标库 iconsOfficial open source SVG icon library for Bootstrap.项目地址:https://gitcode.com/gh_mirrors/ic/icons Bootstrap Icons是一个官方的开源SVG图标库，由Bootstrap团队精心打造，提供了超过2000...
bootstrap图片如何做到自适应？
zxcv12345hj的博客
02-12 8282
bootstrap响应式图片的正确的设置是在img上面加上两个类就可以了 src="..." class="img-responsive center-block" > 如果是在内容页里面的话，直接用js给每个img加上属性就可以了。   $(window).load(function(){  $(".panel-body img").addClass
说说如何使用 Bootstrap 显示图片
热门推荐
读万卷书，行万里路
04-27 1万+
Bootstrap 提供了三个可对图片应用简单样式的 class： Class 说明 .img-rounded 添加 border-radius:6px 来获得图片圆角。 .img-circle 添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail 添加一些内边距（padding）和一个灰色的边框。 ...
Bootstrap使屏幕缩小时图片铺满全屏。
wocao2dai的博客
04-16 2305
我们经常遇到，当屏幕缩小时，即使图片宽度设为100%，但是图片的高度也会变小。对我们来说非常困扰，我们需要图片在屏幕缩小时，也保持铺满屏幕的状态。方法如下： img{ width: 100vw; height: 100vh; } VW :视口宽度，由于本来就是跟随屏幕变化的，所以更具有灵活性，不用获取窗口来动态设置窗口宽度 Vh:视口高度，视口宽度同理，都是less，scss中的单位。 ...
bootstrap搜索框_开源软件丨Bootstrap 官方开源 SVG 图标库 Bootstrap Icons
weixin_39614011的博客
11-20 151
喜欢就关注我们吧！Bootstrap开源了首套 SVG 图标库 Bootstrap Icons，其团队表示这是有史以来第一次拥有自己的图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建现在可以免费用于任何项目，无论此项目是否使用了 Bootstrap。软件基本信息序号维度详情1软件类型开源图标2授权协议MIT3开发厂商Twitter4开发语言JavaScri...
在SVG中使用Bootstrap或FontAwesome图标字体
justforuse的博客
05-20 3789
参考链接： http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg原理上都是使用了content:"xxx"属性，那么如何查询图标对应的编码呢？可以在这个网站查询： http://glyphicons.bootstrapcheatsheets.com/。 包括各个图标的CS
Bootstrap媒体对象详解与实战应用
系列：十天精通CSS3 全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！ ``` 当浏览器渲染这段代码时，图片会向左或右浮动，同时保证内容区域（媒体主体）与图片对齐，形成常见的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值