28-bootstrap框架2 导航条、菜单、对话框[弹框]、路径导航

bootstrap导航条

1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式【灰色的导航条】
3、navbar-inverse 声明反白的导航条样式【黑色的导航条】
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式

11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
15、navbar-left 菜单靠左
16、navbar-right 菜单靠右

导航条的结构是：先写导航条，再写container[因为导航条一般是顶格的],用导航条包住container：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body> 
    <!-- 1、先写导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <!-- 2、再写container  -->
        <div class="container">

            <!-- 3、头部,定义logo -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">LOGO</a>
            </div>

            <!-- 3、定义菜单 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">解决方案</a></li>
            </ul>
            
            <!-- 4、定义菜单里面的表单 -->
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon glyphicon-search
                                "></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>


        </div>
    </div>
</body>
</html>

上面的导航条在窗口缩放到最小时，就变成了好几行，我们想要在窗口变小时，将内容隐藏到头部一个菜单下，改进上面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body> 
    <!-- 1、先写导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <!-- 2、再写container  -->
        <div class="container">

            <!-- 3、头部,定义logo -->
            <div class="navbar-header">
                <!-- 5、导航条在窗口缩放到最小时，就变成了好几行，我们想要在窗口变小时，将内容隐藏到头部一个菜单下： -->
                <button class="navbar-toggle">
                 <!-- 6、窗口变小时，导航条右侧出现三条小横杠 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>     
                </button>

                <a href="#" class="navbar-brand">LOGO</a>
            </div>

            <!-- 3、定义菜单 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">解决方案</a></li>
            </ul>
            
            <!-- 4、定义菜单里面的表单 -->
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon glyphicon-search
                                "></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>


        </div>
    </div>
</body>
</html>

上面的代码实现在窗口缩小时，导航条右侧出现三条小横杠，接下来实现切换效果，就是窗口缩小时，只显示logo和小横杠，不显示菜单,但是现在点击小横杠并不显示菜单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body> 
    <!-- 1、先写导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <!-- 2、再写container  -->
        <div class="container">

            <!-- 3、头部,定义logo -->
            <div class="navbar-header">
                <!-- 5、导航条在窗口缩放到最小时，就变成了好几行，我们想要在窗口变小时，将内容隐藏到头部一个菜单下： -->
                <button class="navbar-toggle">
                 <!-- 6、窗口变小时，导航条右侧出现三条小横杠 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>     
                </button>

                <a href="#" class="navbar-brand">LOGO</a>
            </div>

            <!-- 7、在外层加一个div标签将ul和form包起来： -->
            <div class="collapse navbar-collapse">

                <!-- 3、定义菜单 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">解决方案</a></li>
                </ul>
                
                <!-- 4、定义菜单里面的表单 -->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default">
                                    <span class="glyphicon glyphicon-search
                                    "></span>
                                </button>
                            </span>
                        </div>
                    </div>
                </form>                
            </div>

        </div>
    </div>
</body>
</html>

接下来写js，实现点击小横杠显示菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body> 
    <!-- 1、先写导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <!-- 2、再写container  -->
        <div class="container">

            <!-- 3、头部,定义logo -->
            <div class="navbar-header">
                <!-- 5、导航条在窗口缩放到最小时，就变成了好几行，我们想要在窗口变小时，将内容隐藏到头部一个菜单下： -->
                <!-- 8、button标签加上data-toggle="collapse" data-target="#mymenu"，注意要加一个# -->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                 <!-- 6、窗口变小时，导航条右侧出现三条小横杠 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>     
                </button>

                <a href="#" class="navbar-brand">LOGO</a>
            </div>

            <!-- 7、在外层加一个div标签将ul和form包起来，这样就实现了窗口变小时隐藏菜单，只显示logl和小横杠：
            这个容器给一个id，一会给它写js，实现点击显示菜单 -->
            <div class="collapse navbar-collapse" id="mymenu">

                <!-- 3、定义菜单 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">解决方案</a></li>
                </ul>
                
                <!-- 4、定义菜单里面的表单 -->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default">
                                    <span class="glyphicon glyphicon-search
                                    "></span>
                                </button>
                            </span>
                        </div>
                    </div>
                </form>                
            </div>

        </div>
    </div>
</body>
</html>

bootstrap 模态框【弹框】

1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer

