Bootstrap3基础 img-rounded 给图片加圆角的边框

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


               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-rounded:把图片的四个角变成圆角,喜欢!

            -->

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

</body>
</html>

效果



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

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

时间: 2024-11-08 22:57:02

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

iOS Dev (50)用代码实现图片加圆角

用代码实现图片加圆角: iconView.layer.masksToBounds = YES; iconView.layer.cornerRadius = 3; iOS Dev (50)用代码实现图片加圆角

Bootstrap3基础 img-responsive 响应式图片

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

html基础 img标记 设置图片的宽度和边框 利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

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

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

使用imageMagick 制作圆角矩形和图片加水印

制作圆角矩形好图片水印都是图片合成的操作 composite -gravity southeast mask175.png  src.jpg  dest.jpg -gravity southeast 指叠加位置为右下角 如果要求在正中间,参数为center 如果要求在垂直据顶部.水平居中(正北方向),参数为north imagemagick官网:http://www.imagemagick.org/script/composite.php 使用imageMagick 制作圆角矩形和图片加水印

swift UIImage加载远程图片和圆角矩形

UIImage这个对象是swift中的图像类,可以使用UIImageView加载显示到View上. 以下是UIImage的构造函数: init(named name: String!) -> UIImage // load from main bundle init(named name: String!, inBundle bundle: NSBundle!, compatibleWithTraitCollection traitCollection: UITraitCollection!)

自定义View基础之——图片加载进度条

学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

图片加载框架之Glide和Picasso

Glide介绍 Glide是一个加载图片的库,作者是bumptech,它是在泰国举行的google 开发者论坛上google为我们介绍的,这个库被广泛的运用在google的开源项目中. Glide是一个非常成熟的图片加载库,他可以从多个源加载图片,如:网路,本地,Uri等,更重要的是他内部封装了非常好的缓存机制并且在处理图片的时候能保持一个低的内存消耗. Picasso介绍(毕加索) picasso是Square公司开源的一个Android图形缓存库,地址http://square.github

Android图片加载库:最全面的Picasso讲解

前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Picasso 目录 1. 简介 介绍:Picasso,可译为"毕加索",是Android中一个图片加载开源库 大概是因为其使用使用方法简单.优雅所以这样取名 主要作用:实现图片加载 2. 功能特点 2.1 功能列表 从上面可以看出,Picasso不仅实现了图片异步加载的功能,还解决了Androi