bootstrap 警告

本章将讲解警告(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)

创建一个可取消的警告步骤台下:

通过创建一个div并向其中添加一个.alert class 和四个上下文class(即alert-success,alert-info,alert-warning,alert-danger)之一,来添加一个基本的警告框。

同时几上面的div class添加可选的alert-dismissable

添加一个关闭按钮。

下面的实例说明了这一点:

<div>
        <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"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
             信息!请注意这个信息.
         </div>
         <div class="alert alert-warning">
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
             警告!请不要提交.
         </div>
         <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
             错误!请进行一些更改.</div>
    </div>

警告中的链接

在警告(Alerts)中创建链接的步骤如下:

通过创建一个div,并向其中添加一个alert class和四个上下文 即alert-success,alert-info,alert-warning,alert-danger 之一,来添加一个基本的警告框。

使用.alert-link实体类来快速提供带匹配颜色的链接。

<div>
        <div class="alert alert-success alert-dismissable">
            <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>
        <a class="alert alert-danger"><a href="#" class="alert-link">错误!请进行一些更改.</a>
    </div>
时间: 2024-10-29 19:08:10

bootstrap 警告的相关文章

Bootstrap警告

警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 警告(Alerts) 步骤: 1.创建一个 <div> 2.并向其加入一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..alert-danger)之中的一个, 来加入一个主要的警告框. <!DOCTYPE html> <html lang="en"> &l

bootstrap 警告(Alerts)

本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..

Bootstrap 警告、进度条、列表组

摘要:该部分包括警告.进度条等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success..alert-info..alert-danger..alert-warning.代码示例: 1 <div class="alert alert-success">成功</div> 2 <div class="alert alert-info">

bootstrap错误警告信息提示

bootstrap提供了成功执行.警告和错误信息的样式. 在使用该功能的时候需要引入以下几个文件: bootstrap.css jquery.js(需放在bootstrap.js之前) bootstrap.js(官方推荐引入的是bootstrap-alert.js) 主要使用的样式: .span4 .alert(默认样式) .alert alert-successs .alert alert-error .alert alert-info 实例代码如下: <!DOCTYPE html> <

简单易上手的Bootstrap

什么是Bootstrap? Bootstrap是一个web框架.Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitH

Bootstrap 插件

Bootstrap 插件   1.Bootstrap 过渡效果(Transition)插件 过渡效果(Transition)插件提供了简单的过渡效果.如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类.

Bootstrap 布局组件

Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

atitit。html&#160;css框架Bootstrap&#160;&#160;Foundation的比较与不同&#160;attilax大总结

atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap 教程2 2.1. Bootstrap 简介2 2.2. Bootstrap CSS2 2.3. Bootstrap 布局组件2 2.4. Bootstrap 插件3 2.5. Bootstrap 其他3 3. Bootstrap 的attilax总结3 4. 参考3 1. Bootstrap  F