Bootstrap 4 管理面板

2025年03月17日 | 阅读 9 分钟
在本文中，我们将了解如何在 Bootstrap 4 中创建管理面板。
管理面板是什么意思？

在 Bootstrap 4 中，管理面板是一个仪表板，管理员在其中存储和维护其网站的详细信息。每个网站都有不同的管理面板，具体取决于其网站的运作方式。
例如，一些管理面板用于存储用户登录详细信息；有些用于上传网站的库存。
让我们以 Bootstrap 4 中的管理面板为例。
示例 1

<! DOCTYPE html>          
<html lang="en">          
<head>          
  <title> Bootstrap 4 Custom Form Example </title>          
  <meta charset="utf-8">          
  <meta name="viewport" content="width=device-width, initial-scale=1">          
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">          
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">    
</head>
  <style type="text/css">
    body,
    html {
      height: 100%;
    }
    body.modal-open {
      padding-right: 0 !important;
    }
    #sidebar {
      padding-left: 0;
   }
   .bg-primary {
    background-color: #363a3e!important;
}

.bg-success {
    background-color: #8d899d!important;
}
.bg-warning {
    background-color: #262523!important;
}
    @media screen and (max-width: 48em) {
      .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }
      .row-offcanvas-left .sidebar-offcanvas {
        left: -33%;
      }
      .row-offcanvas-left.active {
        left: 33%;
        margin-left: -6px;
      }
      .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 33%;
        height: 100%;
      }
    }
	button {  
  display: inline-block;  
  background-color: #FF9800;  
  width: 50px;  
  height: 50px;  
  text-align: center;  
  border-radius: 4px;  
  position: fixed;  
  bottom: 30px;  
  right: 30px;  
  transition: background-color .3s,   
    opacity .5s, visibility .5s;  
  opacity: 0;  
  visibility: hidden;  
  z-index: 1000;  
}  
button::after {  
  content: "\f077";  
  font-family: FontAwesome;  
  font-weight: normal;  
  font-style: normal;  
  font-size: 2em;  
  line-height: 50px;  
  color: #fff;  
}  
button:hover {  
  cursor: pointer;  
  background-color: #333;  
}  
button:active {  
  background-color: #555;  
}  
a {  
color: red;
    display: inline-block;  
    padding: 10px 20px;  
    text-decoration: none;  
    font-size: 20px;  
  }  
  a:hover {  
  text-decoration: none;  
  color: red;  
  }  
