脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap图片

Bootstrap基本样式学习笔记之图片(6)

 更新时间：2016年12月07日 14:49:43   作者：kikay  
这篇文章主要介绍了Bootstrap学习笔记之图片基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

直接看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学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 前端页面适配之postcss-px-to-viewport实现步骤

    前端页面适配之postcss-px-to-viewport实现步骤

    postcss-px-to-viewport是一个PostCSS插件,它可以将px单位转换为视口单位(vw、vh 或 vmin),这篇文章主要给大家介绍了关于前端页面适配之postcss-px-to-viewport的实现步骤,需要的朋友可以参考下
    2024-03-03
  • 微信小程序自定义键盘 内部虚拟支付

    微信小程序自定义键盘 内部虚拟支付

    这篇文章主要为大家详细介绍了微信小程序自定义键盘，内部虚拟支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • javascript如何实现暂停功能

    javascript如何实现暂停功能

    这篇文章主要介绍了javascript如何实现暂停功能,，Javascript本身没有暂停功能,同时vbscript也不能使用doEvents，故编写此函数实现此功能， 需要的朋友可以参考下
    2015-11-11
  • 微信小程序中实现微信支付完整步骤

    微信小程序中实现微信支付完整步骤

    这篇文章主要给大家介绍了关于微信小程序中实现微信支付的相关资料,微信小程序支付是一种常见的支付方式,实现起来相对较为复杂,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • javascript 实现自由落体的方块效果

    javascript 实现自由落体的方块效果

    这其实是一个很简单的实现，create一个新的div元素，然后append到文档的body上，经过一定时间的延迟，做自由落体运动，着地后fade消失。 不多说，直接上代码。
    2010-01-01
  • javascript的propertyIsEnumerable()方法使用介绍

    javascript的propertyIsEnumerable()方法使用介绍

    propertyIsEnumerable()是用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回false，下面为大家介绍下其具体的使用
    2014-04-04
  • js实现简单音乐播放器

    js实现简单音乐播放器

    这篇文章主要介绍了js实现简单音乐播放器，可拖动进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 分享一则javascript 调试技巧

    分享一则javascript 调试技巧

    这篇文章主要分享了一则javascript 调试技巧,需要的朋友可以参考下
    2015-01-01
  • JavaScript Eval 函数使用

    JavaScript Eval 函数使用

    JavaScript Eval 函数使用,需要的朋友可以参考下。
    2010-03-03
  • javascript实现label标签跳出循环操作

    javascript实现label标签跳出循环操作

    这篇文章主要为大家详细介绍了javascript实现label标签跳出循环操作，感兴趣的朋友可以参考一下
    2016-03-03

最新评论