编程 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 Jcrop插件实现图片选取功能

Nov 23 Javascript

javascript实现促销倒计时+fixed固定在底部

Sep 18 Javascript

JS随机漂浮广告代码具体实例

Nov 19 Javascript

详解如何较好的使用js

Dec 16 Javascript

使用ionic切换页面卡顿的解决方法

Dec 16 Javascript

jQuery ajax动态生成table功能示例

Jun 14 jQuery

Angular移动端页面input无法输入的解决方法

Nov 14 Javascript

详解ES6中的 Set Map 数据结构学习总结

Nov 06 Javascript

jQuery实现的别踩白块小游戏完整示例

Jan 07 jQuery

layer关闭弹出窗口触发表单提交问题的处理方法

Sep 25 Javascript

js实现随机div颜色位置类似满天星效果

Oct 24 Javascript

element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

Jul 27 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设计模式中的工厂模式

2008/06/12 PHP

php URL验证正则表达式

2011/07/19 PHP

php将文本文件转换csv输出的方法

2014/12/31 PHP

Yii2实现同时搜索多个字段的方法

2016/08/10 PHP

PHP+原生态ajax实现的省市联动功能详解

2017/08/15 PHP

ExtJS 下拉多选框lovcombo

2010/05/19 Javascript

javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同

2010/06/25 Javascript

EASYUI TREEGRID异步加载数据实现方法

2012/08/22 Javascript

Js获取下拉框选定项的值和文本的实现代码

2014/02/26 Javascript

js实现完全自定义可带多级目录的网页鼠标右键菜单方法

2015/02/28 Javascript

jQuery实现购物车计算价格功能的方法

2015/03/25 Javascript

在JavaScript中正确引用bind方法的应用

2015/05/11 Javascript

JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】

2016/08/19 Javascript

微信小程序中使用Promise进行异步流程处理的实例详解

2017/08/17 Javascript

原生JS实现 MUI导航栏透明渐变效果

2017/11/07 Javascript

Js面试算法详解

2018/04/08 Javascript

nuxt框架中路由鉴权之Koa和Session的用法

2018/05/09 Javascript

微信小程序基础教程之worker线程的使用方法

2019/07/15 Javascript

跟老齐学Python之关于类的初步认识

2014/10/11 Python

详解Python pygame安装过程笔记

2017/06/05 Python

python实现发送邮件功能

2017/07/22 Python

Python实现的多叉树寻找最短路径算法示例

2018/07/30 Python

python实现狄克斯特拉算法

2019/01/17 Python

Python SSL证书验证问题解决方案

2020/01/13 Python

Python实现http接口自动化测试的示例代码

2020/10/09 Python

详解HTML5 LocalStorage 本地存储

2016/12/23 HTML / CSS

香港时尚女装购物网站：ZAFUL

2017/07/19 全球购物

应届医学毕业生求职信分享

2013/12/02 职场文书

大学生2014全国两会学习心得体会

2014/03/10 职场文书

优秀党员先进事迹材料

2014/12/18 职场文书

违纪检讨书范文

2015/01/27 职场文书

优秀志愿者感言

2015/08/01 职场文书

2016庆祝教师节新闻稿

2015/11/25 职场文书

2016消防宣传标语口号

2015/12/26 职场文书

创业计划书之花店

2019/09/20 职场文书

python周期任务调度工具Schedule使用详解

2021/11/23 Python