bootstrap的对话框和提示信息

对话框
对话框要添加的插件bootstrap-modal.js

    <div class="container">
        <h1 class="page-header">对话框</h1>
        <!-- form-horizontal  表单的样式布局 -->
        <a href="#login" data-toggle="modal" class="btn btn-primary">点击登录，打开对话框</a>

        <!--对话框的内容-->
        <div class="modal  hide fade" id="login">
            <!-- hide为开始的时候隐藏对话框，fade为对话框的效果 -->
            <div class="modal-header">
                <!-- 对话框的头部-->
                <a href="#" class="close" data-dismiss="modal">*</a>
                <h4>用户登录</h4>
            </div>
            <div class="modal-body">
                <!-- 对话框的内容-->
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">用户名</label>
                        <div class="controls">
                            <input type="text">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">密 码</label>
                        <div class="controls">
                            <input type="text">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <!-- 对话框的尾部-->
                <button type="button" class="btn btn-primary">登录</button>
            </div>
        </div>

提示信息
使用tooltip：要添加bootstrap-tooltip.js插件
使用popover:要添加bootstrap-tooltip.js插件和bootstrap-popover.js两个查件

    <div class="container">
        <h1 class="page-header">工具提示</h1>
        <p>
            <a href="#" title="这是一个提示信息" rel="tooltip">Tooltip</a>
        </p>
        <p>
            <a href="#" title="这是标题" data-content="这是提示的主要内容" rel="popover">Popover</a>
        </p>
    </div>

<!--还需要添加脚本代码-->
<script type="text/javascript">
    $(function() {
        $("a[rel=tooltip]").tooltip();//页面中存在a标签并且里面有rel这个属性并且值为tooltip就使用tooltip这个插件显示信息
        $("a[rel=popover]").popover();
    });
</script>