编程 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 相关文章推荐

自己的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 职场文书