web前端【第十四篇】Bootstrap簡單使用

阿新 • • 發佈：2018-02-20

app sweet utf 常用插件 ctype deb mat 巨幕 blog

一、一個小知識點

1、截取長屏的操作

技術分享圖片

2、設置默認格式

技術分享圖片

3、md，sm， xs

技術分享圖片

4、空格和沒有空格的選擇器

技術分享圖片

二、響應式介紹

- 響應式布局是什麽？
　　同一個網頁在不同的終端上呈現不同的布局等
- 響應式怎麽實現的？
　　1. CSS3 media query 媒體查詢
　　2. JS去控制網頁的布局和樣式等
　　　　- 缺點：工作量大，網頁響應慢
　　　　- 優點：專治疑難雜癥
　　3. 用框架
　　　　- Bootstrap

測試用css 媒體查詢實現響應式

方式一、link.css文件

技術分享圖片

主文件中導入link.css文件

技術分享圖片

方式二、link2.css文件

技術分享圖片

在主文件中導入link2.css文件

技術分享圖片

測試用Bootstrap實現響應式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>響應式示例</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
      <style>
        body {
          overflow-x: hidden;
        }
        @media screen and (max-width: 767px) {
          .r1 {
            position: relative;
            right: 0;
            transition: all .25s ease-out;
          }
          .r1 .my-sidebar {
            right: -50%;
              /*當是小屏幕的時候先把列表組移過去*/
          }
          .r1.active {
            right: 50%;
              /*當點擊按鈕的時候在把列表組移進來*/
          }
          .my-sidebar {
            position: absolute;
            top: 0;
            width: 50%;
          }
    }
  </style>
</head>
<body>
<!--導航條-->
<nav class="navbar navbar-inverse">
    <div class="container">
        <!-- 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="#">Project name</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="#">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <div class="row r1">
        <!--左側部分-->
        <div class="col-md-9 col-sm-9" id="c1">
            <!--toggle-->
            <!--visible-xs   當屏幕是超小屏幕的時候顯示-->
            <p class="pull-right visible-xs">
                <button class="btn-xs btn btn-primary" id="togglebtn">Toggle nav</button>
            </p>
            <!--巨幕-->
            <div class="bs-example" data-example-id="simple-jumbotron">
                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
                        featured content or information.</p>
                </div>
            </div>
            <!--內容-->
            <!--分塊的內容-->
            <div class="col-md-4 col-sm-6">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                    eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-default" role="button">查看詳情>></a></p>
            </div>
             <!--分塊的內容-->
            <div class="col-md-4 col-sm-6">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                    eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-default" role="button">查看詳情>></a></p>
            </div>
             <!--分塊的內容-->
            <div class="col-md-4 col-sm-6">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                    eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-default" role="button">查看詳情>></a></p>
            </div>
             <!--分塊的內容-->
            <div class="col-md-4 col-sm-6">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                    eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-default" role="button">查看詳情>></a></p>
            </div>
             <!--分塊的內容-->
            <div class="col-md-4 col-sm-6">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                    eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-default" role="button">查看詳情>></a></p>
            </div>
            <!--分塊的內容-->
            <div class="col-md-4 col-sm-6">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                    eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-default" role="button">查看詳情>></a></p>
            </div>
        </div>
        <!--右側部分：列表組-->
        <div class="col-sm-3  my-sidebar " id="listgroup">
            <div class="list-group">
                <a href="#" class="list-group-item active">Cras justo odio</a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $("#togglebtn").on("click",function () {
            $(".r1").toggleClass("active")
        })
    });

</script>

</body>
</html>

三、常用插件

常用插件基本上都是基於jQuery ，

　　先導入插件的CSS文件

　　再導入jQuery文件

　　最後導入JS，註意jQuery是必須要放在JS上面的

1、Sweet Alert（彈出框）

  使用步驟：1下載 2解壓找到裏面的dist（主要是dist）和animate.css  3引入到自己的文件裏就行了
  註：如果是html參數就要用animate

具體例子實現

代碼實現

sweetAlert示例

<!DOCTYPE html>
<html lang="en">
<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>sweetalert2</title>
    <link rel="stylesheet" href="sweetalert2/sweetalert2.min.css">
    <link rel="stylesheet" href="animate.css">
</head>
<body>

<script src="../jquery-3.2.1.js"></script>
<script src="sweetalert2/sweetalert2.min.js"></script>

<script>
//        swal({
//            title: ‘你真的確定嗎？‘,
//            text: "當前操作是刪庫，可能你需要回去收拾一下行李，準備跑路。。。",
//            type: ‘warning‘,
//            showCancelButton: true,
//            confirmButtonColor: ‘#3085d6‘,
//            cancelButtonColor: ‘#d33‘,
//            confirmButtonText: ‘是的，我準備好離職了！‘,
//            cancelButtonText: ‘是的，我準備好離職了！‘
//            // 點擊確認按鈕後，執行這個then
//        }).then(function () {
//            // 做邏輯判斷
//            console.log("做邏輯判斷...");
//            swal(
//                ‘刪除成功!‘,
//                ‘留給你的時間不多了‘,
//                ‘success‘
//            )
//        })

