编程 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 Function对象扩展之延时执行函数

Jul 06 Javascript

JS 控件事件小结

Oct 31 Javascript

图片动画横条广告带上下滚动可自定义图片、链接等等

Oct 20 Javascript

浅谈Javascript 执行顺序

Dec 18 Javascript

javascript自动给文本url地址增加链接的方法分享

Jan 20 Javascript

Jquery之Bind方法参数传递与接收的三种方法

Jun 24 Javascript

javascript使用数组的push方法完成快速排序

Sep 15 Javascript

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

Mar 05 Javascript

JavaScript数组方法大全(推荐)

Jul 05 Javascript

React性能优化系列之减少props改变的实现方法

Jan 17 Javascript

javascript头像上传代码实例

Sep 28 Javascript

JavaScript简易计算器制作

Jan 17 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生成等比缩略图类和自定义函数分享

2014/06/25 PHP

PHP基于socket实现的简单客户端和服务端通讯功能示例

2017/07/10 PHP

PHP+Ajax实现的博客文章添加类别功能示例

2018/03/29 PHP

为JavaScript提供睡眠功能(sleep) 自编译JS引擎

2010/08/16 Javascript

js中的string.format函数代码

2020/08/11 Javascript

判断js对象是否拥有某一个属性的js代码

2013/08/16 Javascript

jQuery实现tab选项卡效果的方法

2015/07/08 Javascript

angular.js+node.js实现下载图片处理详解

2017/03/31 Javascript

一次围绕setTimeout的前端面试经验分享

2017/06/15 Javascript

Node 自动化部署的方法

2017/10/17 Javascript

Vue.js实现数据响应的方法

2018/08/13 Javascript

使vue实现jQuery调用的两种方法

2019/05/12 jQuery

基于vue实现简易打地鼠游戏

2020/08/21 Javascript

在react项目中使用antd的form组件,动态设置input框的值

2020/10/24 Javascript

[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场

2014/05/26 DOTA

[36:19]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs LGD

2018/04/03 DOTA

Python selenium如何设置等待时间

2016/09/15 Python

Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例

2018/07/02 Python

对python模块中多个类的用法详解

2019/01/10 Python

Python3.5 Pandas模块之Series用法实例分析

2019/04/23 Python

Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str

2019/08/07 Python

Python实例方法、类方法、静态方法区别详解

2020/09/05 Python

python用700行代码实现http客户端

2021/01/14 Python

细说CSS3中的选择符

2008/10/17 HTML / CSS

欧舒丹英国官网：购买欧舒丹护手霜等明星产品

2017/01/17 全球购物

Yves Rocher捷克官方网站：植物化妆品的创造者

2019/07/31 全球购物

Java中有几种类型的流？JDK为每种类型的流提供了一些抽象类以供继承，请说出他们分别是哪些类

2012/02/06 面试题

聚网科技C++面试笔试题

2015/09/01 面试题

民生工程实施方案

2014/03/22 职场文书

考核工作实施方案

2014/03/30 职场文书

财务会计大学生自我评价

2014/04/09 职场文书

民主评议党员工作总结

2014/10/20 职场文书

初中家长评语和期望

2014/12/26 职场文书

详解MySQL InnoDB存储引擎的内存管理

2021/04/08 MySQL

Spring Data JPA的Audit功能审计数据库的变更

2021/06/26 Java/Android

Python可视化动图组件ipyvizzu绘制惊艳的可视化动图

2022/04/21 Python