前端之Bootstrap

本是古典何须时尚 2023-08-17 17:18 124阅读 0赞

## Bootstrap介绍 ##

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

就是复制黏贴一把梭，html\\css\\js代码的封装组合

## 为什么要使用Bootstrap？ ##

在Bootstrap出现之前：

命名：重复、复杂、无意义

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。

## Bootstrap下载 ##

官方地址：[https://getbootstrap.com][https_getbootstrap.com]

中文地址：[http://www.bootcss.com/][http_www.bootcss.com]

使用V3版本的Bootstrap，下载的是用于生产环境的Bootstrap。

## Bootstrap环境搭建 ##

目录结构：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

bootstrap-3.3.7-dist/ 
    ├── css  // CSS文件
    │   ├── bootstrap-theme.css  // Bootstrap主题样式文件,官方提供的，一般不用
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
    │   ├── bootstrap-theme.min.css.map
    │   ├── bootstrap.css  //引用的时候，引用这一个或者下面那个bootstrap.min.css文件就可以了
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css  // 核心CSS样式压缩文件，其他的文件都是在这个核心文件的基础上加了一些其他的样式
    │   └── bootstrap.min.css.map
    ├── fonts  // 字体文件
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js  // JS文件
        ├── bootstrap.js
        ├── bootstrap.min.js  // 核心JS压缩文件
        └── npm.js

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

引入：

将下载解压的那个文件夹放到我们的项目目录下就能够使用了

![988061-20190212154036868-1603171112.png][]

可以把主题那些你用不到的css等文件删除。

然后引入一下就能用了，很简单

![988061-20190212154159596-971708048.png][]

## Bootstrap全局样式 ##

![988061-20190212150207724-96437654.png][]

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

基础模板：简单看看结构

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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>Bootstrap 101 Template</title>
    
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
        
        
        
      </head>
      <body>
        <h1>你好，世界！</h1>
    
        
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
      </body>
    </html>

![988061-20190212155314635-1174684386.png][]

想让手机端能够显示完整的页面，就需要写上

![988061-20190212160127448-140756534.png][]

使用栅格进行布局的时候注意人家bootstrap官网里面写的要求：写法就按照下面的来，写到布局容器里面，列是行里面的元素。

![988061-20190212160720357-328395774.png][]

效果：

![988061-20190212160813218-2044476748.png][]

如果里面的列元素没有占满12份，那么右边就会空出来几份的宽度。

![988061-20190212161105807-909503549.png][]

![img][]

还有：

![988061-20190212161304815-1598512867.png][]

列偏移

关于媒体查询：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;
            }
            .c1 {
                background-color: red;
                height: 200px;
            }
            /*媒体查询，捕捉显示屏幕的宽度，来显示不同的定制效果*/
            @media screen and (max-width: 700px) {
                .c1 {
                    background-color: green;
                }
            }
        </style>
    </head>
    <body>
    
    <div class="c1">
    
    </div>
    </body>
    </html>

媒体查询的使用

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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>Bootstrap 101 Template</title>
    
        
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    
        <style>
            #con1{
          
                /*background-color: red;*/
                /*height: 600px;*/
            }
            .c1{
                background-color: red;
                height: 40px;
            }
            .c2{
                background-color: green;
                height: 40px;
            }
            @media screen and (min-width: 700px) {
                .c1{
                    background-color: yellow;
                    height: 40px;
                }
                .c2{
                    background-color: blue;
                    height: 40px;
                }
            }
    
    
        </style>
    
    </head>
    <body>
    
    
    
    
    
        
            
    
            
            
    
            
        
    
    
    <div id="con1" class="container-fluid">
        <div class="row">
            <div class="col-md-2 col-xs-2 c1 col-md-offset-1 col-xs-offset-1">
    
            </div>
            <div class="col-md-8 col-xs-8 c2">
    
            </div>
        </div>
    
    </div>
    
    
    <script src="jquery.js"></script>
    
    <script src="bootstrap/js/bootstrap.js"></script>
    </body>
    </html>

### 标题相关 ###

**标题**

**副标题**

<h1>一级标题<small>小标题</small></h1>

