编程 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 指导方针

Apr 05 Javascript

js通过地址栏给action传值(中文乱码全是问号)

May 02 Javascript

js时间比较示例分享(日期比较)

Mar 05 Javascript

常用的几段javascript代码分享

Mar 25 Javascript

JavaScript学习心得之概述

Jan 20 Javascript

基于Echarts 3.19 制作常用的图形(非静态)

May 19 Javascript

基于JS代码实现导航条弹出式悬浮菜单

Jun 17 Javascript

解决ajax不能访问本地文件问题（利用js跨域原理）

Jan 24 Javascript

微信小程序日历弹窗选择器代码实例

May 09 Javascript

JavaScript Array对象基本方法详解

Sep 03 Javascript

2019年度web前端面试题总结(主要为Vue面试题)

Jan 12 Javascript

原生JS实现拖拽效果

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

Mysql的常用命令

2006/10/09 PHP

PHP通过header实现文本文件下载的代码

2010/08/08 PHP

php编程实现获取excel文档内容的代码实例

2011/06/28 PHP

PHP提取字符串中的图片地址[正则表达式]

2011/11/12 PHP

完善CodeIgniter在IDE中代码提示功能的方法

2014/07/19 PHP

php使用glob函数快速查询指定目录文件的方法

2014/11/15 PHP

php+ajax实时输入自动搜索匹配的方法

2014/12/26 PHP

PHP Web表单生成器案例分析

2020/06/02 PHP

分享别人写的一个小型js框架

2007/08/13 Javascript

基于jquery的监控数据是否发生改变

2011/04/11 Javascript

textarea不能通过maxlength属性来限制字数的解决方法

2014/09/01 Javascript

JavaScript及jquey实现多个数组的合并操作

2014/09/06 Javascript

JavaScript Function函数类型介绍

2015/04/08 Javascript

js判断日期时间有效性的方法

2015/10/24 Javascript

干货分享：让你分分钟学会javascript闭包

2015/12/25 Javascript

jQuery实现的简单百分比进度条效果示例

2016/08/01 Javascript

原生JS获取元素的位置与尺寸实现方法

2017/10/18 Javascript

bootstrap select下拉搜索插件使用方法详解

2017/11/23 Javascript

Vue实现微信支付功能遇到的坑

2019/06/05 Javascript

vue实现数字滚动效果

2020/06/29 Javascript

vue内置组件keep-alive事件动态缓存实例

2020/10/30 Javascript

使用js获取身份证年龄的示例代码

2020/12/11 Javascript

Python Sleep休眠函数使用简单实例

2015/02/02 Python

Python中functools模块函数解析

2017/03/12 Python

浅谈Python对内存的使用（深浅拷贝）

2018/01/17 Python

Python通过yagmail实现发送邮件代码解析

2020/10/27 Python

python FTP编程基础入门

2021/02/27 Python

CSS3实现头像旋转效果

2017/03/13 HTML / CSS

新加坡最受追捧的体验平台：Hapz

2018/01/01 全球购物

优秀毕业生求职推荐信范文

2013/11/21 职场文书

文科教师毕业的自我评价

2014/01/16 职场文书

法人委托书范本

2014/09/15 职场文书

学习党的群众路线教育实践活动剖析材料

2014/10/13 职场文书

2015年元旦晚会活动总结（学生会）

2014/11/28 职场文书

小学六一儿童节活动开幕词

2016/03/04 职场文书

祝福语集锦：给百岁老人祝寿贺词

2019/11/19 职场文书