大家好，又见面了，我是你们的朋友全栈君。
Reminder!
AdminLTE uses all of Bootstrap 3 components. It’s a good start to review
the Bootstrap documentation to get an idea of the various components
that this documentation does not cover.
Tip!
If you go through the example pages and would like to copy a component, right-click on
the component and choose “inspect element” to get to the HTML quicker than scanning
the HTML page.
Main Header
The main header contains the logo and navbar. Construction of the
navbar differs slightly from Bootstrap because it has components that Bootstrap doesn’t provide.
The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for
the top nav layout.
<header class=”main-header”>
<a href=”../../index2.html” class=”logo”>
<!– LOGO –>
AdminLTE
</a>
<!– Header Navbar: style can be found in header.less –>
<nav class=”navbar navbar-static-top” role=”navigation”>
<!– 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”>
<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 actual data –>
<ul class=”menu”>
<li><!– start message –>
<a href=”#”>
<div class=”pull-left”>
<img src=”dist/img/user2-160×160.jpg” class=”img-circle” alt=”User Image”>
</div>
<h4>
Sender Name
<small><i class=”fa fa-clock-o”></i> 5 mins</small>
</h4>
<p>Message Excerpt</p>
</a>
</li><!– end message –>
…
</ul>
</li>
<li class=”footer”><a href=”#”>See All Messages</a></li>
</ul>
</li>
<!– Notifications: style can be found in dropdown.less –>
<li class=”dropdown notifications-menu”>
<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 actual data –>
<ul class=”menu”>
<li>
<a href=”#”>
<i class=”ion ion-ios-people info”></i> Notification title
</a>
</li>
…
</ul>
</li>
<li class=”footer”><a href=”#”>View all</a></li>
</ul>
</li>
<!– Tasks: style can be found in dropdown.less –>
<li class=”dropdown tasks-menu”>
<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 actual data –>
<ul class=”menu”>
<li><!– Task item –>
<a href=”#”>
<h3>
Design some buttons
<small class=”pull-right”>20%</small>
</h3>
<div class=”progress xs”>
<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: style can be found in dropdown.less –>
<li class=”dropdown user user-menu”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
<img src=”dist/img/user2-160×160.jpg” class=”user-image” alt=”User Image”>
<span class=”hidden-xs”>Alexander Pierce</span>
</a>
<ul class=”dropdown-menu”>
<!– User image –>
<li class=”user-header”>
<img src=”dist/img/user2-160×160.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>
</div>
</nav>
</header>
Top Nav Layout. Main Header Example.
Reminder!
To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.
<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>
<!– 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>
</ul>
</li>
</ul>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>
</header>
Sidebar
The sidebar used in this page to the left provides an example of what your sidebar should like.
Construction of a sidebar:
<div class=”main-sidebar”>
<!– Inner sidebar –>
<div class=”sidebar”>
<!– user panel (Optional) –>
<div class=”user-panel”>
<div class=”pull-left image”>
<img src=”dist/img/user2-160×160.jpg” class=”img-circle” alt=”User Image”>
</div>
<div class=”pull-left info”>
<p>User Name</p>
<a href=”#”><i class=”fa fa-circle text-success”></i> Online</a>
</div>
</div><!– /.user-panel –>
<!– Search Form (Optional) –>
<form action=”#” method=”get” class=”sidebar-form”>
<div class=”input-group”>
<input type=”text” name=”q” class=”form-control” placeholder=”Search…”>
<span class=”input-group-btn”>
<button type=”submit” name=”search” id=”search-btn” class=”btn btn-flat”><i class=”fa fa-search”></i></button>
</span>
</div>
</form><!– /.sidebar-form –>
<!– Sidebar Menu –>
<ul class=”sidebar-menu”>
<li class=”header”>HEADER</li>
<!– Optionally, you can add icons to the links –>
<li class=”active”><a href=”#”><span>Link</span></a><</li>
<li><a href=”#”><span>Another Link</span></a></li>
<li class=”treeview”>
<a href=”#”><span>Multilevel</span> <i class=”fa fa-angle-left pull-right”></i></a>
<ul class=”treeview-menu”>
<li><a href=”#”>Link in level 2</a></li>
<li><a href=”#”>Link in level 2</a></li>
</ul>
</li>
</ul><!– /.sidebar-menu –>
</div><!– /.sidebar –>
</div><!– /.main-sidebar –>
Control Sidebar
Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
slide over the content. The second pushes the content to make space for the sidebar. Either of
these methods can be set through the Javascript options.
The following code should be placed within the .wrapper div. I prefer
to place it right after the footer.
Dark Sidebar Markup
<!– The Right Sidebar –>
<aside class=”control-sidebar control-sidebar-dark”>
<!– Content of the sidebar goes here –>
</aside>
<!– The sidebar’s background –>
<!– This div must placed right after the sidebar for it to work–>
<div class=”control-sidebar-bg”></div>
Light Sidebar Markup
<!– The Right Sidebar –>
<aside class=”control-sidebar control-sidebar-light”>
<!– Content of the sidebar goes here –>
</aside>
<!– The sidebar’s background –>
<!– This div must placed right after the sidebar for it to work–>
<div class=”control-sidebar-bg”></div>
Once you create the sidebar, you will need a toggle button to open/close it.
By adding the attribute data-toggle=”control-sidebar” to any button, it will
automatically act as the toggle button.
Toggle Button Example
Toggle Right Sidebar
Sidebar Toggle Markup
<button class=”btn btn-default” data-toggle=”control-sidebar”>Toggle Right Sidebar</button>
Info Box
Info boxes are used to display statistical snippets. There are two types of info boxes.
First Type of Info Boxes
Messages
1,410
Bookmarks
410
Uploads
13,648
Likes
93,139
Markup
<div class=”info-box”>
<!– Apply any bg-* class to to the icon to color it –>
<span class=”info-box-icon bg-red”><i class=”fa fa-star-o”></i></span>
<div class=”info-box-content”>
<span class=”info-box-text”>Likes</span>
<span class=”info-box-number”>93,139</span>
</div><!– /.info-box-content –>
</div><!– /.info-box –>
Second Type of Info Boxes
Bookmarks
41,410
70% Increase in 30 Days
Likes
41,410
70% Increase in 30 Days
Events
41,410
70% Increase in 30 Days
Comments
41,410
70% Increase in 30 Days
Markup
<!– Apply any bg-* class to to the info-box to color it –>
<div class=”info-box bg-red”>
<span class=”info-box-icon”><i class=”fa fa-comments-o”></i></span>
<div class=”info-box-content”>
<span class=”info-box-text”>Likes</span>
<span class=”info-box-number”>41,410</span>
<!– The progress section is optional –>
<div class=”progress”>
<div class=”progress-bar” style=”width: 70%”></div>
</div>
<span class=”progress-description”>
70% Increase in 30 Days
</span>
</div><!– /.info-box-content –>
</div><!– /.info-box –>
The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.
Box
The box component is the most widely used component through out this template. You can
use it for anything from displaying charts to just blocks of text. It comes in many different
styles that we will explore below.
Default Box Markup
Default Box Example
Label
The body of the box
The footer of the box
<div class=”box”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Default Box Example</h3>
<div class=”box-tools pull-right”>
<!– Buttons, labels, and many other things can be placed here! –>
<!– Here is a label for example –>
<span class=”label label-primary”>Label</span>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
<div class=”box-footer”>
The footer of the box
</div><!– box-footer –>
</div><!– /.box –>
Box Variants
You can change the style of the box by adding any of the contextual classes.
Default Box Example
The body of the box
Primary Box Example
The body of the box
Info Box Example
The body of the box
Warning Box Example
The body of the box
Success Box Example
The body of the box
Danger Box Example
The body of the box
<div class=”box box-default”>…</div>
<div class=”box box-primary”>…</div>
<div class=”box box-info”>…</div>
<div class=”box box-warning”>…</div>
<div class=”box box-success”>…</div>
<div class=”box box-danger”>…</div>
Solid Box
Solid Boxes are alternative ways to display boxes.
They can be created by simply adding the box-solid class to the box component.
You may also use contextual classes with you solid boxes.
Default Solid Box Example
The body of the box
Primary Solid Box Example
The body of the box
Info Solid Box Example
The body of the box
Warning Solid Box Example
The body of the box
Success Solid Box Example
The body of the box
Danger Solid Box Example
The body of the box
<div class=”box box-solid box-default”>…</div>
<div class=”box box-solid box-primary”>…</div>
<div class=”box box-solid box-info”>…</div>
<div class=”box box-solid box-warning”>…</div>
<div class=”box box-solid box-success”>…</div>
<div class=”box box-solid box-danger”>…</div>
Box Tools
Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
of multiple AdminLTE components within the header of the box.
AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
are placed in the box-tools which is placed in the box-header.
<!– This will cause the box to be removed when clicked –>
<button class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”><i class=”fa fa-times”></i></button>
<!– This will cause the box to collapse when clicked –>
<button class=”btn btn-box-tool” data-widget=”collapse” data-toggle=”tooltip” title=”Collapse”><i class=”fa fa-minus”></i></button>
Collapsable
The body of the box
<div class=”box box-default”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Collapsable</h3>
<div class=”box-tools pull-right”>
<button class=”btn btn-box-tool” data-widget=”collapse”><i class=”fa fa-minus”></i></button>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
</div><!– /.box –>
Removable
The body of the box
<div class=”box box-default”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Removable</h3>
<div class=”box-tools pull-right”>
<button class=”btn btn-box-tool” data-widget=”remove”><i class=”fa fa-times”></i></button>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
</div><!– /.box –>
Expandable
The body of the box
<div class=”box box-default collapsed-box”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Expandable</h3>
<div class=”box-tools pull-right”>
<button class=”btn btn-box-tool” data-widget=”collapse”><i class=”fa fa-plus”></i></button>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
</div><!– /.box –>
We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
Labels
Some Label
The body of the box
<div class=”box box-default”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Labels</h3>
<div class=”box-tools pull-right”>
<span class=”label label-default”>8 New Messages</span>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
</div><!– /.box –>
Input
The body of the box
<div class=”box box-default”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Input</h3>
<div class=”box-tools pull-right”>
<div class=”has-feedback”>
<input type=”text” class=”form-control input-sm” placeholder=”Search…”>
<span class=”glyphicon glyphicon-search form-control-feedback”></span>
</div>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
</div><!– /.box –>
Tootips on buttons
The body of the box
<div class=”box box-default”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Tooltips on buttons</h3>
<div class=”box-tools pull-right”>
<button class=”btn btn-box-tool” data-widget=”collapse” data-toggle=”tooltip” title=”Collapse”><i class=”fa fa-minus”></i></button>
<button class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”><i class=”fa fa-times”></i></button>
</div><!– /.box-tools –>
</div><!– /.box-header –>
<div class=”box-body”>
The body of the box
</div><!– /.box-body –>
</div><!– /.box –>
If you inserted a box into the document after app.js was loaded, you have to activate
the collapse/remove buttons explicitly by calling .activateBox():
<script>
$(“#box-widget”).activateBox();
</script>
Loading States
Loading state
The body of the box
Loading state (.box-solid)
The body of the box
To simulate a loading state, simply place this code before the .box closing tag.
<div class=”overlay”>
<i class=”fa fa-refresh fa-spin”></i>
</div>
Direct Chat
The direct chat widget extends the box component to create a beautiful chat interface. This widget
consists of a required messages pane and an optional contacts pane. Examples:
Direct Chat
3
Alexander Pierce
23 Jan 2:00 pm
Is this template really for free? That’s unbelievable!
Sarah Bullock
23 Jan 2:05 pm
You better believe it!
Send
Direct Chat
3
Alexander Pierce
23 Jan 2:00 pm
Is this template really for free? That’s unbelievable!
Sarah Bullock
23 Jan 2:05 pm
You better believe it!
Send
Direct Chat
3
Alexander Pierce
23 Jan 2:00 pm
Is this template really for free? That’s unbelievable!
Sarah Bullock
23 Jan 2:05 pm
You better believe it!
Send
Direct Chat
3
Alexander Pierce
23 Jan 2:00 pm
Is this template really for free? That’s unbelievable!
Sarah Bullock
23 Jan 2:05 p
You better believe it!
Send
Direct Chat Markup
<!– Construct the box with style you want. Here we are using box-danger –>
<!– Then add the class direct-chat and choose the direct-chat-* contexual class –>
<!– The contextual class should match the box, so we are using direct-chat-danger –>
<div class=”box box-danger direct-chat direct-chat-danger”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Direct Chat</h3>
<div class=”box-tools pull-right”>
<span data-toggle=”tooltip” title=”3 New Messages” class=”badge bg-red”>3</span>
<button class=”btn btn-box-tool” data-widget=”collapse”><i class=”fa fa-minus”></i></button>
<!– In box-tools add this button if you intend to use the contacts pane –>
<button class=”btn btn-box-tool” data-toggle=”tooltip” title=”Contacts” data-widget=”chat-pane-toggle”><i class=”fa fa-comments”></i></button>
<button class=”btn btn-box-tool” data-widget=”remove”><i class=”fa fa-times”></i></button>
</div>
</div><!– /.box-header –>
<div class=”box-body”>
<!– Conversations are loaded here –>
<div class=”direct-chat-messages”>
<!– Message. Default to the left –>
<div class=”direct-chat-msg”>
<div class=”direct-chat-info clearfix”>
<span class=”direct-chat-name pull-left”>Alexander Pierce</span>
<span class=”direct-chat-timestamp pull-right”>23 Jan 2:00 pm</span>
</div><!– /.direct-chat-info –>
<img class=”direct-chat-img” src=”../dist/img/user1-128×128.jpg” alt=”message user image”><!– /.direct-chat-img –>
<div class=”direct-chat-text”>
Is this template really for free? That’s unbelievable!
</div><!– /.direct-chat-text –>
</div><!– /.direct-chat-msg –>
<!– Message to the right –>
<div class=”direct-chat-msg right”>
<div class=”direct-chat-info clearfix”>
<span class=”direct-chat-name pull-right”>Sarah Bullock</span>
<span class=”direct-chat-timestamp pull-left”>23 Jan 2:05 pm</span>
</div><!– /.direct-chat-info –>
<img class=”direct-chat-img” src=”../dist/img/user3-128×128.jpg” alt=”message user image”><!– /.direct-chat-img –>
<div class=”direct-chat-text”>
You better believe it!
</div><!– /.direct-chat-text –>
</div><!– /.direct-chat-msg –>
</div><!–/.direct-chat-messages–>
<!– Contacts are loaded here –>
<div class=”direct-chat-contacts”>
<ul class=”contacts-list”>
<li>
<a href=”#”>
<img class=”contacts-list-img” src=”../dist/img/user1-128×128.jpg” alt=”Contact Avatar”>
<div class=”contacts-list-info”>
<span class=”contacts-list-name”>
Count Dracula
<small class=”contacts-list-date pull-right”>2/28/2015</small>
</span>
<span class=”contacts-list-msg”>How have you been? I was…</span>
</div><!– /.contacts-list-info –>
</a>
</li><!– End Contact Item –>
</ul><!– /.contatcts-list –>
</div><!– /.direct-chat-pane –>
</div><!– /.box-body –>
<div class=”box-footer”>
<div class=”input-group”>
<input type=”text” name=”message” placeholder=”Type Message …” class=”form-control”>
<span class=”input-group-btn”>
<button type=”button” class=”btn btn-danger btn-flat”>Send</button>
</span>
</div>
</div><!– /.box-footer–>
</div><!–/.direct-chat –>
Of course you can use direct chat with a solid box by adding the class solid-box to the box. Here are a couple of examples:
Direct Chat in a Solid Box
3
Alexander Pierce
23 Jan 2:00 pm
Is this template really for free? That’s unbelievable!
Sarah Bullock
23 Jan 2:05 pm
You better believe it!
Send
Direct Chat in a Solid Box
3
Alexander Pierce
23 Jan 2:00 pm
Is this template really for free? That’s unbelievable!
Sarah Bullock
23 Jan 2:05 pm
You better believe it!
Send
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164535.html原文链接：https://javaforall.cn