### **文本对齐** ###

<p class="text-left">文本左对齐</p>
    <p class="text-center">文本居中</p>
    <p class="text-right">文本右对齐</p>

### **文本大小写** ###

<p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>

### **表格** ###

<table> 
 <thead> 
  <tr> 
   <th><span><span>CLASS</span></span></th> 
   <th><span><span>描述</span></span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span><span>.table-striped</span></span></td> 
   <td><span><span>条纹状表格</span></span></td> 
  </tr> 
  <tr> 
   <td><span><span>.table-bordered</span></span></td> 
   <td><span><span>带边框的表格</span></span></td> 
  </tr> 
  <tr> 
   <td><span><span>.table-hover</span></span></td> 
   <td><span><span>鼠标悬停变色的表格</span></span></td> 
  </tr> 
  <tr> 
   <td><span><span>.table-condensed</span></span></td> 
   <td><span><span>紧缩型表格</span></span></td> 
  </tr> 
  <tr> 
   <td><span><span>.table-responsive</span></span></td> 
   <td><span><span>响应式表格</span></span></td> 
  </tr> 
 </tbody> 
</table>

### **状态类** ###

<table> 
 <thead> 
  <tr> 
   <th><span><span>CLASS</span></span></th> 
   <th><span><span>描述</span></span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span><code>.active</code></span></td> 
   <td><span><span>鼠标悬停在行或单元格上时所设置的颜色</span></span></td> 
  </tr> 
  <tr> 
   <td><span><code>.success</code></span></td> 
   <td><span><span>标识成功或积极的动作</span></span></td> 
  </tr> 
  <tr> 
   <td><span><code>.info</code></span></td> 
   <td><span><span>标识普通的提示信息或动作</span></span></td> 
  </tr> 
  <tr> 
   <td><span><code>.warning</code></span></td> 
   <td><span><span>标识警告或需要用户注意</span></span></td> 
  </tr> 
  <tr> 
   <td><span><code>.danger</code></span></td> 
   <td><span><span>标识危险或潜在的带来负面影响的动作</span></span></td> 
  </tr> 
 </tbody> 
</table>

### **表单** ###

内联表单

表单状态

带图标的表单

### **按钮** ###

<a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

按钮样式

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<button type="button" class="btn btn-default">（默认样式）Default</button>
    
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    
    <button type="button" class="btn btn-success">（成功）Success</button>
    
    <button type="button" class="btn btn-info">（一般信息）Info</button>
    
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    
    <button type="button" class="btn btn-danger">（危险）Danger</button>
    
    <button type="button" class="btn btn-link">（链接）Link</button

按钮大小

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<p>
      <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
      <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
      <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
      <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
      <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
    </p>

### **图片** ###

图片形状

### **辅助类** ###

文本颜色

背景颜色

关闭按钮

下拉三角

快速浮动

内容块居中

清除浮动

<div class="clearfix">...</div>

显示与隐藏

bootstrap写一个简单的登陆页面：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
        <style>
            body {
                background-color: #eeeeee;
            }
        </style>
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 70px">
                <h2 class="text-center">欢迎登录</h2>
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">邮箱</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        <span class="help-block"></span>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        <span class="help-block"></span>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 记住
                        </label>
                    </div>
                    <button type="submit" id="login-btn" class="btn btn-success btn-block">登录</button>
                </form>
            </div>
        </div>
    </div>
    
    <script src="jquery.js"></script>
    <script>
        // 给登录按钮绑定点击事件
        $('#login-btn').click(function () {
            // 定义一个是否允许提交的标志位
             var flag = true;
            // 1. 找到登录框中所有的input框，判断值是否为空
            $('form input').each(function () {
                var value = $(this).val();
                if (value.length===0){
                    // 2. 为空就显示提示信息
                    // 2.1 给下面的span标签设置文本提示信息
                    var errMsg = $(this).prev().text() + '不能为空';
                    $(this).next().text(errMsg);
                    // 2.2 给父标签设置has-error的样式
                    $(this).parent().addClass('has-error');
                    // 2.3 阻止表单提交
                    flag = false;
                    return false;
                }
            });
            return flag;
        });
    
        // 给input框绑定focus事件
        $('form input').focus(function () {
            // 1. 去掉当前input框后面的span标签的文本
            $(this).next().text('');
            // 2. 去掉父标签的has-error样式
            $(this).parent().removeClass('has-error');
        })
    </script>
    </body>
    </html>

