65.9K
CodeProject 正在变化。 阅读更多。
Home

如何使用 Bootstrap 创建管理员响应式模板？

Jeevanandan J
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.78/5 (18投票s)

2017年8月3日

CPOL

9分钟阅读

viewsIcon

36307

downloadIcon

1663

如何自己制作管理员模板而不是购买。

引言

本文的主要目的是自己设计一个管理后台模板。有很多专家可以在 2 到 3 小时内完成这项工作。

但是，有些人却在初始阶段举步维艰。

我的目标是提供一个想法，让大家无需购买或依赖他人即可创建示例模板。

背景

当我们设计应用程序时，一开始，我们会选择一个免费模板开始，或者购买一个。

在开发了一些网站后，我开始思考：这是正确的选择吗？如果我们不需要面对任何问题，那可能是正确的。

但是，与其购买模板，不如自己开发，这样我们就可以在不寻求技术支持的情况下处理任何问题，也无需浪费金钱。如果您是客户，可以要求开发人员创建，前提是他们同意不花费太多时间。最多可能需要 8 小时 :-p。如果我们是提供商，我们可以有一些示例布局向客户展示。

如何设计？

当我们购买一些模板时，我们会从中看到以下几点：

  • 他们是否提供 ASP.NET MVC、PHP、Angular、React 或 Vue.js 等模板？
  • 购买模板后，他们是否提供支持？
  • 外观和感觉是否吸引我们的客户/用户？
  • 他们是否为 chartjs、datatable、highcharts、summernote、input masks 等插件提供支持？（但这太可笑了。因为上述插件是免费插件，可以在 GitHub 上找到。我们不会从 CSS 模板提供商那里获得这些插件的支持。支持必须从它们（chartjs、datatable、highcharts）那里获得，而不是从 CSS 模板提供商那里。那些都是互联网上可用的免费插件。有兴趣的人可以下载并使用。）

购买模板时，有必要关注所有这些吗？ 条件性地不是（除了外观和感觉）。

模板的核心是 **布局**。

什么是布局？

  1. 标题
  2. 如果需要，侧边栏（可以是顶部导航栏）
  3. 如果需要，页脚
  4. Content

如果您为必要的设备准备了以上内容，那么这将是轻而易举的事。内容部分将处理一切。

我们需要担心的事情是

  1. 网站的配色方案。组件的主色和次色。
  2. 网站的边距、内边距、字体大小和字体系列。

您认为这会很难吗？

如果我们熟悉 Sass，那么 Bootstrap 4 提供了关于它们使用了哪些主色的指南。

对于 Bootstrap 3，它们提供了一个界面来定制和下载设计。

我在为我的管理后台模板布局考虑以下事项：

  1. Bootstrap
  2. Metis 菜单用于侧边栏布局。 - 目前，我将此插件用于我的侧边菜单。如果您在互联网上搜索，可以找到纯 CSS 的侧边菜单。
  3. 如果我们不想使用 Metis 菜单，那么我们可以使用 Bootstrap 的折叠或手风琴作为侧边栏。
  4. Site.css - 在这里，我们将应用自定义样式来布局。

好了，您已准备好创建布局。

现在我将指导您使用 **Bootstrap 4** 创建布局。

首先，我将浏览器分成两个部分

  1. 页面标题 - 我使用了固定标题。如果您愿意，可以移除 `fixed-top`。
  2. 页面容器
    1. 将页面容器分成两部分
      1. 侧边菜单 (side-menu)
      2. 页面内容包装器 (page-content-wrapper)

整体布局在 `body` 中

<body>
 <!--Page header-->
  <div id="page-header" class="fixed-top"> </div>

  <!--Page container-->
  <div id="page-container"> 

        <!--Page side menu-->
        <aside id="side-menu"></aside>

         <!--Page main content-->
         <div id="page-content-wrapper" >
             <div class="container-fluid"> </div>
         </div>
  </div>
</body>

我们已准备好布局。现在我们需要设置侧边栏的高度和内容的高度。

这里，我使用了 Bootstrap 的 `container-fluid`。这将占用父 div 的宽度。*这样，Bootstrap 的所有组件都可以毫无问题地适应容器。*

