Bootstrap3基础 img-rounded 图片的四个角改成圆角
内容 | 参数 |
---|---|
OS | Windows 10 x64 |
browser | Firefox 65.0.2 |
framework | Bootstrap 3.3.7 |
editor | Visual Studio Code 1.32.1 |
typesetting | Markdown |
code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- IE将使用最新的引擎渲染网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 页面的宽度与设备屏幕的宽度一致
初始缩放比例 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<meta name="author" content="www.cnblogs.com/kemingli">
<!-- 引入外部bootstrap的css文件(压缩版),版本是3.3.7 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body style="background-color:gray;">
<!-- start : demo -->
<div class="container-fluid" style="background-color:white;">
<!-- img-responsive:响应式的图片
img-rounded:把图片的四个角变成圆角,喜欢!
-->
<img src="images/fh.jpg" class="img-responsive img-rounded" />
</div>
<!-- end : demo -->
<!-- NO.1 加载框架依赖的jQuery文件(压缩版),版本是1.12.4 -->
<script src="bootstrap/js/jquery.min.js"></script>
<!-- NO.2 加载Bootstrap的所有JS插件,版本是3.3.7 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
result
resource
- [ 文档 ] getbootstrap.com/docs/3.3
- [ 源码 ] github.com/twbs/bootstrap
- [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
- [ 平台 ] www.cnblogs.com
- [ 平台 ] github.com
- [ 扩展 - 平台] www.bootcss.com
- [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer
Bootstrap是前端开源框架,优秀,值得学习。
博文讲述的是V3版本,更为先进的是V4版本。学有余力的话,可作简单地了解。
Firefox是开源的浏览器,优秀,值得关注。
面对开源框架,分析、领悟与应用,能对其进行加减裁化,随心所欲而不逾矩。
博文的质量普通,仅供参考。盲目复制,处处是坑。Think twice before you act(三思而后行)!
Bootstrap3基础 img-rounded 图片的四个角改成圆角的更多相关文章
- Bootstrap3基础 img-thumbnail 给图片加一个圆角的边框
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Bootstrap3基础 btn-xs/sm... 按钮的四种大小
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- iOS关于定制某个控件四个角是否为圆角
UIView *myView=[[UIView alloc]initWithFrame:CGRectMake(50, 70, 200, 200)]; UIBezierPath * bezierPath ...
- 【转载】salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解
salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解 建立好的数据表在数据库中查看有很多方式,本人目前采用以下两种方式查看数据表. 1.采用schem ...
- Python基础知识总结笔记(四)函数
Python基础知识总结笔记(四)函数python中的函数函数中的参数变量作用域偏函数PFA递归函数高阶函数BIFs中的高阶函数匿名函数lambda闭包Closure装饰器Decorator函数式编程 ...
- salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解
建立好的数据表在数据库中查看有很多方式,本人目前采用以下两种方式查看数据表. 1.采用schema Builder查看表结构以及多表之间的关联关系,可以登录后点击setup在左侧搜索框输入schema ...
- HTML&CSS基础-html的图片标签
HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...
- 《手把手教你》系列基础篇(八十四)-java+ selenium自动化测试-框架设计基础-TestNG日志-上篇(详解教程)
1.简介 TestNG还为我们提供了测试的记录功能-日志.例如,在运行测试用例期间,用户希望在控制台中记录一些信息.信息可以是任何细节取决于目的.牢记我们正在使用Selenium进行测试,我们需要有助 ...
- [css 揭秘]:CSS揭秘 技巧(四):边框内圆角
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...
随机推荐
- java中的锁之AbstractQueuedSynchronizer源码分析(一)
一.AbstractQueuedSynchronizer类介绍. 该抽象类有两个内部类,分别是静态不可继承的Node类和公有的ConditionObject类.AbstractQueuedSynchr ...
- web.config 特殊字符转义
字符 转义码 & 符号 & & 单引号 ' ' 双引号 " " 大于 > > 小于 < <
- I/O流的概念和流类库的结构
概念: 程序的输入指的是从输入文件将数据传送给程序,程序的输出指的是从程序将数据传送给输出文件. C++输入输出包含以下三个方面的内容: 1.对系统指定的标准设备的输入和输出.即从键盘输入数据,输出到 ...
- Yii2缓存依赖
- uvalive 3276 The Great Wall Game
题意: 一个n * n的棋盘上放着n个棋子,现在要求把这n个棋子用最少的步数移到同一条直线上,即同一列同一行或者同一对角线(两条).输出最少的步数(只能往四个方向移动,即正东,正西,正南,正北). 思 ...
- Java基础语法(二 )
五.运算符 *算术运算符 *赋值运算符 *关系运算符 *逻辑运算符 *位运算符 *三目运算符 算术运算符 *+,-,*,/都是比较简单的操作 *+的几种作用: 加法 正数 字符串连接符 *除法的时候要 ...
- ajax评论
评论有好几种格式:有评论树.评论楼等的格式 发表评论注意事项: 1. 展示评论 1. 评论楼(Django模板语言渲染) 1. 从后端查询出所有的评论 2. 如果有父评论就展示父评论 2. 评论树 通 ...
- Jersey入门——注解的使用
本文主要解释Jersey中各种注解的使用 package com.coshaho.learn.jersey; import java.net.URI; import javax.ws.rs.Consu ...
- 关于SqlCommand对象的2个方法:ExecuteNonQuery 方法和ExecuteScalar方法
1.SqlCommand.ExecuteNonQuery 方法 对连接执行 Transact-SQL 语句并返回受影响的行数. 语法:public override int ExecuteNonQue ...
- There is no session with id XXX
系统采用 shiro + redis + spring来做的权限控制系统. 登录时报 there is no session with XXX 跟踪断点发现,系统查询session时,查不到red ...