## 常用Bootstrap组件 ##

（就是一些搭配起来的效果，也涉及到一些动作相关的，所以需要引入js文件了）

1.  字体图标(fontawesome里面比较全)
2.  下拉菜单
3.  按钮组
4.  输入框俎
5.  导航
6.  分页
7.  标签和徽章
8.  页头
9.  缩率图
10. 进度条

![988061-20190213133732924-1770564.png][]

![988061-20190213133747628-47291732.png][]

来实现这么一个页面

![988061-20190212220303882-288963531.png][]

就在bootstrap官网的全局css样式里面的右边这个地方找你需要使用的功能。

![988061-20190212220418125-970451954.png][]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h1>信息收集卡
                        <small>共三步</small>
                    </h1>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                         aria-valuemax="100" style="width: 33.33%;">
                        1/3
                    </div>
                </div>
                
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
    
                    </div>
                    <div class="panel-body">
                        
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="inputEmail1" class="col-sm-2 control-label">Email</label>
                                <div class="col-sm-4">
                                    <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword2" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-4">
                                    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                                <div class="col-sm-4">
                                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-4">
                                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputFile" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-4">
                                    <input type="file" class="" id="inputFile" placeholder="Password">
                                    <span class="help-block">只支持png</span>
                                </div>
                            </div>
                            <hr>
                            <div class="form-group">
                                <div class="col-sm-2 control-label">属性</div>
                                <div class="col-sm-4">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                                   checked>
                                            我是一个好人
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                             我是一个坏人
                                        </label>
                                    </div>
                                    <div class="radio disabled">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
                                                   disabled>
                                            我不是一个人
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div>
                    <button class="btn btn-success pull-right">下一步</button>
                </div>
            </div>
        </div>
    </div>
    
    
    <script src="jquery.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
    </body>
    </html>

模拟滚动的进度条：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

关于fontawesome的使用

![988061-20190213131313924-840968377.png][]

下载解压，然后放到我们的项目目录里面去，直接引用就行了

![988061-20190213131401354-2118848621.png][]

css文件夹和fonts文件夹必须是同一级目录，因为那个css里面的内容就是通过相对路径来找fonts里面的内容的

![988061-20190213131616708-565710695.png][]

找个微信图标看看：

![988061-20190213131941249-1526267016.png][]

![988061-20190213131755756-1544951964.png][]

![988061-20190213132014608-118857166.png][]

再看看font awesome里面的一些用法，比bootstrap里面的图标用起来更高级一些，并且和bootstrap完美兼容。

![988061-20190213133239959-1152513839.png][]

![988061-20190213133247194-803116647.png][]

pycharm中设置HTML的模板样式：

![988061-20190213145943906-726201258.png][]

京东的标签页：

![988061-20190213150256493-216740084.png][]

![988061-20190213150306012-1773504873.png][]

![988061-20190213150350544-872767775.png][]

标签页示例：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    </head>
    <body>
    
    
    <div class="container">
        <div>
            
            <ul class="nav nav-tabs nav-justified" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">主页</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">详情页</a>
                </li>
                <li role="presentation">
                    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">售后服务</a>
                </li>
                <li role="presentation">
                    <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">评论专区</a>
                </li>
            </ul>
    
            
            <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>
    
        </div>
    </div>
    <script src="jquery.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
    </body>
    </html>

巨幕：

![988061-20190213153643468-2003875814.png][]

