Home Explore
原型工具、Api管理、Bug管理等 更多工具
 团队协作  快速原型  自动标注  Bug管理  Api管理
Sign In
zhuliang
/
AdminLTE
mirror of https://github.com/almasaeed2010/AdminLTE.git
Watch 1
Star 0
Fork 0
Files Issues 0 Wiki
Browse Source

Updated top layout

Abdullah Almsaeed 10 years ago
parent
467d442c22
commit
85b64ef0e7
4 changed files with 193 additions and 47 deletions
Split View Show Diff Stats
  1. 12 0
      build/less/header.less
  2. 11 0
      dist/css/AdminLTE.css
  3. 1 1
      dist/css/AdminLTE.min.css
  4. 169 46
      pages/layout/top-nav.html

+ 12 - 0
build/less/header.less
View File 

@@ -233,4 +233,16 @@
 
   .left-side {
 
     padding-top: 100px!important;    
   }
 
+}
 
+
 
+.navbar-collapse.pull-left {
 
+  @media(max-width: @screen-sm-max) {
 
+    float: none!important;
 
+    + .navbar-custom-menu {      
+      display: block;
 
+      position: absolute;
 
+      top: 0;
 
+      right: 40px;
 
+    }
 
+  }  
 }

+ 11 - 0
dist/css/AdminLTE.css
View File 

@@ -390,6 +390,17 @@ a:focus {
 
     padding-top: 100px!important;
 
   }
 
 }
 
