Adminlte的使用理解

官方使用文档：https://adminlte.io/docs

一、简介
1、
2、引入

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

3、共用元素
颜色：

颜色	代码
灰色	default
红色	danger
绿色	success
橙色	warning
浅蓝	info
深蓝	primary

default
二、常用模块
1、 box
一个简单的box，包括头部、内容、底部三部分

                    <div class="box" style="margin-top: 20px;">
						<div class="box-header">
							这是盒状布局头部
						</div>
						<div class="box-body">
							这是内容区
						</div>
						<div class="box-footer">
							这是底部
						</div>
					</div>

示例：
.box-primary .box-danger 等等，与.box样式更改盒子顶部颜色
.with-border 与box-header搭配可增加头部边框。
在box的头部区添加<div class="box-tools pull-right"></div>增加盒子工具。

 <div class="box box-danger" style="margin-top: 20px;">
						<div class="box-header with-border">
							这是盒状布局头部
							<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>
						<div class="box-body">
							这是内容区
						</div>
						<div class="box-footer">
							这是底部
						</div>
					</div>

示例：

头部条及多个盒子工具

<div class="box box-danger box-solid" style="margin-top: 20px;">
						<div class="box-header with-border">
							这是盒状布局头部
							<div class="box-tools pull-right">
								<!-- 盒子工具条 -->
								 <span class="label label-default">标签</span>
                 <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="折叠"><i class="fa fa-minus"></i></button>
                 <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="删除"><i class="fa fa-times"></i></button>
              </div><!-- /.box-tools -->
						</div>
						<div class="box-body">
							这是内容区
						</div>
						<div class="box-footer">
							这是底部
						</div>
					</div>

示例：

加载状态及搜索工具
只要在box中添加<div class="overlay"> <i class="fa fa-refresh fa-spin"></i></div>，与header、body、footer同级便可以变为加载状态。

<div class="box box-danger box-solid" style="margin-top: 20px;">
						<div class="box-header with-border">
							这是盒状布局头部
							<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 text-black"></span>
									 
                </div>
              </div><!-- /.box-tools -->
						</div>
						<div class="box-body">
							这是内容区
						</div>
						<div class="box-footer">
							这是底部
						</div>
						<div class="overlay">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
					</div>

示例：

2、info-box（图标区+内容区）
第一种：

                <!-- 信息盒子 -->
				<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">企业数量</span>
						<span class="info-box-number">999,139家</span>
					</div><!-- /.info-box-content -->
				</div><!-- /.info-box -->

示例：

第二种：标题加描述

<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">关注</span>
    <span class="info-box-number">41,410</span>
    <!-- The progress section is optional -->
    <div class="progress">
      <div class="progress-bar" style="width: 50%"></div>
    </div>
    <span class="progress-description">
      一个月内增加了30%
    </span>
  </div><!-- /.info-box-content -->
</div><!-- /.info-box -->

示例：

3、small-box

<div class="small-box bg-red">
	<div class="inner">
		<h3>150</h3>

		<p>新订单</p>
	</div>
	<div class="icon">
		<i class="fa fa-shopping-cart"></i>
	</div>
	<a href="#" class="small-box-footer">
    更多信息 <i class="fa fa-arrow-circle-right"></i>
	</a>
</div>

示例：

4、用户信息盒子

<div class="box box-widget widget-user">
	<!-- Add the bg color to the header using any of the bg-* classes -->
	<!-- 背景图片 -->
	<div class="widget-user-header bg-black" style="background: url('../../dist/img/photo1.png') center center;">
		<h3 class="widget-user-username">木子李</h3>
		<h5 class="widget-user-desc">网站设计师</h5>
	</div>
	<div class="widget-user-image">
	    <!-- 用户头像 -->
		<img class="img-circle" src="../../dist/img/user3-128x128.jpg" alt="User Avatar">
	</div>
	<div class="box-footer">
		<div class="row">
			<div class="col-sm-4 border-right">
				<div class="description-block">
					<h5 class="description-header">3,200</h5>
					<span class="description-text">金币</span>
				</div>
				<!-- /.description-block -->
			</div>
			<!-- /.col -->
			<div class="col-sm-4 border-right">
				<div class="description-block">
					<h5 class="description-header">13,000</h5>
					<span class="description-text">粉丝</span>
				</div>
				<!-- /.description-block -->
			</div>
			<!-- /.col -->
			<div class="col-sm-4">
				<div class="description-block">
					<h5 class="description-header">35</h5>
					<span class="description-text">项目</span>
				</div>
				<!-- /.description-block -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</div>
