bootstrap排版6: 图片 — 响应式工具类

发表于:2017-11-06 19:41 阅读:

图片:
为图片添加 .img-responsive 类可以让图片支持响应式布局,其实质是为图片设置了 max-width: 100%; 和 height: auto; ,从而让图片在父元素中缩放(在IE8-10中,设置了 .img-responsive 的 SVG 图像显示出的尺寸不匀称,为解决此问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像设置这一属性,因为这会导致其他图像格式出现错乱):
<img src="…" class="img-responsive">
 
图片形状:
圆角:<img src="..." alt="..." class="img-rounded">
圆形:<img src="..." alt="..." class="img-circle">
带圆角白边:<img src="..." alt="..." class="img-thumbnail">
 
 
辅助类:
段落文字色:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
 
段落背景色:
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
 
 
关闭按钮:
使用一个象征关闭的图标可以让模态框和警告框消失:
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 
 
三角符号:
使用三角符号可以指示某个元素具有下拉菜单功能:
<span class="caret"></span>
 
 
快速浮动: 向左或向右浮动一个元素:
<img src="…" class="pull-left">
<img src="…" class="pull-right">
(*此浮动类不能应用于导航栏,导航栏的浮动可使用 .navbar-left 和 .navbar-right)
 
 
居中内容块:
将一个元素设置为 display: block 并居中:
<div class="center-block">...</div>
 
 
使用 .clearfix 类可清除容器内浮动元素对容器高度造成的影响(即:由于浮动元素脱离文档流而不占据任何空间,会导致外层容器不能"包住"其中的浮动元素,添加此类可解决此问题):
<div class="clearfix" 为此div添加边框可看到具体效果>
<div class="pull-left">内容</div>
<div class="pull-left">内容</div>
</div>
 
 
显示与隐藏内容:
.show 和 .hidden 类可强制元素显示或隐藏(.invisible 类也可隐藏元素,但它仅控制内容的可见性,不影响文档流):
<div class="show">...</div>
<div class="hidden">...</div>
 
 
在屏幕阅读器中导航内容:
同时使用 .sr-only 和 .sr-only-focusable 类可让元素在普通屏幕设备上消失,但在屏幕阅读器中该元素获得焦点时是可见的:
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 
 
使用图片替代文字(当需要让背景图片代替文字内容时):
<h1 class="text-hide">Custom heading</h1>
 
 
响应式工具类:
通过结合使用下面的工具类,可控制元素在不同屏幕尺寸设备上的显示与隐藏,从而避免为网站创建完全不同的版本:
 
超小屏幕可见(其它屏幕尺寸不可见):
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
 
小屏幕可见(其它屏幕尺寸不可见):
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
 
中等屏幕可见(其它屏幕尺寸不可见):
.visible-md-block
.visible-md-inline
.visible-md-inline-block
 
大屏幕可见(其它屏幕尺寸不可见):
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
 
反之:
.hidden-xs (超小屏幕隐藏,其它屏幕尺寸可见)
.hidden-sm (小屏幕隐藏,其它屏幕尺寸可见)
.hidden-md (中等屏幕隐藏,其它屏幕尺寸可见)
.hidden-lg (大屏幕隐藏,其它屏幕尺寸可见)
 
 
打印类:
使用下面的类可针对打印机隐藏或显示内容:
1.打印机可见,浏览器不可见:
.visible-print-block
.visible-print-inline
.visible-print-inline-block
 
2.打印机不可见,浏览器可见:
.hidden-print


灵石网络专注于营销型网站设计、SEO搜索引擎优化、PHP开发、企业网络营销服务。


扫描二维码加我微信!