编程 Javascript

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>

效果如下：

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

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

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

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

firefox浏览器下javascript 拖动层效果与原理分析代码

Dec 04 Javascript

JQUERY CHECKBOX全选,取消全选,反选方法三

Aug 30 Javascript

JS 字符串连接[性能比较]

May 10 Javascript

Javascript 继承机制实例

Aug 12 Javascript

js隐藏与显示回到顶部按钮及window.onscroll事件应用

Jan 25 Javascript

jquery代码实现简单的随机图片瀑布流效果

Apr 20 Javascript

javascript手风琴下拉菜单实现代码

Nov 12 Javascript

js获取本机操作系统类型的两种方法

Dec 19 Javascript

非常漂亮的相册集使用jquery制作相册集

Apr 28 Javascript

深入浅出ES6之let和const命令

Aug 25 Javascript

微信小程序循环及嵌套循环的使用总结

Sep 26 Javascript

JavaScript进制转换实现方法解析

Jan 18 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实现水仙花数的4个示例分享

2014/04/08 PHP

JavaScript toFixed() 方法

2010/04/15 Javascript

js与jquery获取父元素,删除子元素的两种不同方法

2014/01/09 Javascript

jQuery定义背景动态切换效果的方法

2015/03/23 Javascript

js代码验证手机号码和电话号码是否合法

2015/07/30 Javascript

Flow之一个新的Javascript静态类型检查器

2015/12/21 Javascript

JavaScript简单实现鼠标移动切换图片的方法

2016/02/23 Javascript

js实现精确到秒的倒计时效果

2016/05/29 Javascript

js通过classname来获取元素的方法

2016/11/24 Javascript

详解vue-Resource（与后端数据交互）

2017/01/16 Javascript

jquery表单提交带错误信息提示效果

2017/03/09 Javascript

angular.js指令中的controller、compile与link函数的不同之处

2017/05/10 Javascript

Javascript中将变量转换为字符串的三种方法

2017/09/19 Javascript

vue-cli开发环境实现跨域请求的方法

2018/04/07 Javascript

[02:46]完美世界DOTA2联赛PWL DAY4集锦

2020/11/03 DOTA

python使用心得之获得github代码库列表

2014/06/25 Python

Python实现3行代码解简单的一元一次方程

2014/08/18 Python

Django与JS交互的示例代码

2017/08/23 Python

pygame实现简易飞机大战

2018/09/11 Python

使用Python实现租车计费系统的两种方法

2018/09/29 Python

对Python的多进程锁的使用方法详解

2019/02/18 Python

浅谈Python中eval的强大与危害

2019/03/13 Python

Python selenium页面加载慢超时的解决方案

2020/03/18 Python

Django QuerySet查询集原理及代码实例

2020/06/13 Python

CSS3教程(10):CSS3 HSL声明设置颜色

2009/04/02 HTML / CSS

基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例

2017/07/31 HTML / CSS

HTML实现代码雨源码及效果示例

2020/02/25 HTML / CSS

物流管理专业职业生涯规划书

2014/01/06 职场文书

八年级英语教学反思

2014/01/09 职场文书

优秀交警事迹材料

2014/01/26 职场文书

工程质量月活动方案

2014/02/19 职场文书

股权投资意向书

2014/04/01 职场文书

营销经理工作检讨书

2014/11/03 职场文书

2015法院个人工作总结范文

2015/05/25 职场文书

小人国观后感

2015/06/11 职场文书

Android开发EditText禁止输入监听及InputFilter字符过滤

2022/06/10 Java/Android