草庐IT

Bootstrap 警告（Alerts）

runoob 2023-04-05 原文

Bootstrap 警告（Alerts）

本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。

您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。下面的实例演示了这点：

实例

<div class="alert alert-success">成功！很好地完成了提交。</div> <div class="alert alert-info">信息！请注意这个信息。</div> <div class="alert alert-warning">警告！请不要提交。</div> <div class="alert alert-danger">错误！请进行一些更改。</div>

尝试一下 »

结果如下所示：

可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

  • 通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
  • 同时向上面的 <div> class 添加可选的 .alert-dismissable。
  • 添加一个关闭按钮。

下面的实例演示了这点：

实例

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> 成功！很好地完成了提交。 </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> 信息！请注意这个信息。 </div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> 警告！请不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> 错误！请进行一些更改。 </div>

请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素。
尝试一下 »

结果如下所示：

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

  • 通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
  • 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

实例

<div class="alert alert-success"> <a href="#" class="alert-link">成功！很好地完成了提交。</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">信息！请注意这个信息。</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">警告！请不要提交。</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">错误！请进行一些更改。</a> </div>

尝试一下 »

结果如下所示：

BootstrapAlertsspanclasshlBootstrap3

有关Bootstrap 警告（Alerts）的更多相关文章

  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. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  3. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  4. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  5. ruby-on-rails - 我更新了 ruby​​ gems，现在到处都收到解析树错误和弃用警告! - 2

    简而言之错误:NOTE:Gem::SourceIndex#add_specisdeprecated,useSpecification.add_spec.Itwillberemovedonorafter2011-11-01.Gem::SourceIndex#add_speccalledfrom/opt/local/lib/ruby/site_ruby/1.8/rubygems/source_index.rb:91./opt/local/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/rails/gem_dependency.rb:275:in`==':und

  6. 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

  7. ruby - 警告 : PATH set to RVM ruby but GEM_HOME and/or GEM_PATH not set, 请参阅 : https://github. com/wayneeseguin/rvm/issues/3212 - 2

    我每次打开终端时都会收到这个错误:警告:PATH设置为RVMruby​​但未设置GEM_HOME和/或GEM_PATH，请参阅:https://github.com/wayneeseguin/rvm/issues/3212这是在我最近安装zsh(oh-my-zsh)后开始发生的我不知道如何设置GEM_HOME和/或GEM_PATH的路径。 最佳答案 我也面临同样的问题，更改.zshrc中的以下行，exportPATH="/usr/local/heroku/bin:.........."到exportPATH="$PATH:/usr/

  8. ruby - 有没有办法让 2.4.0 中的 Ruby 弃用警告静音？ - 2

    从Ruby2.4.0开始，对于使用某些已弃用的功能，会出现弃用警告。例如，Bignum、Fixnum、TRUE和FALSE都会触发弃用警告。当我修复我的代码时，有相当多的代码我希望它保持沉默，尤其是在Rails中。我该怎么做？ 最佳答案 moduleKerneldefsuppress_warningsoriginal_verbosity=$VERBOSE$VERBOSE=nilresult=yield$VERBOSE=original_verbosityreturnresultendend>>X=:foo=>:foo>>X=:bar

  9. ruby - 在 Ruby 中，如何在加载 YAML 文档时警告散列中的重复键？ - 2

    在下面的Ruby示例中，是否有一种模式可以让YAMLNOT静默忽略重复键“one”？irb(main):001:0>require'yaml'=>trueirb(main):002:0>str='{one:1,one:2}'=>"{one:1,one:2}"irb(main):003:0>YAML.load(str)=>{"one"=>2}谢谢! 最佳答案 使用Psych，您可以遍历AST树以查找重复键。我在我的测试套件中使用以下辅助方法来验证我的i18n翻译中没有重复键:defduplicate_keys(file_or_cont

  10. ruby-on-rails - 如何在 Rails 中启用 Ruby 警告？ - 2

    我在test.rb中做了这个:defsome_methodp"Firstdefinition"enddefsome_methodp"Seconddefinition"endsome_method当我调用rubytest.rb时，它打印出Seconddefinition(预期)当我调用ruby-wtest.rb时，它会打印Seconddefinition(预期)并打印警告test。rb:5:警告:方法重新定义；丢弃旧的some_method有没有办法在Rails中启用这些警告？(并将警告打印到控制台/日志文件)为什么我要启用警告:例如，如果我无意中重新定义Controller中的一个方法

随机推荐