//    swal({
//        title: ‘Sweet!‘,
//        text: ‘Modal with a custom image.‘,
//        imageUrl: ‘z.png‘,
//        imageWidth: 400,
//        imageHeight: 200,
//        imageAlt: ‘Custom image‘,
//        animation: false
//    })
</script>

</body>
</html>

運行結果截圖：

技術分享圖片


2、jQuery lazyload  主要是為了節省流量，點擊時才出現

  懶加載圖片例子

<!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>
</head>
<body>
<div>
  <div><img src="img/0.jpg"  class="lazy" data-original="http://pic.pptbz.com/pptpic/201511/2015110586122945.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="http://img1.bitautoimg.com/bitauto/2012/08/10/3aa9e774-574b-4165-b59a-db4f243bdc5a.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="http://dl.bizhi.sogou.com/images/2014/01/09/485496.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

3、Font Awesome 字體圖標（一般用fonts文件）

字體圖標示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>圖標示例</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="toastr/toastr.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary btn-lg"><i class="fa fa-plug" aria-hidden="true"></i>微信</button>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-1x"></i>
  <i class="fa fa-wechat fa-stack-2x"></i>
</span>
<script src="jquery-3.2.1.min.js"></script>
<script src="toastr/toastr.min.js"></script>
<script>
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": false,
        "positionClass": "toast-top-left",
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };

    toastr.info("Flatlab is an Awesome dashboard build with BS3 ", "Toastr Notification")
</script>
</body>
</html>

4、 Toastr （通知欄） 
　　 使用步驟：1下載 2解壓找到裏面的build 3引入到自己的文件裏就行了
   - 通知欄的插件

四、用Bootstrap實現的輪廓圖

技術分享圖片

//示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>輪播圖示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<!--<div class="container">-->
    <!--<div class="row">-->
        <!--<div class="col-md-12">-->
<!--在javascript插件裏面的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="img/banner_3.jpg" alt="...">
                    <div class="carousel-caption">
                        世情薄，人情惡，雨送黃昏花易落。
                    </div>
                </div>
                <div class="item">
                    <img src="img/banner_1.jpg" alt="...">
                    <div class="carousel-caption">
                        曉風幹，淚痕殘，欲箋心情，獨語斜闌， 難 難 難。
                    </div>
                </div>
                <div class="item">
                    <img src="img/banner_2.jpg" 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>
      <!--</div>-->
    <!--</div>-->
<!--</div>-->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

五、需要知道的幾個插件網址

1、SweetAlert (彈出框)：https://github.com/t4t5/sweetalert

　 2、SweetAlert2 (彈出框)：https://github.com/limonte/sweetalert2

　 3、Font Awesome（字體圖標）：http://fontawesome.io

4、jQuery lazy load（懶加載）：https://github.com/tuupola/jquery_lazyload

5、Toastr（通知欄）：http://codeseven.github.io/toastr/

六、Bootstrap網址：http://v3.bootcss.com/

有時間看一下這個網址：http://www.jq22.com/daima

七、自定義Bootstrap組件，

　　　　1、找到自定義那一頁

　　　　2、勾選我用到的組件
　　　　3、拉到最後面，點擊下載

八、Bootstrap補充：

   - modal
　　  和模態框使用的
　　  $("#myModal").modal("show")

　　- collapse ：也是在JavaScript組件中去找，點擊按鈕有信息出來

   - tooltip ： 相當於提示信息，就像是一個按鈕，指向按鈕會有提示信息

tooltip示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>按鈕提示</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<!-- HTML to write -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">指向我</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(‘.btn‘).tooltip();
</script>
</body>
</html>

web前端【第十四篇】Bootstrap簡單使用

app sweet utf 常用插件 ctype deb mat 巨幕 blog 一、一個小知識點 1、截取長屏的操作 2、設置默認格式 3、md，sm， xs 4、空格和沒有空格的選擇器二、響應式介紹 - 響應式布局是什麽？　　同一個網頁在不同的終端上呈

web前端【第十四篇】Bootstrap簡單使用

web前端【第十四篇】Bootstrap簡單使用

web前端【第十五篇】popup簡單使用（彈出頁面）

web前端【第十二篇】jQuery文檔相關操作

web前端【第十一篇】jQuery屬性相關操作

Python開發【第十四篇】：Web框架本質

Python之路【第十四篇】：Python的內置函數

python全棧開發【第十四篇】面向對象三大特性——繼承

Go語言【第十四篇】：Go語言基礎總結

web前端【第十篇】jQuery基本語法

Django 【第十九篇】JS實現的ajax、同源策略和前端jsonp解決跨域問題

Python之路【第十八篇】：Web框架們

Python開發【第十一篇】：JavaScript

圖解Python 【第十二篇】：Django 基礎

python全棧開發【第十一篇】Python常用模塊三（hashlib,configparser,logging）

python全棧開發【第十二篇】Python的模塊和包

python全棧開發【第十五篇】面向對象三大特性——封裝

python全棧開發【第十六篇】面向對象三大特性——多臺和繼承補充

python全棧開發【第十七篇】面向對象反射和內置方法

python全棧開發基礎【第十八篇】網絡編程（socket）

python全棧開發基礎【第十九篇】進程

web前端【第十四篇】Bootstrap簡單使用

相關推薦