现在，我将从 Bootstrap 复制导航栏到页面标题中。这是默认的导航栏。如果我们想要任何个性化的内容，可以在这里注入。

页面标题

<!-- The whole navigation bar -->
<nav class="navbar navbar-light  bg-faded navbar-toggleable-md">
            <!--The toggle button which will be used for the mobile and the medium devices-->
            <button class="navbar-toggler navbar-toggler-right" type="button" 
             data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" 
             aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <!--Application Brand Icon - To show the application icon-->
            <a class="navbar-brand" href="#">
                <img src="images/bootstrap-solid.svg" width="30" height="30" 
                 class="d-inline-block align-top" alt="">
                Bootstrap
            </a>
            
            <!-- Main menu -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">Institution</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">Alumni</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">Contact</a>
                    </li>
                </ul>
               
            </div>
             <div  class="logout-button">
                    <i class="fa fa-sign-out fa-lg"></i>
                </form>
        </nav>

这里，我从 Bootstrap 复制了导航栏。所以我不必自己单独编写代码。

如果需要，您可以替换自己的代码。

  • `navbar-toggler` 将在其中等设备上显示。
  • `navbar-toggler` 指向 `navbarCollapse`。因此，当识别到中等设备时，`navbarCollapse` 将被隐藏，而 `navbar-toggler` 将用于显示 `navbarCollapse`。
  • `logout-button` 已从 `navbar-collapse` 中移出。这样，它将始终显示给用户以注销。
  • 在 `navbar` 中，使用了 `ml-auto`（左外边距自动）将菜单对齐到右侧。如果您想对齐到左侧，可以使用 `mr-auto`（右外边距自动）。

我不喜欢 Bootstrap 导航栏的默认样式。所以我希望改变导航栏的样式，使其看起来不同。

这里，我使用了以下 CSS 来改变导航栏的样式（*site.css*）。

 #page-header .navbar{
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2)
}

定位不同设备的注销按钮

如果我们查看注销按钮，它在移动设备上的位置可能不正确。

所以，我将首先为移动设备进行设置，然后将注销按钮的设计保持原样，不为其他设备做更改。

在 **移动优先设计** 中，我们不必担心需要设计媒体查询。所以，为移动设备应用样式时不使用媒体查询。

.logout-button{
       position: absolute;
    right: 5rem;
        padding: .25rem .75rem;
    font-size: 1.25rem;
        margin-top: 0!important;
}

因此，上述 CSS 将被应用，并将注销按钮定位在导航栏的右侧。

但对我来说，它应该与切换按钮对齐。所以我根据切换按钮设置了右值。

我需要知道切换按钮何时被隐藏。这样我就可以为该媒体查询应用 `logout button` 的正常设计。我使用了 Chrome 调试器并检测到以下媒体查询并应用了 CSS。

@media (min-width: 992px)
{
	.logout-button{
		position: initial;
		
	}
}

太棒了！我们已经完成了标题部分。

Content

现在我们需要设置内容部分。

