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

基于jquery的表格排序

Sep 11 Javascript

javascript中的关于类型转换的性能优化

Dec 14 Javascript

用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

Jan 06 Javascript

javascript分页代码实例分享(js分页)

Dec 13 Javascript

JS判断文本框内容改变事件的简单实例

Mar 07 Javascript

使用jquery写个更改表格行顺序的小功能

Apr 29 Javascript

Parcel 打包示例(React HelloWorld)

Jan 16 Javascript

详解vue填坑之解决部分浏览器不支持pushState方法

Jul 12 Javascript

Node.js实现用户评论社区功能（体验前后端开发的乐趣）

May 09 Javascript

javascript 原型与原型链的理解及实例分析

Nov 23 Javascript

微信小程序调用后台service教程详解

Nov 06 Javascript

addEventListener()和removeEventListener()追加事件和删除追加事件

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

PHP操作MongoDB时的整数问题及对策说明

2011/05/02 PHP

php的$_FILES的临时储存文件与回收机制实测过程

2013/07/12 PHP

php获取linux命令结果的实例

2017/03/13 PHP

谈谈从phpinfo中能获取哪些值得注意的信息

2017/03/28 PHP

checkbox 多选框联动实现代码

2008/10/22 Javascript

Javascript 复制数组实现代码

2009/11/26 Javascript

AJAX 网页保留浏览器前进后退等功能

2011/02/12 Javascript

jquery中load方法的用法及注意事项说明

2014/02/22 Javascript

ActiveX控件与Javascript之间的交互示例

2014/06/04 Javascript

javascript实用方法总结

2015/02/06 Javascript

基于React.js实现原生js拖拽效果引发的思考

2016/03/30 Javascript

checkbox 选中一个另一个checkbox也会选中的实现代码

2016/07/09 Javascript

JavaScript event对象整理及详细介绍

2016/10/10 Javascript

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

2016/12/07 Javascript

浅谈js中function的参数默认值

2017/02/20 Javascript

react中使用swiper的具体方法

2018/05/15 Javascript

Node批量爬取头条视频并保存方法

2018/09/20 Javascript

vue两组件间值传递 $router.push实现方法

2019/05/15 Javascript

Python基于Tkinter实现的记事本实例

2015/06/17 Python

Django学习笔记之Class-Based-View

2017/02/15 Python

python利用lxml读写xml格式的文件

2017/08/10 Python

Python实现句子翻译功能

2017/11/14 Python

Python3 安装PyQt5及exe打包图文教程

2019/01/08 Python

CSS3动画animation实现云彩向左滚动

2014/05/09 HTML / CSS

HTML5 中新的全局属性(整理)

2013/07/31 HTML / CSS

详解三种方式实现平滑滚动页面到顶部的功能

2019/04/23 HTML / CSS

中国排名第一的外贸销售网站：LightInTheBox.com（兰亭集势）

2016/10/28 全球购物

感恩节红领巾广播稿

2014/02/11 职场文书

生产部厂长助理职位说明书

2014/03/03 职场文书

驾驶员安全责任书

2014/07/22 职场文书

经典演讲稿开场白

2014/08/25 职场文书

公司的门卫岗位职责

2014/09/09 职场文书

2015年教师师德师风承诺书

2015/04/28 职场文书

教师节座谈会主持词

2015/07/03 职场文书

工人先锋号事迹材料（2016精选版）

2016/03/01 职场文书

MySQL图形化管理工具Navicat安装步骤

2021/12/04 MySQL