Bootstrap框架初体验——管理系统界面

简介

引入Bootstrap

         准备工作

常用方法

其他方法

实现引入Bootstrap

注意

Bootstrap的网页制作

菜单响应式布局

         实现页面

导航条

下拉菜单

下拉菜单的按钮和功能

下拉菜单的内容

实现页面

滚动广告Carousel

翻页(导航)

内容

轮播方向

栅格系统布局

栅格参数

布局容器

举例

分隔线(水平线):

标签页 Tabs

标签

标签的内容

弹出框(模态框)Modal

头部(标题)

         内容

底部(按钮)

菜单定位

其他功能

代码

实现页面

参考资料


简介

Bootstrap2:支持广泛浏览器,但功能有限,目前已放弃更新。

Bootstrap3(本文使用此版本):放弃了IE7和Firefox3.x的支持;支持IE8,但其对CSS3的支持有限,效果不佳。

可以仅通过data属性就能使用所有的Bootstrap插件,无需写一行JavaScript代码,这是Bootstrap的优势。

注意:

1、Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入,就像在基本模版中所展示的一样。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

2、Bootstrap不支持IE的兼容模式,在IE中运行最新的渲染模式:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3、适配移动浏览器时,一般均需加入初始化移动浏览显示:

<meta name="viewport" content="width=device-width, initial-scale=1">

上面这句代码的含义:让视口的宽度等于设备实际的物理分辨率。

width=device-width <!--页面宽度=设备的宽度-->
initial-scale=1 <!--页面首次载入的缩放比例-->

引入Bootstrap

准备工作

常用方法

我只试过这两种方法:

1、官网下载Bootstrap文件,将HTML放置于Bootstrap的目录,并在代码中引入。文件结构如下:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

2、官网复制Bootstrap文件的链接,并在代码中引入。

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

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

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

注意:CSS放于<head>,JS放于<body>的最下方。

其他方法

1、通过 Bower 进行安装

$ bower install bootstrap

2、通过 npm 进行安装

$ npm install bootstrap@3

3、通过 Composer 进行安装

$ composer require twbs/bootstrap

实现引入Bootstrap

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index</title>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

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

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

<style>
</style>
</head>
<body>

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

</body>
</html>

注意

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

1、版本低于IE9时,第一个js:IE8对HTML5标签进行支持;第二个js:IE8对媒体查询进行支持。

2、html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

Bootstrap的网页制作

菜单响应式布局

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

其中,这部分实现了菜单响应式布局:

                ... ...

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

                ... ...

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

实现页面

导航条

导航条依赖JavaScript,响应式导航条依赖折叠(collapese)插件。

Collapse包含在Bootstrap中。

如果不支持JavaScript,那么响应式导航条也就不被支持。

下拉菜单

下拉菜单的按钮和功能

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>

下拉菜单的内容

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>

注意:divider为分隔线的实现。

<li role="separator" class="divider"></li>

实现页面

滚动广告Carousel

翻页(导航)

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

          ... ...

内容

            ... ...

<!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

            ... ...

轮播方向

            ... ...

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

            ... ...

栅格系统布局

简单来说,即页面横向等分为12份。

栅格参数

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。如下图所示。
引自:官方文档

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类,分别为.container和.container-fluid。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。引自:官方文档

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

举例

也正是以上这两个部分,使得响应式布局得以实现。

上图界面布局的实现代码为:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

分隔线(水平线):

<hr>,以在哪一个container中来控制长度。

标签页 Tabs

不用写JavaScript代码,只需要将页面元素指定data-toggle=“tab”,为ul添加nav和nav-tabs class。

标签

            ... ...

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

            ... ...

标签的内容

            ... ...

<!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

            ... ...

弹出框(模态框)Modal

头部(标题)

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      
            ... ...

内容

            ... ...

      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
  
            ... ...

底部(按钮)

            ... ...

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

菜单定位

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

其他功能

详细的可以参照官方帮助文档,内容很丰富也很详细。

在此提供一下大概的目录,写代码时便于查找。

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>某管理系统</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
div{
    #border:solid 1px;
}

button{
    width:70px;
    height:30px;
}

.mytitle{
    font-size:26px;
    padding-top:20px;
}

.myhr{
    margin-top:0px;
}

.myright{
    float:right;
}

.mybtn{
    width:100px;
}

.mybtn2{
    width:120px;
}

.myprogress{
    
    margin-top:10px;
}

.mynavi{
    height:700px;
    background-color:lightgray;
    padding-top:20px;
}

