Bootstrap3基础 img-thumbnail 给图片加一个圆角的边框

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Firefox / Chrome
     bootstrap:3.3.7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <!-- 页面的宽度与设备屏幕的宽度一致 -->
	<meta name="viewport" content="width=device-width">
	<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
	<meta name="viewport" content="initial-scale=1">
	<!-- 禁止用户缩放 -->
	<meta name="viewport" content="user-scalable=no">

    <!-- 引入外部bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="background-color:gray;">

    <div class="container-fluid" style="background-color:white;">
        <!--
             img-responsive:响应式的图片
             img-thumbnail:给图片加一个圆角的边框
            -->

        <img src="images/fh.jpg" class="img-responsive img-thumbnail" />
    </div>

</body>
</html>

效果



Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8280801.html

时间: 2024-10-07 13:37:33

Bootstrap3基础 img-thumbnail 给图片加一个圆角的边框的相关文章

Bootstrap3基础 img-responsive 响应式图片

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

zrender--切割元素(让矩形图片有一个圆角弧度)--因为不想写粒子 所以用图片代替

临近放假,为了凸显假期更有价值,所以 周六加班中................................. 原文地址:https://www.cnblogs.com/snowbxb/p/12179435.html

tableView_cell中图片加载_KVO

在真实的开发中,网络接口返回的JSON或XML数据中,通常不直接包含图片,而是给出图片的URL,我们 需要根据图片URL获取图片数据.为了便于后续使用,可将图片下载封装到一个类(ImageDownloader) 里面,ImageDownloader允许外界指定URL,提供开始下载和取消下载功能,并提供delegate或block 将图片传递给外界 UITableView显示图片,中的Model类注意事项 1.除了包含必要的数据外,还要包含一个ImageDownloader对象. 2.包含一个im

IOS 开发笔记-基础 UI(7)汤姆猫(UIImageView 的序列帧动画、图片加载,方法重构、Bundle 图片素材)

使用UIImageView.UIButton实现一个综合小案例---汤姆猫 回忆:UIImageView 来自UIView,UIView 来自UIResponder,UIButton 来自UIControl,UIControl 来自UIView 单独看实现,代码实现其实比较简单,但是创意很难得,美工要求很高! 是一个了不起的游戏! 功能分析 (1)点击对应的按钮后,让汤姆猫展现对应的动画 步骤分析 (1)搭建UI界面,同时也是准备素材 (2)监听按钮点击 (3)根据点击的按钮执行对应的动画 说明

GridView实现一个图片加多个文本框

GridView的使用是很简单的,API Demo中有例子,但是要实现复杂的GridView,就需要自定义了. 今天我们要实现如下的效果: 先说它的布局,它是由gridview和grid_item两部分组成. main.xml   <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/androi

一起写一个Android图片加载框架

本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做出比较,来帮助我们量化这个框架的性能.通过开发这个框架,我们可以进一步深入了解Android中的Bitmap操作.LruCache.LruDiskCache,让我们以后与Bitmap打交道能够更加得心应手.若对Bitmap的大小计算及inSampleSize计算还不太熟悉,请参考这里:高效加载Bit

iOS圆形图片裁剪,原型图片外面加一个圆环

/** *  在圆形外面加一个圆环 */ - (void)yuanHuan{ //0.加载图片 UIImage *image = [UIImage imageNamed:@"AppIcon1024"]; //图片的宽度 CGFloat imageWH = image.size.width; //设置圆环的宽度 CGFloat border = 1; //大圆形的宽度高度 CGFloat ovalWH = imageWH + 2 * border; //1.开启位图上下文 UIGraph

iOS圆形图片裁剪,以及原型图片外面加一个圆环

废话不多说,直接上代码 #import "ViewController.h" @interface ViewController () @property (nonatomic,strong)UIImageView *imageView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.imageView = [[UIImageView alloc] initWith

javascript图片加载---加载大图的一个解决方案

网页在加载一张大图片时,往往要加载很久: 而且,在加载过程中,无法很好地控制图片的样式,容易造成错位等显示错误: 如果能够在加载大图时,先使用一张较小的loading图片占位,然后后台加载大图片,当大图片加载完成后,自动替换占位图, 这样能提供更好的用户体验: 由于,我在开发一个图片查看器时,遇到这样的需求,所以我写了个angular服务,来解决这个问题,效果还不错: 虽然是angular服务,当是把里面核心代码抽出来也可以单独使用: 来分享下源代码: 一: var imgloader = ne