对于内容部分，我们需要关注两件事。

  • 侧边菜单
  • 主内容部分
 <div id="page-container">
    <!--Side menu starts here-->
        <aside id="side-menu">
            <nav class="sidebar-nav">
                <ul class="metismenu" id="menu1">
                    <li class="">
                        <a class="has-arrow" href="#" aria-expanded="false">
                            <span class="fa fa-fw fa-github fa-lg"></span>
                            metisMenu
                        </a>
                        <ul aria-expanded="false" class="collapse" style="height: 0px;">
                            <li>
                                <a href="https://github.com/onokumus/metisMenu">
                                    <span class="fa fa-fw fa-code-fork"></span> Fork
                                </a>
                            </li>
                            <li>
                                <a href="https://github.com/onokumus/metisMenu">
                                    <span class="fa fa-fw fa-star"></span> Star
                                </a>
                            </li>
                            <li>
                                <a href="https://github.com/onokumus/metisMenu/issues">
                                    <span class="fa fa-fw fa-exclamation-triangle"></span> Issues
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">item 0.1</a></li>
                            <li><a href="#">item 0.2</a></li>
                            <li><a href="http://onokumus.com">onokumus</a></li>
                            <li><a href="#">item 0.4</a></li>
                        </ul>
                    </li>
                    <li id="removable">
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">item 1.1</a></li>
                            <li><a href="#">item 1.2</a></li>
                            <li>
                                <a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
                                <ul aria-expanded="false" class="collapse">
                                    <li><a href="#">item 1.3.1</a></li>
                                    <li><a href="#">item 1.3.2</a></li>
                                    <li><a href="#">item 1.3.3</a></li>
                                    <li><a href="#">item 1.3.4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">item 1.4</a></li>
                            <li>
                                <a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
                                <ul aria-expanded="false" class="collapse">
                                    <li><a href="#">item 1.5.1</a></li>
                                    <li><a href="#">item 1.5.2</a></li>
                                    <li><a href="#">item 1.5.3</a></li>
                                    <li><a href="#">item 1.5.4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">item 2.1</a></li>
                            <li><a href="#">item 2.2</a></li>
                            <li><a href="#">item 2.3</a></li>
                            <li><a href="#">item 2.4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
    <!--Side menu ends here-->
    
    <!--main content starts here-->
        <div id="page-content-wrapper" >
            <div class="container-fluid">
              <div class="hero-image-wrapper">
                  <div class="hero-image">
                  </div>
                  <div class="hero-text">
                      <h1 class="display-5">Welcome</h1>
                      <p>
                          Bootstrap is the most popular HTML, CSS, 
                          and JS framework in the world for building responsive, 
                          mobile-first projects on the web.
                      </p>
                  </div>
              </div>
           
            </div>
        </div>
        <!--main content ends  here-->
    </div>

如果我们保持应用程序原样，并且没有内容，我们可能无法获得一个好的设计。

我们需要为内容设置做以下工作：

  1. 为侧边栏和页面容器设置位置。*这样它们就会并排显示。*
  2. 根据页面标题为页面容器设置边距。*这样容器将正好在页面标题旁边开始。*
  3. 为页面容器和主页面内容包装器设置最小高度。*这样即使没有内容，它在设计上看起来也会很好。*
  4. 为 HTML 和内容设置颜色。*这样侧边栏和内容看起来就像是并行的。*

内容 - 侧边菜单 - 为侧边栏和页面容器设置位置

对于侧边菜单，我们可以决定它应该有多长。

对于内容包装器

对于中等设备，内容将占据全部宽度，对于桌面设备，内容宽度将基于侧边菜单。

所以这里你可以注意到，我已经为页面内容包装器正确地使用了左外边距和宽度。

页面内容左外边距等于侧边菜单的宽度。

#side-menu {
    width: 250px;
    position: absolute;
    min-height: 100%;
    background-color: #212529;
    top: 0;
    left: 0;
}

#page-content-wrapper {
    position: relative;
    margin-left: 0;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

@media (min-width: 992px) {
    #page-content-wrapper {
        margin-left: 250px;
        width: calc(100% - 250px);
    }
}

我们即将完成。

我们需要设置 `page-content-wrapper` 的最小高度。**我使用了最小高度而不是高度**。因为我们可能不知道我们应用程序的内容会是什么。所以我决定最小值为浏览器高度。最大值可以根据内容扩展到任何级别。为此，我们可以借助 jQuery。

如果您喜欢 JavaScript，那也很好。

    $(document).ready(function () {
    $('#side-menu').metisMenu();

    /*
     * Initial calls will be done here
     */
    function init() {
        setPageProperties();
        onWindowResize();
    }

    /*
    *  set the margin top for the page container
    *  Set the padding-top for the side bar 
    */
    function setPageProperties() {
        $('#page-container').css("margin-top", $('#page-header').height());
        $('#side-menu').css("padding-top", $('#page-header').height() + 2);
        setContentHeight();
    }

    /*
    * This would be called on window resize 
    * So that the design would not be affect when we don't have content.
    * We will not receive any unnecessary scroll bar.
    */
    function onWindowResize() {
        $(window).on('resize', function () {
            setContentHeight();
        });
    }
    
    /*
    *    Set the minimum height for the page container and page content wrapper.
    */
    function setContentHeight() {
        var windowHeight = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height);
        /*
         * page-container
         * side-menu
         * page-content-wrapper
         */
        var contentHeight = (windowHeight - ($('#page-header').height() + 20));
        $('#page-container').css('min-height', (windowHeight - ($('#page-header').height() + 2)));
        $('#page-content-wrapper').css('min-height', (windowHeight - ($('#page-header').height() + 2)));
    }

    init();
});