</div>

示例：

5、小窗口盒子

<div class="box box-widget">
	<div class="box-header with-border">
		<div class="user-block">
			<img class="img-circle" src="../../dist/img/user1-128x128.jpg" alt="User Image">
			<span class="username"><a href="#">亚索</a></span>
			<span class="description">所有人可见 - 今天上午 7：30</span>
		</div>
		<!-- /.user-block -->
		<div class="box-tools">
			<button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="标记已读">
				<i class="fa fa-circle-o"></i></button>
			<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
			</button>
			<button type="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">
		<img class="img-responsive pad" src="../../dist/img/photo2.png" alt="Photo">

		<p>面对疾风吧，如此平静安详的生活才是艾欧尼亚该有的样子。</p>
		<button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> 分享</button>
		<button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> 喜欢</button>
		<span class="pull-right text-muted">127 喜欢 - 3 评论</span>
	</div>
	<!-- /.box-body -->
	<div class="box-footer box-comments">
		<div class="box-comment">
			<!-- User image -->
			<img class="img-circle img-sm" src="../../dist/img/user3-128x128.jpg" alt="User Image">

			<div class="comment-text">
						<span class="username">
							诺克萨斯
							<span class="text-muted pull-right">今天上午  8：30 </span>
						</span><!-- /.username -->
				我的大刀已经饥渴难耐了。
			</div>
			<!-- /.comment-text -->
		</div>
		<!-- /.box-comment -->
		<div class="box-comment">
			<!-- User image -->
			<img class="img-circle img-sm" src="../../dist/img/user4-128x128.jpg" alt="User Image">
			<div class="comment-text">
						<span class="username">
							德玛西亚
							<span class="text-muted pull-right">今天上午 8：30</span>
						</span><!-- /.username -->
				德玛西亚的光辉将笼罩天下。
			</div>
		</div>
		<!-- /.box-comment -->
	</div>
	<!-- /.box-footer -->
	<div class="box-footer">
		<form action="#" method="post">
			<img class="img-responsive img-circle img-sm" src="../../dist/img/user4-128x128.jpg" alt="Alt Text">
			<div class="img-push">
				<input type="text" class="form-control input-sm" placeholder="请输入评论...">
			</div>
		</form>
	</div> 
	<!-- /.box-footer -->
</div>

示例：

6、对话框盒子

<div class="box box-danger direct-chat direct-chat-danger">
  <div class="box-header with-border">
    <h3 class="box-title">聊天框</h3>
    <div class="box-tools pull-right">
      <span data-toggle="tooltip" title="3个新信息" 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">赵信</span>
          <span class="direct-chat-timestamp pull-right">1月23日  下午2:00</span>
        </div><!-- /.direct-chat-info -->
        <img class="direct-chat-img" src="../../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
        <div class="direct-chat-text bg-blue">
         德玛西亚皇子被抓了
        </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">盖伦</span>
          <span class="direct-chat-timestamp pull-left">1月23日 下午2:23</span>
        </div><!-- /.direct-chat-info -->
        <img class="direct-chat-img" src="../../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          我打不过乌鸦，吸血太猛了
        </div><!-- /.direct-chat-text -->
      </div><!-- /.direct-chat-msg -->
    </div><!--/.direct-chat-messages-->

    <!-- 联系人 -->
    <div class="direct-chat-contacts">
      <ul class="contacts-list">
        <li>
          <a href="#">
            <img class="contacts-list-img" src="../../dist/img/user1-128x128.jpg" alt="Contact Avatar">
            <div class="contacts-list-info">
              <span class="contacts-list-name">
                赵信
                <small class="contacts-list-date pull-right">2019/9/9</small>
              </span>
              <span class="contacts-list-msg">走，草丛阴人去</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="键入信息 ..." class="form-control">
      <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-flat">发送</button>
      </span>
    </div>
  </div><!-- /.box-footer-->
</div><!--/.direct-chat -->

示例：