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 指导方针
Apr 05 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
原生JS实现拖拽效果
Dec 04 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
Mysql的常用命令
2006/10/09 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python中functools模块函数解析
2017/03/12 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
python FTP编程基础入门
2021/02/27 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
法人委托书范本
2014/09/15 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书