这里，我使用了窗口大小调整事件。每当窗口调整大小时进行计算。因为在移动设备上，我们可能使用纵向或横向。那时，如果已经设置了高度，那么对于另一种情况，如果 HTML、body 和内容有不同的颜色，内容的外观可能会有所不同。

我们可以使用任何浏览器调试器来决定页面标题应该添加多少。

容器的高度应根据页面标题计算。这样，即使我们没有内容，也不会出现滚动条。

我们已经完成了设置的 1、2 和 3。

现在我们需要为侧边栏和内容进行最后的颜色处理。这样侧边栏和内容看起来就不会有差异。

侧边栏和 body 将具有相同的颜色。

页面内容和 HTML 将具有相同的颜色。

#side-menu, body {
    background-color: #212529;
}

html, #page-content-wrapper {
    background-color: #fff;
}

:-) 现在放松一下。我们已经完成了除侧边栏在中等设备上的外观以及如何显示和隐藏之外的所有工作。

我将侧边菜单的 z-index 设置为 1，默认情况下，中等设备设置为 left:-250px（侧边栏的宽度）。

我使用了负值而不是 `display: none`。用于动画效果。

默认情况下，它在中等设备上是隐藏的。对于其他设备，我们强制显示该元素。

#side-menu {  z-index:1; left: -250px; }
#side-menu.show{
    display:block;
    left:0;
    transition: left .5s ease;

}
@media (min-width: 992px) {
#side-menu {  display:block;z-index:0; left:0; }
}

现在，我将为侧边栏（侧边菜单）引入一个单独的切换按钮。这将用于在中等设备上显示和隐藏侧边栏。根据我们的需要，我们可以将其定位在品牌图标附近。所以我将侧边菜单切换按钮添加到了 `nav-brand` 图标旁，并添加了必要的 CSS 来定位，以及 JavaScript 来显示和隐藏。

  • 在导航品牌图标旁边添加侧边栏切换按钮
  • 添加 CSS 在中等设备上显示，在其他设备上隐藏
  • 在侧边栏切换按钮单击时，显示和隐藏侧边栏。
<!-- HTML WOULD BE LIKE THE FOLLOWING. - I have used the pure css hamburger. 
You can use whatever you want--> 

<div class="sidebar-toggler hamburger hamburger--arrowturn-r is-active"
            data-toggle="collapse" data-showTarget="#side-menu">
                <div class="hamburger-box">
                  <div class="hamburger-inner"></div>
                </div>
              </div>
            <a class="navbar-brand" href="#">
                <img src="images/bootstrap-solid.svg" width="30" height="30" 
                    class="d-inline-block align-top" alt="">
                Bootstrap
            </a>

<!--CSS WOULD BE LIKE THE FOLLOWING--> 
    .sidebar-toggler{
        display:block;
        position: absolute;
        left: 0;
        top: 0;
    }

@media (min-width: 992px) {
.sidebar-toggler{
        display:none;
    }
}

<!-- JS WOULD BE LIKE THE FOLLOWING -->
$('.sidebar-toggler').on('click',function(){
            $(this).toggleClass('is-active');
            debugger
            $($(this).data().showtarget).toggleClass('show');
        });

我们已经完成了所有工作。我们可以在所有设备上测试我们的布局。

感谢

关注点

在本文中，我们讨论了如何设计管理后台模板的布局。

对于管理后台 CSS 模板，我们只需要一个能够适应所有设备的良好布局。其余部分是在我们开发时，将根据应用程序而有所不同。

第二点，组件的配色方案。

如果我们有了以上两点，那么我们就无需担心任何事情了。

我们无需浪费金钱或依赖他人来设计。

**注意**：这里，我附上了设计模板。如果您想更改布局的颜色，可以这样做。如果您没有想法，可以参考一些付费组件的配色方案。

如果有人需要关于使用 Bootstrap 3 或其他框架创建 CSS 模板的指导，请发表评论。我也会更新相关内容。

© . All rights reserved.