.mynavi0{
    height:100%;
    margin-top:-20px;
    background-color:lightgray;
}
.mynavitop{
    #padding-bottom:0px;
    #background-color:black;
}
.myblack{
    background-color:#1C1C1C;
}
</style>
</head>
<body>
<div>
    <div class="mynavitop"><!--导航-->
        <nav class="navbar navbar-default myblack">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">...</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">某管理系统</a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only"> </span></a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">d</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">e</a></li>
                  </ul>
                </li>
                <li><a href="#">帮助</a></li>
              </ul>
              <form class="navbar-form navbar-right">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="密码">
                </div>
                <button type="submit" class="btn btn-default">登录</button>
              </form>
              <!--<ul class="nav navbar-nav navbar-right">
                <li><a href="#">首页</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">d</a></li>
                  </ul>
                </li>
              </ul>-->
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div>
    <div class="mynavi0">
        <div class="mynavi col-md-3 "><!--左侧导航-->
            <ul class="nav nav-pills nav-stacked">
              <li role="presentation" class="active"><a href="#">首页</a></li>
              <li role="presentation"><a href="#"></a></li>
              <li role="presentation"><a href="#">信息建立</a></li>
              <li role="presentation"><a href="#">信息查询</a></li>
              <li role="presentation"><a href="#">信息管理</a></li>
              <li role="presentation"><a href="#"></a></li>
              <li role="presentation"><a href="#">设置</a></li>
              <li role="presentation"><a href="#">帮助</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="mytitle">管理控制台<hr class="myhr"></div>
            <div style="margin-bottom:10px"><!-- 标签 -->
                <!-- Standard button -->
                <button type="button" class="btn btn-default">操作1</button>
                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                <button type="button" class="btn btn-primary">操作2</button>
                <!-- Indicates a successful or positive action -->
                <button type="button" class="btn btn-success">操作3</button>
                <!-- Contextual button for informational alert messages -->
                <button type="button" class="btn btn-info">操作4</button>
                <!-- Indicates caution should be taken with this action -->
                <button type="button" class="btn btn-warning">操作5</button>
                <!-- Indicates a dangerous or potentially negative action -->
                <button type="button" class="btn btn-danger">操作6</button>
                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
            </div>
            <div>
                <div>
                    <div class="col-md-6"><!--c1-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">最新提醒</div>
                            <div class="panel-body">
                                <div class="alert alert-success" role="alert"><b>提示</b> 您的订单(1234)已通过审核!</div>
                                <div class="alert alert-danger" role="alert"><b>提示</b> 您的订单(45678)已通过审核!</div>
                                <div class="alert alert-warning" role="alert"><b>提示</b> 您的订单(12121212)已通过审核!</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"><!--c2-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">我的任务</div>
                            <div class="panel-body">
                                <div class="alert alert-info" role="alert">订单审批<span class="badge myright">42</span></div>
                                <div class="alert alert-info" role="alert">收款确认<span class="badge myright">20</span></div>
                                <div class="alert alert-info" role="alert">付款确认<span class="badge myright">10</span></div>
                            </div>
                        </div>
                        
                  </div>
                </div>
                <div>
                    <div class="col-md-6"><!--c3-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">最新订单</div>
                            <div class="panel-body">
                                  <!-- Table -->
                                  <table class="table table-striped">
                                      <tr>
                                          <th>#</th>
                                          <th>产品</th>
                                          <th>数量</th>
                                          <th>总金额</th>
                                          <th>业务员</th>
                                      </tr>
                                      <tr>
                                          <td>1</td>
                                          <td>Mac</td>
                                          <td>10</td>
                                          <td>10000</td>
                                          <td>张三</td>
                                      </tr>
                                      <tr>
                                          <td>2</td>
                                          <td>Apple</td>
                                          <td>20</td>
                                          <td>8000</td>
                                          <td>李四</td>
                                      </tr>
                                      <tr>
                                          <td>3</td>
                                          <td>Windows</td>
                                          <td>5</td>
                                          <td>5000</td>
                                          <td>王五</td>
                                      </tr>
                                  </table>
                                  <button type="button" class="btn btn-primary mybtn">查看详情 >></button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"><!--c4-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">工程进度</div>
                            <div class="panel-body">
                                <button type="button" class="btn btn-primary mybtn2">水井挖掘工程</button>
                                <div class="progress myprogress">
                                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only"></span>
                                  </div>
                                </div>
                                <button type="button" class="btn btn-danger mybtn">基建工程</button>
                                <div class="progress myprogress">
                                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                    <span class="sr-only"></span>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

实现页面

参考资料

内容及教程: https://www.imooc.com/learn/182

Bootstrap官方文档:https://v3.bootcss.com/


有缘看到的小伙伴,给人家点个赞呗~么么哒❤

发布了8 篇原创文章 · 获赞 15 · 访问量 348

猜你喜欢

转载自blog.csdn.net/qq_25742923/article/details/104548608