进度条

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    </head>
    <body>
    
    
    <div class="container">
        <div class="progress">
          <div id="p1" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 2%">
            0%
          </div>
        </div>
        <button class="btn btn-success btn-sm" id="b1">开始</button>
    </div>
    
    
    <script src="jquery.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
    <script>
            var n = 0;
            var t;
        // jQuery操作标签的CSS属性
            function foo(){
                $('#p1').css('width', n+'%').text(n+'%');
                n += 1;
                if (n > 100){
                    clearInterval(t);
                }
            }
        // 点击开始按钮，让滚动条滚动起来
        $('#b1').click(function () {
            // 每隔一秒钟执行一下上面的代码
            t = setInterval(foo, 100);
        });
    
    </script>
    </body>
    </html>

保存网页的方法：

![988061-20190213162853903-590732687.png][]

![988061-20190213163119421-1139294081.png][]

## 响应式开发 ##

### 为什么要进行响应式开发？ ###

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

### 什么是响应式？ ###

利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

### **用到的技术：** ###

**CSS3@media查询**

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性：

1.device-width, device-height 屏幕宽、高

2.width,height 渲染窗口宽、高

3.orientation 设备方向

4.resolution 设备分辨率

语法：

@media mediatype and|not|only (media feature) {
        CSS-Code;
    }

不同的媒体使用不同的stylesheet

**viewport**

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

*  width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
 *  height：和 width 相对应，指定高度。
 *  initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
 *  maximum-scale：允许用户缩放到的最大比例。
 *  minimum-scale：允许用户缩放到的最小比例。
 *  user-scalable：用户是否可以手动缩放。

**Bootstrap的栅格系统**

*  container
 *  row
 *  column

注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

## JavaScript插件 ##

[常用的Bootstrap自带插件][Bootstrap]

[其他常用插件][Link 1]

## Bootstrap实例精选： ##

*  封面图
 *  Carousel
 *  博客页面
 *  控制台
 *  登录页
 *  Offcanvas

**补充一些内容：**

pycharm如何连接上数据库

![988061-20190213122246384-1299651798.png][]

![988061-20190213122336693-400210768.png][]

![988061-20190213122418613-1162456324.png][]

![988061-20190213122550283-1840700978.png][]

![988061-20190213122634987-953835999.png][]

然后就可以在pycharm上看到这个库和里面的表了

![988061-20190213122727952-532451495.png][]

![988061-20190213122930783-822988179.png][]

还可以在里面写sql语句

![988061-20190213123412678-1864001066.png][]

设计三张表，书籍、作者、出版社，方便之后django的学习：

![988061-20190213123258158-316793110.png][]

![988061-20190213124824441-1903259483.png][]

通过sql语句将表和表关系创建出来(使用上foreign key)

![988061-20190213125401348-808152711.png][]

![988061-20190213125417339-1866473179.png][]

修改成下面这样的效果

![988061-20190213171823109-1386351672.png][]

转载于:https://www.cnblogs.com/sundawei7/p/11558149.html

