Bootstrap系列之实现圆形图片效果

约定不等于承诺〃 2021-09-11 01:16 546阅读 0赞

安装Bootstrap环境，下载框架文档和core代码

您可以从 [http://getbootstrap.com/][http_getbootstrap.com] 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

![Bootstrap 下载][Bootstrap]

您会看到两个按钮：

*  *Download Bootstrap*：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
 *  *Download Source*：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持[Recess][]，这是 Twitter 的基于 [less.js][] 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

然后，引入js和css文件

<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>

添加属性：

<img src="/wp-content/uploads/2014/06/download.png" 
       class="img-circle">

然后就可以很快实现圆形图片，要是CSS实现的话，就没这么简单了，Bootstrap框架是推特推出的一款响

[http_getbootstrap.com]: http://getbootstrap.com/
[Bootstrap]: /images/20210813/6826c135d142480285514820f4d12724.png
[Recess]: http://twitter.github.io/recess/
[less.js]: http://lesscss.org/

发表评论取消回复

表情：

评论列表（有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android实现圆形图片

一.概述圆形图片现在越来越多应用于Android应用中, 但是用的最多的地方当属于, 头像的显示. 比如QQ, 新浪微博,微信中很多地方都是用了圆形头像,所以有必要深究一下

逃离我推掉我的手/ 2023年10月10日 08:00/ 0 赞/ 50 阅读

相关 PyQt自定义控件之实现圆形图片

实现圆形图片我们有两种方式：第一种：使用 qss样式表的 border-radius 来实现控件的圆形效果，但这种方式会出现边界锯齿模糊的问题第二种：重写控件 pain

系统管理员/ 2023年07月13日 15:01/ 0 赞/ 205 阅读

相关自定义Drawable实现圆角图片和圆形图片

[转载请注明原博客地址：][Link 1]http://write.blog.csdn.net/postedit/51226071 [例子源码下载地址：][Link

浅浅的花香味﹌/ 2022年08月21日 07:49/ 0 赞/ 220 阅读

相关 Android实现圆形圆角图片

本文主要使用两种方法实现图形圆角图片 1. 自定View加上使用Xfermode实现 2. Shader实现自定View加上使用Xfermode实现

痛定思痛。/ 2022年07月24日 12:11/ 0 赞/ 296 阅读

相关实现圆形图片

![SouthEast][] 实现原理： 1. 得到原图的宽高，计算出圆心，取图片的短边为基准半径。 2. 创建空白Bitmap，大小为基准半径的正方形。 3. 位移

逃离我推掉我的手/ 2022年07月16日 15:07/ 0 赞/ 225 阅读

相关圆形头像、图片显示效果

H5页面代码 <div> <img class="heads" id="tx" src=""> </div> css样式 .heads\{ margin-top:

心已赠人/ 2022年04月23日 02:54/ 0 赞/ 297 阅读

相关 Bootstrap系列---图片

Bootstrap 图片注：本系列转载于菜鸟教程，仅用以自己学习总结和使用，只会显示自己学习使用的内容，详细内容可以查看菜鸟教程网址：[https://www.ru

╰+哭是因爲堅強的太久メ/ 2022年01月25日 18:35/ 0 赞/ 186 阅读

相关 Bootstrap系列之treeview实现菜单树

本博客，介绍通过Bootstrap的treeview插件实现菜单树的功能。 treeview链接：http://www.htmleaf.com/Demo/2015021413

红太狼/ 2021年09月17日 11:14/ 0 赞/ 414 阅读

相关 Bootstrap系列之实现圆形图片效果

安装Bootstrap环境，下载框架文档和core代码您可以从 [http://getbootstrap.com/][http_getbootstrap.com] 上

约定不等于承诺〃/ 2021年09月11日 01:16/ 0 赞/ 547 阅读

相关 Sencha Touch系列之实现图片切换效果

1. 先去Sencha Touch的官网下载需要的库文件，文件目录如图所示： ![Center][]

╰半橙微兮°/ 2021年09月10日 16:52/ 0 赞/ 331 阅读