BootStrap-CSS样式_排版

图片img类：

img-rounded样式：为图片添加圆角(IE8不支持)

img-circle样式：将图片变为椭圆形(IE8不支持)

img-thumbnail样式：将图片变为略缩图

img-responsive样式：让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果)

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body><!-- 图片img类：img-rounded样式：为图片添加圆角(IE8不支持) img-circle样式： 将图片变为椭圆形(IE8不支持) img-thumbnail样式：将图片变为略缩图img-responsive样式：让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果) --><!--1. 基本案例-三种类型的图片样式--><div class="container" style="padding:50px;"><form action="" class="form-inline"><div class="form-group col-lg-4" ><img src="../img/gougou.jpg" class="img-rounded img-responsive" alt="狗狗"> </div><div class="form-group col-lg-4"><img src="../img/gougou.jpg" class="img-circle img-responsive" alt="狗狗"></div><div class="form-group col-lg-4"><img src="../img/gougou.jpg" class="img-thumbnail img-responsive" alt="狗狗"></div></form></div><!-- 2.响应式图片--><div class="container" style="padding:40px;"><h2>图片</h2><p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p> <img src="../img/one.jpg" class="img-responsive" alt="旅游"></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="../js/jquery-1.11.1.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="../js/bootstrap.min.js"></script>
</body></html>

大屏幕显示效果：

小屏幕显示效果：

BootStrap-CSS样式_排版_图片相关推荐

laravel项目中css样式表的背景图片不显示
刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd {background: url(../images/sky/body ...
html背景图片css怎么添加,css样式怎么插入背景图片？
css样式怎么插入背景图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,给html元素添加背景图,主要通过background-image ...
bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记
1. 介绍 1.1 介绍 Bootstrap是一个免费的web前端框架,它将HTML.CSS.Javascript结合到一起,制定了一系列的前端开发规则,使设计网页就像搭积木一样简单. 今天我们就跟着 ...
BootStrap-CSS样式_排版_缩略语
略缩语格式:<abbr title="" class="initialism"></abbr> title:提示所设置略缩语 initi ...
BootStrap-CSS样式_排版_页面主体（段落中字体和页边距设置）
page-header:设置段落和页边距 lead:突出显示设置的段落(相当于字体的放大加粗效果) <!DOCTYPE html> <html lang="zh-cn&qu ...
html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
bootstrap 按钮样式单选效果_【自学C#】I 书 101 单选按钮
一.简介当需要用户在多个选项中选择一项时,可以使用单选按钮. 单选按钮处于被选中状态时,其左边圆圈中心有一黑点. 单选按钮通常以选项组的形式存在,在由若干单选按钮组成的选项组中,每次只能选中其中一个 ...
CSS样式中解决背景图片不能完美填充页面(页面高度很高)
先上个图这里我的图片是1920x1080像素的但页面高度有2000像素左右,想要图片可以完美填充页面背景只需写入以下代码 body {margin: 0;padding: 0;backgroun ...
CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
body { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; background-colo ...

BootStrap-CSS样式_排版_图片

BootStrap-CSS样式_排版_图片相关推荐

最新文章

热门文章