编程 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中的Window窗口对象

Jan 16 Javascript

js随机颜色代码的多种实现方式

Apr 23 Javascript

js动态设置div的值下例子

Oct 29 Javascript

浅谈EasyUI中编辑treegrid的方法

Mar 01 Javascript

JS基于clipBoard.js插件实现剪切、复制、粘贴

May 03 Javascript

妙用Bootstrap的 popover插件实现校验表单提示功能

Aug 29 Javascript

jQuery继承extend用法详解

Oct 10 Javascript

微信小程序swiper组件用法实例分析【附源码下载】

Dec 07 Javascript

iView-admin 动态路由问题的解决方法

Oct 03 Javascript

JavaScript数组去重的几种方法

Apr 07 Javascript

React 全自动数据表格组件——BodeGrid的实现思路

Jun 12 Javascript

微信小程序实现下拉加载更多商品

Dec 29 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脚本的10个技巧(7)

2006/10/09 PHP

PHP小偷程序的设计与实现方法详解

2016/10/15 PHP

PHP面向对象程序设计OOP继承用法入门示例

2016/12/27 PHP

PHP远程连接oracle数据库操作实现方法图文详解

2019/04/11 PHP

javascript 面向对象的JavaScript类

2010/05/04 Javascript

jQuery.extend 函数详解

2012/02/03 Javascript

13 个JavaScript 性能提升技巧分享

2012/07/26 Javascript

重写javascript中window.confirm的行为

2012/10/21 Javascript

jquery处理页面弹出层查询数据等待操作实例

2015/03/25 Javascript

JSON简介以及用法汇总

2016/02/21 Javascript

javascript特殊文本输入框网页特效

2016/09/13 Javascript

微信小程序-消息提示框实例

2016/11/24 Javascript

详解webpack+es6+angular1.x项目构建

2017/05/02 Javascript

angular.js中解决跨域问题的三种方式

2017/07/12 Javascript

Vue Cli与BootStrap结合实现表格分页功能

2017/08/18 Javascript

BootStrap自定义popover,点击区域隐藏功能的实现

2018/01/23 Javascript

vue中使用iview自定义验证关键词输入框问题及解决方法

2018/03/26 Javascript

详解vue2.0+axios+mock+axios-mock+adapter实现登陆

2018/07/19 Javascript

vue-cli3环境变量与分环境打包的方法示例

2019/02/18 Javascript

vue请求服务器数据后绑定不上的解决方法

2019/10/30 Javascript

微信小程序实现倒计时功能

2020/11/19 Javascript

详解Python字符串对象的实现

2015/12/24 Python

快速入手Python字符编码

2016/08/03 Python

python tensorflow基于cnn实现手写数字识别

2018/01/01 Python

使用Python批量修改文件名的代码实例

2019/01/24 Python

推荐8款常用的Python GUI图形界面开发框架

2020/02/23 Python

浅谈Django QuerySet对象(模型.objects)的常用方法

2020/03/28 Python

C++和python实现阿姆斯特朗数字查找实例代码

2020/12/07 Python

英格兰橄榄球商店：England Rugby Store

2016/12/17 全球购物

Blancsom美国/加拿大：服装和生活用品供应商

2018/07/27 全球购物

求高于平均分的学生学号及成绩

2016/09/01 面试题

Linux面试题LINUX系统类

2015/11/25 面试题

Ajax和javascript的区别

2013/07/20 面试题

北京申奥口号

2014/06/19 职场文书

效能风暴心得体会

2014/09/04 职场文书

忠犬八公的故事观后感

2015/06/05 职场文书