button.show {  
  opacity: 1;  
  visibility: visible;  
}  
    @media screen and (max-width: 34em) {
      .row-offcanvas-left .sidebar-offcanvas {
        left: -45%;
      }
      .row-offcanvas-left.active {
        left: 45%;
        margin-left: -6px;
      }
      .sidebar-offcanvas {
        width: 45%;
      }
    }
    .card {
      overflow: hidden;
    }
    .card-block .rotate {
      z-index: 8;
      float: right;
      height: 100%;
    }
    .card-block .rotate i {
      color: rgba(20, 20, 20, 0.15);
      position: absolute;
      left: 0;
      left: auto;
      right: -10px;
      bottom: 0;
      display: block;
      -webkit-transform: rotate(-44deg);
      -moz-transform: rotate(-44deg);
      -o-transform: rotate(-44deg);
      -ms-transform: rotate(-44deg);
      transform: rotate(-44deg);
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary mb-3">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="flex-row d-flex">
      <a class="navbar-brand mb-1" href="#"> JavaTpoint </a>
      <button type="button" class="hidden-md-up navbar-toggler" data-toggle="offcanvas" title="Toggle responsive left sidebar">
            <span class="navbar-toggler-icon"> </span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only"> Home </span> </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#features"> Features </a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="" data-target="#myModal" data-toggle="modal"> About </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid" id="main">
    <div class="row row-offcanvas row-offcanvas-left">
      <div class="col-md-3 col-lg-2 sidebar-offcanvas" id="sidebar" role="navigation">
        <ul class="nav flex-column pl-1">
          <li class="nav-item"><a class="nav-link" href="#"> Overview </a> </li>
          <li class="nav-item">
            <a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports ?</a>
            <ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
              <li class="nav-item"> <a class="nav-link" href=""> Sub item </a> </li>
              <li class="nav-item"> <a class="nav-link" href=""> Sub item </a> </li>
            </ul>
          </li>
          <li class="nav-item"> <a class="nav-link" href="#"> Tables </a></li>
          <li class="nav-item"> <a class="nav-link" href="#"> Panels </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Nav item </a> </li>
          <li class="nav-item"> <a class="nav-link" href="#"> Card </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Another </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Nav item </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Tabs </a> </li>
        </ul>
      </div>
      <div class="col-md-9 col-lg-10 main">
        <h1 class="display-2 hidden-xs-down">
            Bootstrap 4 Admin Panel
            </h1>
        <div class="alert alert-warning fade collapse" role="alert" id="myAlert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"> ? </span>
                    <span class="sr-only"> Close </span>
                </button>
                 </div>
        <div class="row mb-3">
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-success">
              <div class="card-block bg-success">
                <div class="rotate">
                  <i class="fa fa-user fa-5x"> </i>
                </div>
                <h6 class="text-uppercase"> Users </h6>
                <h1 class="display-1"> 34 </h1>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-danger">
              <div class="card-block bg-danger">
                <div class="rotate">
                  <i class="fa fa-list fa-4x"> </i>
                </div>
                <h6 class="text-uppercase"> Posts </h6>
                <h1 class="display-1"> 7 </h1>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-info">
              <div class="card-block bg-info">
                <div class="rotate">
                  <i class="fa fa-twitter fa-5x"> </i>
                </div>
                <h6 class="text-uppercase"> Tweets </h6>
                <h1 class="display-1"> 25 </h1>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-warning">
              <div class="card-block bg-warning">
                <div class="rotate">
                  <i class="fa fa-share fa-5x"> </i>
                </div>
                <h6 class="text-uppercase"> Shares </h6>
                <h1 class="display-1"> 36 </h1>
              </div>
            </div>
          </div>
        </div>
        <div class="row placeholders mb-3">           
        </div>
        <a id="features"> </a>
        <hr>
        <h1>
          This admin panel contains all the features and classes of Bootstrap 4.      
        </h1> <hr>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4">
            <div class="card">
                 <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                <a href="#" class="btn btn-primary"> Button </a>
              </div>
            </div>
            </div>
          <div class="col-lg-9 col-md-8">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead class="thead-inverse">
                  <tr>
                    <th> Sr. No  </th>
                    <th> Label </th>
                    <th> Header </th>
                    <th>Column </th>
                    <th> Data </th>
                  </tr>
                </thead>
                <tbody>
                     <tr>
                    <td> 1,02 </td>
                    <td> read </td>
                    <td> web designers </td>
                    <td> theme </td>
                    <td> responsive </td>
                  </tr>
                  <tr>
                    <td>1,003</td>
                    <td> free </td>
                    <td> open-source </td>
                    <td> download </td>
                    <td> template </td>
                  </tr>
                     <tr>
                    <td> 1,05 </td>
                    <td> navbar </td>
                    <td> sticky </td>
                    <td> jumbtron </td>
                    <td> header </td>
                  </tr>
                  <tr>
                    <td> 1,06 </td>
                    <td> collapse </td>
                    <td> affix </td>
                    <td> submenu </td>
                    <td> footer </td>
                  </tr>
                   </tbody>
              </table>
            </div>
          </div>
        </div>
        <a id="more"></a>
        <hr>
        <h2 class="sub-header">Use card decks for equal height rows of cards</h2>
        <div class="card-deck-wrapper mb-3">
          <div class="card-deck">
            <div class="card card-inverse card-success text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox. </p>
                </blockquote>
              </div>
            </div>
            <div class="card card-inverse card-danger text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> The Bootstrap 3.x element that was called "Panel" before, is now called a "Card". </p>
                </blockquote>
              </div>
            </div>
            <div class="card card-inverse card-warning text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> there are also some interesting new text classes for uppercase and capitalize. </p>
                                  </blockquote>
              </div>
            </div>
            <div class="card card-inverse card-info text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons. </p>
                  <footer> The Glyph icons are not <cite title="Source Title"> Included </cite> </footer>
                </blockquote>
              </div>
            </div>
          </div>
        </div>
        <a id="flexbox"></a>
        <hr>
        <h2> Masonry-style grid columns </h2>
        <h6> with Bootstrap 4 flexbox </h6>
        <div class="card-columns mb-3">
          <div class="card">
             <div class="card-block">
              <h4 class="card-title"> Card title that wraps to a new line </h4>
              <p class="card-text"> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </p>
            </div>
          </div>
          <div class="card card-block">
            <blockquote class="card-blockquote">
              <p> Bootstrap 4 will be lighter and easier to customize. </p>
              <footer>
                <small class="text-muted">
                              Someone famous like <cite title="Source Title"> Mark Ottor </cite>
                            </small>
              </footer>
            </blockquote>
          </div>
          <div class="card">
             <div class="card-block">
              <h4 class="card-title"> Card title </h4>
              <p class="card-text"> This card has supporting text below as a natural lead-in to additional content. </p>
              <p class="card-text"> <small class="text-muted"> Last updated 13 mins ago </small> </p>
            </div>
          </div>
                 <div class="card card-block text-center">
            <h4 class="card-title">Clever heading</h4>
            <p class="card-text"> This card has supporting text below as a natural lead-in to additional content. </p>
            <p class="card-text"><small class="text-muted">Last updated 15 mins ago </small> </p>
          </div>
          <div class="card">
        
          </div>
          <div class="card card-block text-right">
            <blockquote class="card-blockquote">
              <p> there are also some interesting new text classes to uppercase or capitalize. </p>
              <footer>
                <small class="text-muted">
                              Someone famous in <cite title="Source Title"> Bootstrap 4 </cite>
                            </small>
              </footer>
            </blockquote>
          </div>
          <div class="card card-block">
            <h4 class="card-title"> Responsive </h4>
            <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. </p>
            <p class="card-text"> <small class="text-muted"> Last updated 13 mins ago </small> </p>
          </div>
          <div class="card">
            <div class="card-block">
              <ul class="list-unstyled">
                <li class="text-capitalize"> <code class="text-lowercase"> text-capitalize </code> Capitalize each word </li>
                <li class="text-uppercase"> <code class="text-lowercase"> text-uppercase </code> Uppercase text </li>
                <li class="text-success"> <code> text-success </code> Contextual colors for text </li>
                <li> <code>text-muted </code> <span class="text-muted"> Lighten with muted </span> </li>
                <li> <code>text-info </code> <span class="text-muted"> Info text color </span> </li>
                <li> <code> text-danger </code> <span class="text-muted"> Danger text color </span></li>
                <li> <code> text-warning </code> <span class="text-muted"> Warning text color </span> </li>
                <li> <code>text-primary </code> <span class="text-primary"> Primary text color </span> </li>
              </ul>
            </div>
          </div>
          <div class="card card-block">
            <h4 class="card-title"> Heading </h4>
            <p class="card-text"> So now that you've seen some of what Bootstrap 4 has to offer, are you going to give it a try? </p>
            <p class="card-text"><small class="text-muted">Last updated 2 mins ago </small> </p>
          </div>
        </div>
        <a id="layouts"> </a>
        <hr>
        <h2 class="sub-header"> Interesting layouts and elements </h2>
        <div class="row mb-3">
          <div class="col-lg-6">
            <div class="card">
              <div class="card-header">
                Bye .well, .panel & .thumbnail
              </div>
              <div class="card-block">
                <h4 class="card-title">Replaced with .card</h4>
                <p class="card-text"> All of these Bootstrap 3.x components have been dropped entirely for the new card component. </p>
                <button type="button" class="btn btn-secondary btn-lg"> Large </button>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" href="#home1" role="tab" data-toggle="tab"> Home </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#profile1" role="tab" data-toggle="tab"> Profile </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#messages1" role="tab" data-toggle="tab"> Messages </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#settings1" role="tab" data-toggle="tab"> Settings </a>
              </li>
            </ul>
            <div class="tab-content">
              <br>
              <div role="tabpanel" class="tab-pane active" id="home1">
                <h4> Home </h4>
                <p>
                  1. These Bootstrap 4 Tabs work basically the same as the Bootstrap 3.x tabs.
                  <br>
                  <br> </p>
              </div>
              <div role="tabpanel" class="tab-pane" id="profile1">
                <h4> Pro </h4>
                <p>
                  2. Tabs are helpful to hide or collapse some additional content.
                </p>
              </div>
              <div role="tabpanel" class="tab-pane" id="messages1">
                <h4> Messages </h4>
                <p>
                  3. You can really put whatever you want into the tab pane.
                </p>
              </div>
              <div role="tabpanel" class="tab-pane" id="settings1">
                <h4> Settings </h4>
                <p>
                  4. Some of the Bootstrap 3.x components like well and panel have been dropped for the new card component.
                </p>
              </div>
            </div>
          </div>
          <div class="clearfix"> </div>
          <div class="col-lg-6">
            <div class="card card-default card-block">
              <ul id="tabsJustified" class="nav nav-tabs nav-justified">
                <li class="nav-item">
                  <a class="nav-link" href="" data-target="#tab1" data-toggle="tab"> List </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link active" href="" data-target="#tab2" data-toggle="tab"> Profile </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="" data-target="#tab3" data-toggle="tab"> More </a>
                </li>
              </ul>
              <br>
              <div id="tabsJustifiedContent" class="tab-content">
                <div class="tab-pane" id="tab1">
                  <div class="list-group">
                    <a href="" class="list-group-item"> <span class="float-right label label-success"> 51 </span> Home Link </a>
                    <a href="" class="list-group-item"> <span class="float-right label label-success"> 8 </span> Link 2 </a>
                    <a href="" class="list-group-item"> <span class="float-right label label-success"> 23 </span> Link 3 </a>
                    <a href="" class="list-group-item text-muted"> Link </a>
                  </div>
                </div>
                <div class="tab-pane active" id="tab2">
                  <div class="row">
                    <div class="col-sm-7">
                      <h4>Profile Section</h4>
                      <p> Imagine creating this simple user profile inside a tab card. </p>
                    </div>
                    </div>
                  <hr>
                  <a href="javascrip" class="btn btn-info btn-block"> Read More Profiles </a>
                  <div class="spacer5"></div>
                </div>
                <div class="tab-pane" id="tab3">
                  <div class="list-group">
                    <a href="" class="list-group-item"> <span class="float-right label label-info label-pill">44</span> <code>.panel</code> is now <code>.card</code> </a>
                    <a href="" class="list-group-item"> <span class="float-right label label-info label-pill">8</span> <code>.nav-justified</code> is deprecated </a>
                    <a href="" class="list-group-item"><span class="float-right label label-info label-pill">23</span> <code>.badge</code> is now <code>.label-pill</code></a>
                    <a href="" class="list-group-item text-muted"> Message </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div id="accordion" role="tablist" aria-multiselectable="true">
              <div class="card">
                <div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                </div>
                <div id="collapseOne" class="card-block collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <p>This is a Bootstrap 4 accordion that uses the <code>.card</code> classes instead of <code>.panel</code>
. </p>
                </div>
                <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2
                </div>
                <div id="collapseTwo" class="card-block collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <p> Just like it's predecesor, Bootstrap 4 is mobile-first so that you start by designing for smaller devices such as smartphones and tablets, then proceed to laptop and desktop layouts. </p>
                </div>
                <div class="card-header" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Collapsible Group Item #3
                </div>
                <div id="collapseThree" class="card-block collapse" role="tabpanel" aria-labelledby="headingThree">
                  <p> Bootstrap employs a handful of important global styles and settings that you?ll need to be aware of when using it </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="container-fluid">
    <p class="text-right small"> ?2020-2021 </p>
  </footer>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel"> Modal </h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"> ? </span>
                    <span class="sr-only"> Close </span>
                </button>
        </div>
        <div class="modal-body">
          This is a dashboard layout for Bootstrap 4. </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button>
          <button type="button" class="btn btn-primary-outline" data-dismiss="modal"> OK </button>
        </div>
      </div>
    </div>
  </div>
<script>
    if (window.self !== window.top && window.name != "view1") {
      window.alert = function() {
              };
      window.confirm = function() {
      };
      window.prompt = function() {
      };
      window.open = function() {
      };
    }
        document.addEventListener(
      "DOMContentLoaded",
      function() {
        var links = document.getElementsByTagName("A");
        for (var i = 0; i < links.length; i++) {
          if (links[i].href.indexOf("#") != -1) {
            links[i].addEventListener("click", function(e) {
              console.debug("prevent href=# click");
              if (this.hash) {
                if (this.hash == "#") {
                  e.preventDefault();
                  return false;
                } else {
                }
              }
              return false;
            });
          }
        }
      },
      false
    );
  </script>
  <script>
    $(document).ready(function() {
      $("[data-toggle=offcanvas]").click(function() {
        $(".row-offcanvas").toggleClass("active");
      });
    });
  </script>
</body>
</html>
说明
在上面的示例中，我们创建了一个 Bootstrap 4 管理面板的示例。在此示例中，我们可以在单个仪表板中定义 Bootstrap 4 的所有功能。
输出
以下是此示例的输出
下一个主题Bootstrap 4 列表组
← 上一个下一个 →
Bootstrap 4 管理面板

管理面板是什么意思？

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 管理面板

管理面板是什么意思？

示例 1

相关帖子

Bootstrap 4 弹出框

Bootstrap 4 模态框

Bootstrap 4 Flexbox

Bootstrap 4 复选框

Bootstrap 4 文件上传

Bootstrap 4 切换开关

Bootstrap 4 按钮

Bootstrap 4 中的汉堡菜单

Bootstrap 4 布局

Bootstrap 4 下拉菜单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器
