bootstrap的对话框和提示信息

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

    <div class="container">
        <h1 class="page-header">对话框h1>
        
        <a href="#login" data-toggle="modal" class="btn btn-primary">点击登录，打开对话框a>

        
        <div class="modal  hide fade" id="login">
            
            <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">Tooltipa>
        p>
        <p>
            <a href="#" title="这是标题" data-content="这是提示的主要内容" rel="popover">Popovera>
        p>
    div>


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