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

如何获取网站icon有哪些可行的方法

Jun 05 Javascript

javascript转换日期字符串为Date日期对象的方法

Feb 13 Javascript

js获取当前日期时间及其它操作汇总

Apr 17 Javascript

AngularJS学习笔记之ng-options指令

Jun 16 Javascript

创建你的第一个AngularJS应用的方法

Jun 16 Javascript

基于JavaScript实现前端文件的断点续传

Oct 17 Javascript

BootStrap表单控件之复选框checkbox和单选择按钮radio

May 23 Javascript

JavaScript箭头(arrow)函数详解

Jun 04 Javascript

JQuery实现table中tr上移下移的示例(超简单)

Jan 08 jQuery

vue.js编译时给生成的文件增加版本号

Sep 17 Javascript

layer实现弹出层自动调节位置

Sep 05 Javascript

JS实现灯泡开关特效

Mar 30 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下载远程图片并保存到本地方法总结

2016/01/22 PHP

PHP面向对象程序设计实例分析

2016/01/26 PHP

[原创]php简单防盗链验证实现方法

2016/07/09 PHP

使用CSS3实现字体颜色渐变的实现

2021/03/09 HTML / CSS

url 特殊字符传递参数解决方法

2010/01/01 Javascript

获取body标签的两种方法

2011/10/13 Javascript

两种方法基于jQuery实现IE浏览器兼容placeholder效果

2014/10/14 Javascript

三种Node.js写文件的方式

2016/03/08 Javascript

深入理解JQuery循环绑定事件

2016/06/02 Javascript

jQuery 3.0十大新特性

2016/07/06 Javascript

jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例

2017/01/30 Javascript

Angular2中select用法之设置默认值与事件详解

2017/05/07 Javascript

Bootstrap响应式导航由768px变成992px的实现代码

2017/06/15 Javascript

Vee-Validate的使用方法详解

2017/09/22 Javascript

nodejs判断文件、文件夹是否存在及删除的方法

2017/11/10 NodeJs

JavaScript实现创建自定义对象的常用方式总结

2018/07/09 Javascript

VUE项目axios请求头更改Content-Type操作

2020/07/24 Javascript

javascript实现移动端轮播图

2020/12/09 Javascript

[05:08]DOTA2-DPC中国联赛3月6日Recap集锦

2021/03/11 DOTA

Python中asyncore异步模块的用法及实现httpclient的实例

2016/06/28 Python

Python Sqlite3以字典形式返回查询结果的实现方法

2016/10/03 Python

Python字符串处理实例详解

2017/05/18 Python

Python批量更改文件名的实现方法

2017/10/29 Python

Python中dict和set的用法讲解

2019/03/28 Python

python中aioysql(异步操作MySQL)的方法

2019/04/11 Python

pandas如何处理缺失值

2019/07/31 Python

pandas 对日期类型数据的处理方法详解

2019/08/08 Python

贝佳斯官方网站：Borghese

2020/05/08 全球购物

Linux面试题LINUX系统类

2015/11/25 面试题

实习教师自我鉴定

2013/12/09 职场文书

心理健康活动总结

2014/04/30 职场文书

嘉宾邀请函

2015/01/31 职场文书

公开致歉信

2019/06/24 职场文书

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

2021/05/18 Vue.js

golang生成vcf通讯录格式文件详情

2022/03/25 Golang

浅谈Python中对象是如何被调用的

2022/04/06 Python