草庐IT

Bootstrap 缩略图

runoob 2023-04-05 原文

Bootstrap 缩略图

本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：

  • 在图像周围添加带有 class .thumbnail 的 <a> 标签。
  • 这会添加四个像素的内边距（padding）和一个灰色的边框。
  • 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

下面的实例演示了默认的缩略图：

实例

<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> </div>

尝试一下 »

结果如下所示：

添加自定义的内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：

  • 把带有 class .thumbnail 的 <a> 标签改为 <div>。
  • 在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
  • 如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

下面的实例演示了这点：

实例

<div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> </div>

尝试一下 »

结果如下所示：

缩略BootstrapspanclasshlBootstrap3

有关Bootstrap 缩略图的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  3. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON

  4. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  5. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  6. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo

  7. ruby - 使用指南针安装 bootstrap sass - 2

    我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass，但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r

  8. ruby-on-rails - Bootstrap 的 ruby gem 有什么区别？ - 2

    gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好？ 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用，不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可，直到它在2014年被弃用并被下面的bootstrap-sass取代b

  9. ruby - 如何在 Rails 之外使用 less.rb 处理 Bootstrap - 2

    我正在尝试使用less.rb创建一个独立的应用程序(独立于RailsAssets管道)以基于TwitterBootstrap输出CSS文件。下面的结果是一个空文档parser=Less::Parser.new:paths=>[Rails.root+'/public/bootstraps/twitter-bootstrap-857b8fb/less']tree=parser.parse("@import'bootstrap.less'")tree.to_css这会导致返回一个空字符串。我尝试了将@import更改为完整路径等的变体，但没有成功。我想我一定遗漏了一些简单的东西。

  10. ruby-on-rails - 是否有可用的 Ruby on Rails 站点缩略图生成器？ - 2

    如果它已经存在，我希望避免构建它。有谁知道可以生成网站屏幕截图的RubyonRails插件吗？提前感谢任何能帮我找到的人。 最佳答案 据我所知，您需要一个带有桌面的服务器(例如Gnome、X11、KDE)和一个安装了缩略图功能的网络浏览器(例如webkit和CutyCapt)。当然，这对于Linux服务器来说并不常见。我使用了Soufiane建议的服务，使用基于PeterCoopers片段的代码，它运行良好。生成网站缩略图需要大量的服务器资源和某种后台进程和作业队列，因此使用webthumbnailgenerationservice

随机推荐