编程 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 结合C#后台的数组对文章的关键字自动添加链接的代码

Jul 15 Javascript

js实现目录定位正文示例

Nov 14 Javascript

利用JS判断用户是否上网(连接网络)

Dec 23 Javascript

javascript运行机制之this详细介绍

Feb 07 Javascript

javascript的动态加载、缓存、更新以及复用（一）

Jun 09 Javascript

jQuery中 delegate使用的问题

Jul 03 Javascript

详解AngularJS过滤器的使用

Mar 11 Javascript

jQuery验证插件validate使用详解

May 11 Javascript

Jquery为DIV添加click事件的简单实例

Jun 02 Javascript

jQuery实现的可编辑表格完整实例

Jun 20 Javascript

使用JavaScript保存文本文件到本地的两种方法

Jan 22 Javascript

原生js实现无缝轮播图效果

Jan 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

Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法

2010/12/29 PHP

Zend Studio (eclipse)使用速度优化方法

2011/03/23 PHP

php IP转换整形(ip2long)的详解

2013/06/06 PHP

jQuery入门知识简介

2010/03/04 Javascript

ExtJS PropertyGrid中使用Combobox选择值问题

2010/06/13 Javascript

jquerymobile局部渲染的各种刷新方法小结

2014/03/05 Javascript

JS中使用Array函数shift和pop创建可忽略参数的例子

2014/05/28 Javascript

Javascript动态创建div的方法

2015/02/09 Javascript

基于jquery实现的自动补全功能

2015/03/12 Javascript

JavaScript控制图片加载完成后调用回调函数的方法

2015/03/20 Javascript

js实现简单锁屏功能实例

2015/05/27 Javascript

浅析jQuery移动开发中内联按钮和分组按钮的编写

2015/12/04 Javascript

深入浅析AngularJS中的module(模块)

2016/01/04 Javascript

javascript多物体运动实现方法分析

2016/01/08 Javascript

Bootstrap框架结合jQuery仿百度换肤功能实例解析

2016/09/17 Javascript

解决vue-router进行build无法正常显示路由页面的问题

2018/03/06 Javascript

vue移动端路由切换实例分析

2018/05/14 Javascript

基于JavaScript实现瀑布流布局

2018/08/15 Javascript

小程序实现日历左右滑动效果

2019/10/21 Javascript

python交互式图形编程实例（二）

2017/11/17 Python

python实现读Excel写入.txt的方法

2018/04/29 Python

对PyTorch torch.stack的实例讲解

2018/07/30 Python

python定时按日期备份MySQL数据并压缩

2019/04/19 Python

Spring Cloud Feign高级应用实例详解

2019/12/10 Python

解决Tensorboard可视化错误:不显示数据 No scalar data was found

2020/02/15 Python

python str字符串转uuid实例

2020/03/03 Python

浅谈PyTorch中in-place operation的含义

2020/06/27 Python

Selenium Webdriver元素定位的八种常用方式(小结)

2021/01/13 Python

解决python的空格和tab混淆而报错的问题

2021/02/26 Python

CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义

2016/04/26 HTML / CSS

澳大利亚在线购买葡萄酒：The Wine Collective

2020/02/20 全球购物

后勤人员自我评价怎么写

2013/09/19 职场文书

文案策划专业自荐信

2014/07/07 职场文书

公司试用期员工自我评价

2014/09/17 职场文书

Python打包exe时各种异常处理方案总结

2021/05/18 Python

Python绘制散点图之可视化神器pyecharts

2022/07/07 Python