Bootstrap基本样式学习笔记之图片(6)


Posted in Javascript onDecember 07, 2016

直接看Bootstrap图片基本样式例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>图片</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>照片样式</h1>
 </div>
 <div class="col-lg-3">
 <h3>原始照片</h3>
 <img src="../../img/girl.jpg">
 </div>
 <div class="col-lg-3">
 <h3>圆形效果</h3>
 <img src="../../img/girl.jpg" class="img-circle">
 </div>
 <div class="col-lg-3">
 <h3>圆角效果</h3>
 <img src="../../img/girl.jpg" class="img-rounded">
 </div>
 <div class="col-lg-3">
 <h3>边框效果</h3>
 <img src="../../img/girl.jpg" class="img-thumbnail">
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本样式学习笔记之图片(6)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
JS 控件事件小结
Oct 31 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
javascript头像上传代码实例
Sep 28 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 #Javascript
详解JavaScript的内置对象
Dec 07 #Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 #Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 #Javascript
jQuery中get方法用法分析
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 #Javascript
jQuery删除当前节点元素
Dec 07 #Javascript
You might like
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
js中的string.format函数代码
2020/08/11 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python用700行代码实现http客户端
2021/01/14 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
聚网科技C++面试笔试题
2015/09/01 面试题
民生工程实施方案
2014/03/22 职场文书
考核工作实施方案
2014/03/30 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
民主评议党员工作总结
2014/10/20 职场文书
初中家长评语和期望
2014/12/26 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python