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

Firefox window.close()的使用注意事项

Apr 11 Javascript

如何将网页表格内容导入excel

Feb 18 Javascript

jquery实现页面关键词高亮显示的方法

Mar 12 Javascript

被遗忘的javascript的slice() 方法

Apr 20 Javascript

使用jQuery给input标签设置默认值

Jun 20 Javascript

微信小程序解决swiper不显示图片的方法

Jan 04 Javascript

详解前后端分离之VueJS前端

May 24 Javascript

React应用中使用Bootstrap的方法

Aug 15 Javascript

bootstrap自定义样式之bootstrap实现侧边导航栏功能

Sep 10 Javascript

Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

Sep 01 Javascript

深入理解 TypeScript Reflect Metadata

Dec 12 Javascript

基于Element的组件改造的树形选择器(树形下拉框)

Feb 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 curl 登录163邮箱并抓取邮箱好友列表的代码（经测试）

2011/04/07 PHP

PHP下利用shell后台运行PHP脚本，并获取该脚本的Process ID的代码

2011/09/19 PHP

你应该知道PHP浮点数知识

2015/05/13 PHP

php获取'/'传参的值简单方法

2017/07/13 PHP

使用PHP json_decode可能遇到的坑与解决方法

2017/08/03 PHP

kindeditor 加入七牛云上传的实例讲解

2017/11/12 PHP

JQuery模板插件 jquery.tmpl 动态ajax扩展

2011/11/10 Javascript

iframe的onreadystatechange事件在firefox下的使用

2014/04/16 Javascript

nodejs下打包模块archiver详解

2014/12/03 NodeJs

JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

2015/11/24 Javascript

JS阻止事件冒泡行为和闭包的方法

2016/06/16 Javascript

jQuery中ScrollTo用法示例

2016/09/04 Javascript

js实现倒计时关键代码

2017/05/05 Javascript

基于Vuex无法观察到值变化的解决方法

2018/03/01 Javascript

用vue写一个仿简书的轮播图的示例代码

2018/03/13 Javascript

vue二级菜单导航点击选中事件的方法

2018/09/12 Javascript

JS大坑之19位数的Number型精度丢失问题详解

2019/04/22 Javascript

socket在egg中的使用实例代码详解

2019/05/30 Javascript

JavaScript Tab菜单实现过程解析

2020/05/13 Javascript

js轮播图之旋转木马效果

2020/10/13 Javascript

小程序组件传值和引入sass的方法(使用vant Weapp组件库)

2020/11/24 Javascript

python线程池threadpool使用篇

2018/04/27 Python

pandas 读取各种格式文件的方法

2018/06/22 Python

六行python代码的爱心曲线详解

2019/05/17 Python

Python列表嵌套常见坑点及解决方案

2020/09/30 Python

美国知名的在线旅游服务网站：Priceline

2016/07/23 全球购物

Raleigh兰令自行车美国官网：英国凤头牌自行车

2018/01/08 全球购物

美国正宗奢华复古手袋、珠宝及配饰网站：What Goes Around Comes Around

2018/07/21 全球购物

C#公司笔试题

2014/03/28 面试题

大学本科毕业生的自我鉴定范文

2013/11/19 职场文书

申请任职学生会干部自荐书范文

2014/02/13 职场文书

《北大荒的秋天》教学反思

2014/04/14 职场文书

爬山的活动方案

2014/08/16 职场文书

承兑汇票转让证明怎么写？

2014/11/30 职场文书

Python实现滑雪小游戏

2021/09/25 Python

业余无线电通联Q语

2022/02/18 无线电