AngularJS 与 Bootstrap 的结合实例

最新推荐文章于 2024-06-18 14:26:24 发布

雾里看花叹朦胧

最新推荐文章于 2024-06-18 14:26:24 发布

阅读量2.4k

点赞数 1

分类专栏： angularjs 文章标签： bootstrap angularjs html 实例 javascript

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/78010505

版权

这里只列出一部分实例，其实功能需要自行添加：

首先，搭建整个项目的页面结构：

创建 HTML 页面：demo_BGMP.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台管理界面</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            min-width: 250px;
        }
        #left_menu {
            height: 90%;
        }
        #left_menu .navbar-collapse {
            padding-left: 0;
        }
        #left_menu .collapse {
            margin-left: 20px;
        }
        #right_content {
            padding: 0;
        }
        #right_content .row {
            padding: 0;
            margin-left: -13px;
            margin-right: -13px;
        }
        @media (min-width: 768px) {
            #left_menu {
                width: 250px;
                position: absolute;
                top: 50px;
            }
            #right_content {
                height: 877px;
                margin: 53px 0 0 250px;
            }
            #right_content .row {
                padding: 0;
                margin: 0;
            }
            #right_content .breadcrumb {
                margin-left: 2px;
            }
        }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you views the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/angular/angular.min.js"></script>
    <script src="../js/angular/route.js"></script>
    <script src="../js/angular/routeParams.js"></script>
    <script src="../js/angular/shallowCopy.js"></script>
    <script src="../js/angular/ngView.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $(function () {
    
            $("#home_label").click(function (e) {
    
                e.preventDefault();
                $("li ul", "#menu_col").collapse('hide');
            });
        });
        angular.module('myApp', ["ngRoute"]).controller('myCtrl', function($scope) {
    
            $scope.message = {
                num : 44
            };

            $scope.searchFun = function () {
    
                console.log($scope.searchInput);
            };
            $scope.funList = [
                {
                    id: "system_menu",
                    name: "系统功能",
                    iconClass: [
                        "glyphicon glyphicon-cog",
                        "glyphicon glyphicon-chevron-right"
                    ],
                    subFunList: [
                        {
                            id: "sys_log",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {
                                    id: "log_list",
                                    name: "日志列表"
                                }
                            ]
                        },
                        {
                            id: "user_manager",
                            name: "用户管理",
                            iconClass: [
                                "glyphicon glyphicon-user"
                            ],
                            subFunList: [
                                {
                                    id: "user_list",
                                    name: "用户列表"
                                }
                            ]
                        },
                        {
                            id: "star_manager",
                            name: "会员管理",
                            iconClass: [
                                "glyphicon glyphicon-star-empty"
                            ],
                            subFunList: [
                                {
                                    id: "star_list",
                                    name: "会员列表"
                                }
                            ]
                        },
                        {
                            id: "role_manager",
                            name: "角色设定",
                            iconClass: [
                                "glyphicon glyphicon-check"
                            ],
                            subFunList: [
                                {
                                    id: "role_list",
                                    name: "角色列表"
                                }
                            ]
                        },
                        {
                            id: "auth_manager",
                            name: "权限设定",
                            iconClass: [
                                "glyphicon glyphicon-lock"
                            ],
                            subFunList: [
                                {
                                    id: "auth_list",
                                    name: "权限列表"
                                }
                            ]
                        },
                        {
                            id: "page_manager",
                            name: "界面设置",
                            iconClass: [
                                "glyphicon glyphicon-list-alt"
                            ],
                            subFunList: [
                                {
                                    id: "page_list",
                                    name: "界面列表"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "product_menu",
                    name: "产品功能",
                    iconClass: [
                        "glyphicon glyphicon-gift"
                    ],
                    subFunList: [
                        {
                            id: "sys_log_1",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {

最低0.47元/天解锁文章

雾里看花叹朦胧

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 与 Bootstrap 的结合实例

这里只列出一部分实例，其实功能需要自行添加：首先，搭建整个项目的页面结构：创建 HTML 页面：demo_BGMP.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
复制链接

扫一扫

专栏目录