一个弹框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 1、先准备一个按钮
    <div class="container">
        <div class="row">
            <button class="btn btn-primary">弹出弹框</button>
        </div>
    </div>

    3、将按钮和弹框关联 -->
    <div class="container">
        <div class="row">
            <button class="btn btn-primary" data-toggle='modal' data-target='#modal01'>弹出弹框</button>
        </div>
    </div>

    <!-- 2、准备一个弹框（3层结构） -->
    <!-- .modal>.modal-dialog>.modal-content>.modal-header+.modal-body+.modal-footer -->
    <!-- 加上fade出现渐隐的效果 -->
    <div class="modal fade" id="modal01">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>弹框文字内容 弹框文字内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <!-- data-dismiss:点击取消，隐藏弹框。data开头的都是做js效果的 -->
                    <button class="btn btn-default" data-dismiss='modal'>取消</button>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

三个不同尺寸的弹框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $("#btn01").click(function(){
                // 现在这样点击背景弹框会隐藏，所以加一个backdrop参数，这样点击背景就不会隐藏弹框了
                //$("#modal04").modal('show');               
                $("#modal04").modal({show:true,backdrop:'false'});
            })

            $("#shutoff").click(function(){
                $("#modal04").modal('hide');
            })
        })
    </script>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <button class="btn btn-primary" data-toggle='modal' data-target='#modal01'>大弹框</button>
            <button class="btn btn-primary" data-toggle='modal' data-target='#modal02'>中弹框</button>
            <button class="btn btn-primary" data-toggle='modal' data-target='#modal03'>小弹框</button>

    </div>

    
    <!-- 第一个弹框 -->
    <!-- 尺寸加在modal-content中，中等的默认，不用加 -->
    <div class="modal fade" id="modal01">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>弹框文字内容 弹框文字内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss='modal'>取消</button>
                </div>
            </div>
        </div>
    </div>

    
    <!-- 第二个弹框 -->
    <!-- 尺寸加在modal-content中，中等的默认，不用加 -->
    <div class="modal fade" id="modal02">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>弹框文字内容 弹框文字内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss='modal'>取消</button>
                </div>
            </div>
        </div>
    </div>



    
    <!-- 第三个弹框 -->
    <!-- 尺寸加在modal-content中，中等的默认，不用加 -->
    <div class="modal fade" id="modal03">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>弹框文字内容 弹框文字内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss='modal'>取消</button>
                </div>
            </div>
        </div>
    </div>


    
</body>
</html>

js控制的弹框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $("#btn01").click(function(){
                // 现在这样点击背景弹框会隐藏，所以加一个backdrop参数，这样点击背景就不会隐藏弹框了
                //$("#modal04").modal('show');               
                $("#modal04").modal({show:true,backdrop:'static'});
            })

            $("#shutoff").click(function(){
                $("#modal04").modal('hide');
            })
        })
    </script>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <button id="btn01" class="btn btn-primary">js控制的弹框</button>
        </div>
    </div>

    
    <!-- 第四个弹框，用js控制 -->
    <div class="modal fade" id="modal04">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>弹框文字内容 弹框文字内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" id="shutoff">取消</button>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

路径导航：

<div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">home</a></li>
                <li><a href="#">library</a></li>
                <li class="active">data</li>
            </ol>
        </div>
    </div>

下拉菜单：

1、dropdown-toggle

2、dropdown-menu

<div class="row">
        <div class="dropdown">
            <div class="btn btn-primary dropdown-toggle" data-toggle=dropdown>
                下拉菜单按钮
                <span class="caret"></span>
            </div>

            <ul class="dropdown-menu">
                <li><a href="#"></a>菜单1</li>
                <li><a href="#"></a>菜单2</li>
                <li><a href="#"></a>菜单3</li>
            </ul>

        </div>
    </div>

巨幕：

可以用来做banner：

    <div class="jumbotron">
        <div class="container">
            <p>ahah</p>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>

bootstrap图片：

img-responsive 声明响应式图片，图片会随着窗口大小变化而变化

用法：给图片加上这个样式即可。

posted @ 2019-04-12 01:41 greenfan 阅读(305) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

28-bootstrap框架2 导航条、菜单、对话框[弹框]、 路径导航

公告

28-bootstrap框架2 导航条、菜单、对话框[弹框]、路径导航