[https_getbootstrap.com]: https://getbootstrap.com
[http_www.bootcss.com]: http://www.bootcss.com/
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230808/fcedb393c55942408e59e1b0070926bb.png
[988061-20190212154036868-1603171112.png]: /images/20230808/d3f859d8ea2c4c5b9e170aecb1436ca4.png
[988061-20190212154159596-971708048.png]: /images/20230808/00c4c89a15ea40a0a54785b90c77dc05.png
[988061-20190212150207724-96437654.png]: /images/20230808/8e725b1d48124407864f313f6ece213c.png
[988061-20190212155314635-1174684386.png]: /images/20230808/c02b482cd6a14e50881299fae41a28f0.png
[988061-20190212160127448-140756534.png]: /images/20230808/f8627ce2a5834949b2b9f6d74ca0023d.png
[988061-20190212160720357-328395774.png]: /images/20230808/356d349c57a14d04a0debc6611b6495b.png
[988061-20190212160813218-2044476748.png]: /images/20230808/be7603f1d7314bc4ae65b11e5cdc9e7a.png
[988061-20190212161105807-909503549.png]: /images/20230808/b9bbb0f038e24a1dac88cbcb23d32c12.png
[img]: /images/20230808/5a0453ca3a794b87b8bd92128f72049f.png
[988061-20190212161304815-1598512867.png]: /images/20230808/640a1957b61842259befe16c905b1a28.png
[988061-20190213133732924-1770564.png]: /images/20230808/427fca94ea5040ae83ca6eeb20d7181f.png
[988061-20190213133747628-47291732.png]: /images/20230808/93a89f3012e547eb97db6118ee818298.png
[988061-20190212220303882-288963531.png]: /images/20230808/67c249ff91ea4ed1b78d21fdb2983bbd.png
[988061-20190212220418125-970451954.png]: /images/20230808/545b77e038f14200946cc5fd74d9931a.png
[988061-20190213131313924-840968377.png]: /images/20230808/2d19835346a2430e9d8ef88cf2b758e4.png
[988061-20190213131401354-2118848621.png]: /images/20230808/3c7ef832bdd642ccbac37639c13dbef8.png
[988061-20190213131616708-565710695.png]: /images/20230808/8abc7325f4e74483b2fa4fcf1b354cc5.png
[988061-20190213131941249-1526267016.png]: /images/20230808/abaee454bc4b4994a91203d245d04bdd.png
[988061-20190213131755756-1544951964.png]: /images/20230808/039cf4a43a6e445c87556a4f95e2e33c.png
[988061-20190213132014608-118857166.png]: /images/20230808/083c2dbd16f54e219ba47ca1b02d605e.png
[988061-20190213133239959-1152513839.png]: /images/20230808/57308c1544cd4d71ac316ff437d0323b.png
[988061-20190213133247194-803116647.png]: /images/20230808/ea30f63c545848a5bed028e8c86a1282.png
[988061-20190213145943906-726201258.png]: /images/20230808/7ed2b99462e84a8ead18942c6fc11d99.png
[988061-20190213150256493-216740084.png]: /images/20230808/d1466f1ad57046208ee35469111ef885.png
[988061-20190213150306012-1773504873.png]: /images/20230808/1694829e7f624c71ac6d0f52df687210.png
[988061-20190213150350544-872767775.png]: /images/20230808/64c4da1963554775822123b31efd6bda.png
[988061-20190213153643468-2003875814.png]: /images/20230808/e3ccc27f93644a8b87d906a555ea1eca.png
[988061-20190213162853903-590732687.png]: /images/20230808/8e76e2ee54974d548aeb817492ab8954.png
[988061-20190213163119421-1139294081.png]: /images/20230808/0c83e4465b5d45bba8df36658145373d.png
[Bootstrap]: http://www.cnblogs.com/liwenzhou/articles/8243227.html
[Link 1]: http://www.cnblogs.com/liwenzhou/articles/8243279.html
[988061-20190213122246384-1299651798.png]: /images/20230808/41bfdb9db52f447a9b7cc8c455cda439.png
[988061-20190213122336693-400210768.png]: /images/20230808/aba3e51cca7d4e1cac5b568cd79970fc.png
[988061-20190213122418613-1162456324.png]: /images/20230808/69d9b2cdaa05423aa96d87bf8d655542.png
[988061-20190213122550283-1840700978.png]: /images/20230808/fdb66388a8b84ad699488435de01a191.png
[988061-20190213122634987-953835999.png]: /images/20230808/9342d88235a94cf78b941cd00033da4e.png
[988061-20190213122727952-532451495.png]: /images/20230808/8550f3d4241a40f6b6242ba9f9b92ffd.png
[988061-20190213122930783-822988179.png]: /images/20230808/4ee336de674e467a855d7d01b13cc157.png
[988061-20190213123412678-1864001066.png]: /images/20230808/e8baa4cda6e843d98f716f7a13ecb772.png
[988061-20190213123258158-316793110.png]: /images/20230808/815f78d77588424794e0fbd4669cc1e1.png
[988061-20190213124824441-1903259483.png]: /images/20230808/fb942f564a7c4430b380d30bdedc1b73.png
[988061-20190213125401348-808152711.png]: /images/20230808/8863297d299d4e89b65a5faba964f339.png
[988061-20190213125417339-1866473179.png]: /images/20230808/3bc0fcc449024d36963945d6b60d615e.png
[988061-20190213171823109-1386351672.png]: /images/20230808/9540570395d54d2783c1b0666fc720db.png