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

JavaScript使用prototype定义对象类型(转)[

Dec 22 Javascript

使用javascript:将其它类型值转换成布尔类型值的解决方法详解

May 07 Javascript

javascript窗口宽高,鼠标位置,滚动高度(详细解析)

Nov 18 Javascript

JavaScript初学者建议：不要去管浏览器兼容

Feb 04 Javascript

Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

Feb 12 Javascript

点击表单提交时出现jQuery没有权限的解决方法

Jul 23 Javascript

jquery实现的回旋滚动效果完整实例【附demo源码下载】

Sep 20 Javascript

javascript 网页进度条简单实例

Feb 22 Javascript

Chrome调试折腾记之JS断点调试技巧

Sep 11 Javascript

vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

May 08 Javascript

原生js实现3D轮播图

Mar 21 Javascript

WEB前端性能优化的7大手段详解

Feb 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

用文本作数据处理

2006/10/09 PHP

PHP字符串 ==比较运算符的副作用

2009/10/21 PHP

PHP设计模式注册表模式(多个类的注册)

2012/02/05 PHP

php中读写文件与读写数据库的效率比较分享

2013/10/19 PHP

Yii中表单用法实例详解

2016/01/05 PHP

PHP图片加水印实现方法

2016/05/06 PHP

php基于环形链表解决约瑟夫环问题示例

2017/11/07 PHP

ThinkPHP防止重复提交表单的方法实例分析

2018/05/10 PHP

浅谈PHP封装CURL

2019/03/06 PHP

工作需要写的一个js拖拽组件

2011/07/28 Javascript

jQuery操作 input type=checkbox的实现代码

2012/06/14 Javascript

Javascript实现真实字符串剩余字数提示的实例代码

2013/10/22 Javascript

JavaScript数组Array对象增加和删除元素方法总结

2015/01/20 Javascript

jquery 中ajax执行的优先级

2015/06/22 Javascript

vue分页组件table-pagebar使用实例解析

2020/11/15 Javascript

js实现手机拍照上传功能

2017/01/17 Javascript

javascript深拷贝和浅拷贝详解

2017/02/14 Javascript

快速搭建vue2.0+boostrap项目的方法

2018/04/09 Javascript

基于jQuery.i18n实现web前端的国际化

2018/05/04 jQuery

vue+echarts实现动态折线图的方法与注意

2020/09/01 Javascript

浅析PHP与Python进行数据交互

2018/05/15 Python

python实现移位加密和解密

2019/03/22 Python

Python3 Tkinter选择路径功能的实现方法

2019/06/14 Python

Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围

2019/06/25 Python

简单了解Python matplotlib线的属性

2019/06/29 Python

Ubuntu中配置TensorFlow使用环境的方法

2020/04/21 Python

CSS3新属性transition-property transform box-shadow实例学习

2013/06/06 HTML / CSS

html5实现微信打飞机游戏

2014/03/27 HTML / CSS

美国床垫和床上用品公司：Nest Bedding

2017/06/12 全球购物

德国2018年度最佳在线药房：Bodfeld Apotheke

2019/11/04 全球购物

Linux面试题LINUX系统类

2015/11/25 面试题

亮剑精神演讲稿

2014/05/23 职场文书

建筑工地文明标语

2014/10/09 职场文书

离婚协议书的范本

2015/01/27 职场文书

2016年学校“3.12”植树节活动总结

2016/03/16 职场文书

go开发alertmanger实现钉钉报警

2021/07/16 Golang