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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
解析Vue.js中的组件
Feb 02 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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中strtotime函数使用方法详解
2011/11/27 PHP
php图片缩放实现方法
2014/02/20 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python matplotlib实时画图案例
2020/04/23 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
大学应届生求职简历的自我评价
2013/10/08 职场文书
公司应聘求职信
2014/06/21 职场文书
世界读书日的活动方案
2014/08/20 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
鼋头渚导游词
2015/02/05 职场文书