+@media (max-width: 991px) {
 
+  .navbar-collapse.pull-left {
 
+    float: none!important;
 
+  }
 
+  .navbar-collapse.pull-left + .navbar-custom-menu {
 
+    display: block;
 
+    position: absolute;
 
+    top: 0;
 
+    right: 40px;
 
+  }
 
+}
 
 /*
 
  * Component: Sidebar
 
  * ------------------

File diff suppressed because it is too large
+ 1 - 1
dist/css/AdminLTE.min.css


+ 169 - 46
pages/layout/top-nav.html
View File 

@@ -26,60 +26,183 @@
 
   <!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
 
   <body class="skin-blue layout-top-nav">
 
     <div class="wrapper">
 
-      
+
 
       <header class="main-header">               
         <nav class="navbar navbar-static-top">
 
-          <div class="container-fluid">
 
-          <div class="navbar-header">
 
-            <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
 
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 
-              <i class="fa fa-bars"></i>
 
-            </button>
 
-          </div>
 
+          <div class="container">
 
+            <div class="navbar-header">
 
+              <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
 
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 
+                <i class="fa fa-bars"></i>
 
+              </button>
 
+            </div>
 
 
-          <!-- Collect the nav links, forms, and other content for toggling -->
 
-          <div class="collapse navbar-collapse" id="navbar-collapse">
 
-            <ul class="nav navbar-nav">
 
-              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 
-              <li><a href="#">Link</a></li>
 
-              <li class="dropdown">
 
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 
-                <ul class="dropdown-menu" role="menu">
 
-                  <li><a href="#">Action</a></li>
 
-                  <li><a href="#">Another action</a></li>
 
-                  <li><a href="#">Something else here</a></li>
 
-                  <li class="divider"></li>
 
-                  <li><a href="#">Separated link</a></li>
 
-                  <li class="divider"></li>
 
-                  <li><a href="#">One more separated link</a></li>
 
-                </ul>
 
-              </li>
 
-            </ul>
 
-            <form class="navbar-form navbar-left" role="search">
 
-              <div class="form-group">
 
-                <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
 
-              </div>
 
-            </form>
 
-            <ul class="nav navbar-nav navbar-right">
 
-              <li><a href="#">Link</a></li>
 
-              <li class="dropdown">
 
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 
-                <ul class="dropdown-menu" role="menu">
 
-                  <li><a href="#">Action</a></li>
 
-                  <li><a href="#">Another action</a></li>
 
-                  <li><a href="#">Something else here</a></li>
 
-                  <li class="divider"></li>
 
-                  <li><a href="#">Separated link</a></li>
 
+            <!-- Collect the nav links, forms, and other content for toggling -->
 
+            <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
 
+              <ul class="nav navbar-nav">
 
+                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 
+                <li><a href="#">Link</a></li>
 
+                <li class="dropdown">
 
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 
+                  <ul class="dropdown-menu" role="menu">
 
+                    <li><a href="#">Action</a></li>
 
+                    <li><a href="#">Another action</a></li>
 
+                    <li><a href="#">Something else here</a></li>
 
+                    <li class="divider"></li>
 
+                    <li><a href="#">Separated link</a></li>
 
+                    <li class="divider"></li>
 
+                    <li><a href="#">One more separated link</a></li>
 
+                  </ul>
 
+                </li>
 
+              </ul>
 
+              <form class="navbar-form navbar-left" role="search">
 
+                <div class="form-group">
 
+                  <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
 
+                </div>
 
+              </form>                          
+            </div><!-- /.navbar-collapse -->
 
+            <!-- Navbar Right Menu -->
 
+              <div class="navbar-custom-menu">
 
+                <ul class="nav navbar-nav">
 
+                  <!-- Messages: style can be found in dropdown.less-->
 
+                  <li class="dropdown messages-menu">
 
+                    <!-- Menu toggle button -->
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
+                      <i class="fa fa-envelope-o"></i>
 
+                      <span class="label label-success">4</span>
 
+                    </a>
 
+                    <ul class="dropdown-menu">
 
+                      <li class="header">You have 4 messages</li>
 
+                      <li>
 
+                        <!-- inner menu: contains the messages -->
 
+                        <ul class="menu">
 
+                          <li><!-- start message -->
 
+                            <a href="#">
 
+                              <div class="pull-left">
 
+                                <!-- User Image -->
 
+                                <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
 
+                              </div>
 
+                              <!-- Message title and timestamp -->
 
+                              <h4>
 
+                                Support Team
 
+                                <small><i class="fa fa-clock-o"></i> 5 mins</small>
 
+                              </h4>
 
+                              <!-- The message -->
 
+                              <p>Why not buy a new awesome theme?</p>
 
+                            </a>
 
+                          </li><!-- end message -->
 
+                        </ul><!-- /.menu -->
 
+                      </li>
 
+                      <li class="footer"><a href="#">See All Messages</a></li>
 
+                    </ul>
 
+                  </li><!-- /.messages-menu -->
 
+
 
+                  <!-- Notifications Menu -->
 
+                  <li class="dropdown notifications-menu">
 
+                    <!-- Menu toggle button -->
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
+                      <i class="fa fa-bell-o"></i>
 
+                      <span class="label label-warning">10</span>
 
+                    </a>
 
+                    <ul class="dropdown-menu">
 
+                      <li class="header">You have 10 notifications</li>
 
+                      <li>
 
+                        <!-- Inner Menu: contains the notifications -->
 
+                        <ul class="menu">
 
+                          <li><!-- start notification -->
 
+                            <a href="#">
 
+                              <i class="fa fa-users text-aqua"></i> 5 new members joined today
 
+                            </a>
 
+                          </li><!-- end notification -->
 
+                        </ul>
 
+                      </li>
 
+                      <li class="footer"><a href="#">View all</a></li>
 
+                    </ul>
 
+                  </li>
 
+                  <!-- Tasks Menu -->
 
+                  <li class="dropdown tasks-menu">
 
+                    <!-- Menu Toggle Button -->
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
+                      <i class="fa fa-flag-o"></i>
 
+                      <span class="label label-danger">9</span>
 
+                    </a>
 
+                    <ul class="dropdown-menu">
 
+                      <li class="header">You have 9 tasks</li>
 
+                      <li>
 
+                        <!-- Inner menu: contains the tasks -->
 
+                        <ul class="menu">
 
+                          <li><!-- Task item -->
 
+                            <a href="#">
 
+                              <!-- Task title and progress text -->
 
+                              <h3>
 
+                                Design some buttons
 
+                                <small class="pull-right">20%</small>
 
+                              </h3>
 
+                              <!-- The progress bar -->
 
+                              <div class="progress xs">
 
+                                <!-- Change the css width attribute to simulate progress -->
 
+                                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 
+                                  <span class="sr-only">20% Complete</span>
 
+                                </div>
 
+                              </div>
 
+                            </a>
 
+                          </li><!-- end task item -->
 
+                        </ul>
 
+                      </li>
 
+                      <li class="footer">
 
+                        <a href="#">View all tasks</a>
 
+                      </li>
 
+                    </ul>
 
+                  </li>
 
+                  <!-- User Account Menu -->
 
+                  <li class="dropdown user user-menu">
 
+                    <!-- Menu Toggle Button -->
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
+                      <!-- The user image in the navbar-->
 
+                      <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
 
+                      <!-- hidden-xs hides the username on small devices so only the image appears. -->
 
+                      <span class="hidden-xs">Alexander Pierce</span>
 
+                    </a>
 
+                    <ul class="dropdown-menu">
 
+                      <!-- The user image in the menu -->
 
+                      <li class="user-header">
 
+                        <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
 
+                        <p>
 
+                          Alexander Pierce - Web Developer
 
+                          <small>Member since Nov. 2012</small>
 
+                        </p>
 
+                      </li>
 
+                      <!-- Menu Body -->
 
+                      <li class="user-body">
 
+                        <div class="col-xs-4 text-center">
 
+                          <a href="#">Followers</a>
 
+                        </div>
 
+                        <div class="col-xs-4 text-center">
 
+                          <a href="#">Sales</a>
 
+                        </div>
 
+                        <div class="col-xs-4 text-center">
 
+                          <a href="#">Friends</a>
 
+                        </div>
 
+                      </li>
 
+                      <!-- Menu Footer-->
 
+                      <li class="user-footer">
 
+                        <div class="pull-left">
 
+                          <a href="#" class="btn btn-default btn-flat">Profile</a>
 
+                        </div>
 
+                        <div class="pull-right">
 
+                          <a href="#" class="btn btn-default btn-flat">Sign out</a>
 
+                        </div>
 
+                      </li>
 
+                    </ul>
 
+                  </li>
 
                 </ul>
 
-              </li>
 
-            </ul>
 
-          </div><!-- /.navbar-collapse -->
 
+              </div><!-- /.navbar-custom-menu -->
 
           </div><!-- /.container-fluid -->
 
         </nav>
 
       </header>
 
       <!-- Full Width Column -->
 
       <div class="content-wrapper">
 
-        <div class="container-fluid">
 
+        <div class="container">
 
           <!-- Content Header (Page header) -->
 
           <section class="content-header">
 
             <h1>
 
@@ -114,7 +237,7 @@
 
         </div><!-- /.container -->
 
       </div><!-- /.content-wrapper -->
 
       <footer class="main-footer">
 
-        <div class="container-fluid">
 
+        <div class="container">
 
           <div class="pull-right hidden-xs">
 
             <b>Version</b> 2.0
 
           </div>