• 技术文章 >web前端 >Bootstrap教程

    bootstrap 如何创建错误提示

    藏色散人藏色散人2020-11-30 16:29:51原创80

    bootstrap创建错误提示的方法:首先创建一个HTML示例文件;然后引入bootstrap.css和jquery.js以及bootstrap.js;最后创建bootstrap警告错误即可。

    本教程操作环境:windows7系统、bootstrap3版,该方法适用于所有品牌电脑。

    推荐:《bootstrap视频教程

    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>
    <html>
    <meta charset="utf-8">
    <head>
        <title>bootstrap警告错误</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">    
        <script  src="bootstrap/js/jquery.1.9.1.js"></script>
        <script  src="bootstrap/js/bootstrap.js"></script>
        
    </head>    
    <body>
        <div class="container">
            <h2>警告错误</h2>
            <div class="row">
            <div class="span4">
                <div class="alert">
                    <a class="close" data-dismiss="alert">×</a>
                    <strong>
                        Warning
                    </strong>这里是警告提示信息
                </div>
                <div class="alert alert-success">
                    <a class="close" data-dismiss="alert">×</a>
                    <strong>
                        Success
                    </strong>这里是成功提示信息
                </div>
                <div class="alert alert-info">
                    <a class="close" data-dismiss="alert">×</a>
                    <strong>
                        Info
                    </strong>这里是信息提示信息
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

    效果如图:

    0acc4f7e736e0c0b2e8f8846e6d04bb.png

    以上就是bootstrap 如何创建错误提示的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:bootstrap
    上一篇:bootstrap 如何修改css样式 下一篇:如何去掉bootstrap模态框的遮罩层
    第14期线上培训班

    相关文章推荐

    • bootstrap如何消除浮动• bootstrap table如何删除行• jquery easyui和bootstrap的区别是什么• bootstrap tab 没有反应怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网