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

获取焦点时,利用js定时器设定时间执行动作

Apr 02 Javascript

DOM_window对象属性之--clipboardData对象操作代码

Feb 03 Javascript

jQuery easyui datagrid动态查询数据实例讲解

Feb 26 Javascript

理解javascript中的回调函数(callback)

Sep 02 Javascript

JS实现往下不断流动网页背景的方法

Feb 27 Javascript

基于Vuejs实现购物车功能

Aug 02 Javascript

原生JS实现图片轮播效果

Dec 26 Javascript

Easyui笔记2：实现datagrid多行删除的示例代码

Jan 14 Javascript

基于mpvue的小程序项目搭建的步骤

May 22 Javascript

微信小程序弹窗输入组件的实现解析

Aug 12 Javascript

Node如何后台数据库使用增删改查功能

Nov 21 Javascript

Openlayers绘制聚合标注

Sep 28 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

Symfony数据校验方法实例分析

2015/01/26 PHP

php $_SESSION会员登录实例分享

2021/01/19 PHP

PHP+MySql+jQuery实现的"顶"和"踩"投票功能

2016/05/21 PHP

PHP 文件上传限制问题

2019/09/01 PHP

PHP连接MySQL数据库操作代码实例解析

2020/07/11 PHP

2种jQuery 实现刮刮卡效果

2015/02/01 Javascript

简单谈谈Javascript中类型的判断

2015/10/19 Javascript

深入理解逻辑表达式的用法与或非的用法

2016/06/06 Javascript

JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

2016/08/11 Javascript

jQuery实现的表格展开伸缩效果实例

2016/09/07 Javascript

实例分析nodejs模块xml2js解析xml过程中遇到的坑

2017/03/18 NodeJs

深入理解Webpack 中路径的配置

2017/06/17 Javascript

JS实现的简单表单验证功能完整实例

2017/10/14 Javascript

VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

2018/01/11 Javascript

vue-router3.0版本中 router.push 不能刷新页面的问题

2018/05/10 Javascript

解决vue的 v-for 循环中图片加载路径问题

2018/09/03 Javascript

vue实现多组关键词对应高亮显示功能

2019/07/25 Javascript

一起写一个即插即用的Vue Loading插件实现

2019/10/31 Javascript

es6 super关键字的理解与应用实例分析

2020/02/15 Javascript

js实现点击烟花特效

2020/10/14 Javascript

vue使用require.context实现动态注册路由

2020/12/25 Vue.js

[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼

2014/07/07 DOTA

Python编写百度贴吧的简单爬虫

2015/04/02 Python

详解python3 + Scrapy爬虫学习之创建项目

2019/04/12 Python

python使用HTMLTestRunner导出饼图分析报告的方法

2019/12/30 Python

芬兰汽车配件商店：Autonvaraosat24

2017/01/30 全球购物

德国综合购物网站：OTTO

2018/11/13 全球购物

Tiqets英国：智能手机上的文化和娱乐门票

2019/07/10 全球购物

印度第一网上礼品店：IGP.com

2020/02/06 全球购物

会展中心部门工作职责

2013/11/27 职场文书

高等教育学自荐书范文

2014/02/10 职场文书

资源工程专业毕业生求职信

2014/02/27 职场文书

少先队入队仪式主持词

2015/07/04 职场文书

小学生安全教育主题班会

2015/08/12 职场文书

2019年警察入党转正申请书最新范文

2019/09/03 职场文书

MySQL学习之基础命令实操总结

2022/03/19 MySQL