天天看點
傳回

深入精通JavaScript插件

導入的連結 

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

1 折疊

1.1 定義折疊

折疊的結構看起來很複雜，但調用起來是很簡單的。具體分為以下2個步驟：

（1）定義折疊的觸發器，使用​

​<a>​

​或者​

​<button>​

​标簽。在觸發器中添加觸發屬性​

​data-toggle="collapse"​

​，并在觸發器中使用id或class來指定觸發的内容。如果使用的是​

​<a>​

​标簽，可以讓​

​href​

​屬性值等于id或class值；如果是​

​<button>​

​标簽，在​

​<button>​

​中添加data-target屬性，屬性值為id或class值。

（2）定義折疊包含框，折疊内容包含在折疊框中。然後在包含框中設定id或class值，該值等于觸發器中對應的id或class值。最後還需要在折疊包含框中添加下面三個類中的一個類：

 .collapse：隐藏折疊内容。

 .collapsing：隐藏折疊内容，切換時帶動态效果。

 .collapse.show：顯示折疊内容。

<h2 class="mb-4">定義折疊</h2>
<p>
    <!--用herf屬性來定位他們的id-->
    <a  data-toggle="collapse" href="#collapse">< a >觸發折疊</a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">< button >觸發折疊</button>
</p>

<div class="collapsing" id="collapse">
    <div class="card card-body">
        這是< a >觸發的折疊内容
    </div>
</div>
<div class="collapse" id="collapse1">
    <div class="card card-body">
        這是< button >觸發的折疊内容
    </div>
</div>

1.2 控制多目标

在觸發器上，可以通過選擇器來顯示和隐藏多個折疊包含框（一般使用class值），也可以多個觸發器來控制顯示或隐藏一個折疊包含框。

<h3 class="mb-4">一個觸發器切換多個目标</h3>
<p>
    <button  type="button" data-toggle="collapse" data-target=".multi-collapse">切換下面2個目标</button>
</p>
<div class="collapse multi-collapse">
    <div class="card card-body"> <!--card-body也是架構自帶的屬性-->
        折疊内容一
    </div>
</div>
<div class="collapse multi-collapse">
    <div class="card card-body">
        折疊内容二
    </div>
</div>
<hr class="my-4">
<h3 class="mb-4">多個觸發器切換一個目标</h3>
<p>
    <button  type="button" data-toggle="collapse" data-target="#multi-collapse">觸發器1</button>
    <button  type="button" data-toggle="collapse" data-target="#multi-collapse">觸發器2</button>
</p>
<div class="collapse" id="multi-collapse">
    <div class="card card-body">
        多個觸發器觸發的内容
    </div>
</div>

1.3 設計手風琴

本節使用折疊元件并結合卡片元件來實作手風琴案例。

<h4 class="">個人履歷</h4>
<div id="Example">
    <div class="card">
        <div class="card-header">
            <!--data-toggle="collapse"前3個例子主要是應用data-toggle="collapse"-->
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">教育經曆</button>
                    <!-- .btn-link是架構提供的一個class btn-link{font-weight:400;color:#007bff;}-->
        </div>
        <div id="one" class="collapse show" data-parent="#Example">
            <div class="card-body">
                畢業于加利福尼亞大學，學習的專業為計算機科學與技術。
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#two">工作經驗</button>
        </div>
        <div id="two" class="collapse" data-parent="#Example">
            <div class="card-body">
                做過一年的軟體開發
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#three">興趣愛好</button>
        </div>
        <!--data-parent="#Example"確定在某個時間内隻能顯示一個子項目-->
        <div id="three" class="collapse" data-parent="#Example">
            <div class="card-body">
                籃球，足球，街舞，表演
            </div>
        </div>
    </div>
</div>

1.4 調用折疊

調用折疊元件的方法有兩種。

1.通過Data屬性

2. JavaScript調用

除了使用data屬性調用外，還可以使用JavaScript腳本形式進行調用，調用方法如下：

​

​$('.collapse').collapse()​
配置參數 類型 預設值 說明
parent 選擇器 false 所有添加該屬性的折疊項，在其中某一項顯示時，其餘的将自動關閉。
toggle 布爾值 true 是否切換折疊調用。

1.5 添加使用者行為

Bootstrap4中為折疊插件提供了4個事件，通過它們，可以監聽使用者的動作和折疊元件的狀态。說明如下：

 show.bs.collapse：當觸發打開動作時立即觸發此事件。

 shown.bs.collapse：當折疊元素對使用者完全可見時觸發此事件。

 hide.bs.collapse：當使用者觸發折疊動作時立即觸發此事件。

 hidden.bs.collapse：當折疊元素完全折疊後觸發此事件。

<body class="container">
<h3 class="mb-4">折疊事件</h3>
<div class="accordion" id="accordionExample"><!--"accordion" id="accordionExample"這兩個屬性在這沒什麼作用-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">折疊</button>
        </div>
        <div id="one" class="collapse">
            <div class="card-body">
                折疊的内容
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //js腳本調用  $('.collapse').collapse()包含一個配置對象，該對象包含2個配置參數
    $(function(){
        $('.collapse').on("shown.bs.collapse",function(){
            $("body").css("background","#36ee23");
            $('[data-toggle="collapse"]').html("折疊内容顯示完成")
        })
        $('.collapse').on("hidden.bs.collapse",function(){
            $("body").css("background","#fdff62");
            $('[data-toggle="collapse"]').html("折疊内容隐藏完成")
        })
    })
</script>

2 工具提示

2.1 定義工具提示

使用​

​data-placement=""​

​屬性設定工具提示的顯示方向，可選值有四個：left、right、top和bottom，分别表示向左、向右、向上和向下。

在工具提示中，​

​title​

​屬性中可以添加一些修飾的标簽，例如在下面代碼中，在title提示内容中添加​

​<em>​

​、​

​<b>​

​<u>​

​等标簽。

2.2 工具提示方向 

<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="left" data-trigger="click" title="工具提示">向左</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="right" data-trigger="click" title="工具提示">向右</button>
<div class="mt-5 mb-5"><hr></div>
<button type="button" class="btn btn-lg btn-danger ml-5 " data-toggle="tooltip" data-placement="top" data-trigger="click" title="工具提示">向上</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="bottom" data-trigger="click" title="工具提示">向下</button>
</body>
<script>
    $(function () {
        //使用data-toggle屬性觸發工具提示
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>

2.3 調用工具提示

使用JavaScript腳本觸發工具提示：

​$('#example').tooltip(options);​

​$('#example')​

​表示比對的頁面元素，options是一個參數對象，可以設定工具提示的相關配置參數，說明如表所示：

名稱
animation boolean 提示工具是否應用CSS淡入淡出過渡特效
container string element
delay number object
delay:{show:1000,hide:500}
html 是否插入HTML字元串。如果為true，工具提示标題中的HTML标記将在工具提示中呈現；如果設定為false，則使用jQuery的text()方法插入内容，就不用擔心XSS攻擊。
placement function top
selector 設定一個選擇器字元串，則具體提示針對選擇器比對的目标進行顯示。
title
trigger click 設定工具提示的觸發方式，包括單擊（click）、滑鼠經過（hover）、擷取焦點（focus）或者手動（manual）。可以指定多種方式，多種方式之間通過空格進行分割。
offset 
body class="container">
<h3 class="mb-4">調用工具提示</h3><!--工具提示和彈窗調用的是同一個例子-->
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip">工具提示</button>
<script>
    $(function () {//該函數的作用是延遲1秒顯示；在推遲1秒隐藏
        $('[data-toggle="tooltip"]').tooltip({
            animation:true,                    //應用CSS淡入淡出過渡特效
            html:true,                        //支援HTML字元串
            offset:"200px",                    //設定偏移位置
            title:"<img src='image/008.png' width='300' class='img-fluid'>",  //提示内容
            placement:"right",                  //顯示位置
            trigger:"click",                     //滑鼠單擊時觸發
            delay:{show:1000,hide:1000}           //顯示和延遲的時間
        });
    })
</script>
</body>

2.4 添加使用者行為

Bootstrap4為工具提示插件提供了5個事件，說明如表所示。

事件類型 描述
show.bs.tooltip 當調用show方法時，此事件立即觸發
shown.bs.tooltip 當工具提示對使用者可見時觸發此事件
hide.bs.tooltip 當調用hide方法時，将立即觸發此事件
hidden.bs.tooltip 當工具提示對使用者隐藏完成時，将觸發此事件
inserted.bs.tooltip 這個事件在show.bs.tooltip事件結束後被觸發。 
<h2 class="mb-5">工具提示事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="myTooltip" id="myTooltip">工具提示</button>
<script>
    $(function () {
        $('#myTooltip').tooltip({
            title:"工具提示",     //提示内容
            trigger:"click",      //滑鼠單擊時觸發
        });
        $('#myTooltip').on('show.bs.tooltip', function () {
            alert("show.bs.tooltip");
            $(this).removeClass("btn-info").addClass("btn-primary");
        })
        $('#myTooltip').on('inserted.bs.tooltip', function () {
            alert("inserted.bs.tooltip");
            $(this).removeClass("btn-primary").addClass("btn-danger");
        })
        $('#myTooltip').on('shown.bs.tooltip', function () {
            alert("shown.bs.tooltip");
            $(this).removeClass("btn-danger").addClass("btn-info");
        })
        $('#myTooltip').on('hide.bs.tooltip', function () {
            alert("hide.bs.tooltip");
            $(this).removeClass("btn-info").addClass("btn-success");
        })
        $('#myTooltip').on('hidden.bs.tooltip', function () {
            alert("hidden.bs.tooltip");
            $(this).removeClass("btn-success").addClass("btn-info");
        })
    })
</script>

3 彈窗

3.1 定義彈窗

​data-toggle="popover"​

​屬性對元素添加彈窗，使用title屬性設定彈窗的标題内容，使用​

​data-content​

​屬性設定彈窗的内容。

出于性能原因的考慮，bootstrap沒有支援彈窗插件通過data屬性激活，是以必須手動通過JavaScript腳本方式調用。調用方法是通過​

​popover()​

​構造函數來實作的：

​data-toggle​

​屬性初始化彈窗：

<script>
    $(function () {
         $('[data-toggle="popover"]').popover()
    })
</script>
使用選擇器初始化彈窗，例如id或者class：
$(function () {
  $('class或id').popover()
})

3.2 彈窗方向

與工具提示預設的顯示位置不同，彈窗預設顯示位置在目标對象的右側。通過data-placement屬性可以設定提示資訊的顯示位置，取值包括top、right、bottom和left。

<body class="container">
<h3 class="mb-5">彈窗方向</h3>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="left" title="彈窗标題" data-content="彈窗内容">向左</button>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="right" title="彈窗标題" data-content="彈窗内容">向右</button>
    <div class="mt-5 mb-5"><hr></div>
    <button type="button" class="btn btn-lg btn-danger ml-5 " data-toggle="popover" data-placement="top" title="彈窗标題" data-content="彈窗内容">向上</button>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="bottom" title="彈窗标題" data-content="彈窗内容">向下</button>

    <script>
        $(function () {
            $('[data-toggle="popover"]').popover();
        })
    </script>
</body>

3.3 調用彈窗

使用JavaScript腳本觸發彈窗：

​$('#example').popover(options)​

​$(‘#example’)​

​表示比對的頁面元素，options是一個參數對象，可以配置彈窗的相關參數。

可以通過data屬性或JavaScript傳遞參數。對于data屬性，将參數名附着到data-後面即可，例如​

​data-container=""​

​。也可以針對單個工具提示指定單獨的data屬性。

<h3 class="mb-4">調用彈窗</h3>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover">彈窗</button>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover({
            animation:true,                                 //應用CSS淡入淡出過渡特效
            html:true,                                     //支援HTML字元串
            offset:"200px",                                 //設定偏移位置
            title:"展翅飛翔的鷹",                           //顯示标題
            content:"<img src='image/008.png' class='img-fluid'>",     //顯示内容
            trigger:"click",                                 //滑鼠單擊時觸發
            delay:{show:1000,hide:1000}                      //顯示和延遲的時間
        });
    })
</script>
</body>

3.4 添加使用者行為

Bootstrap4為彈窗插件提供了5個事件，具體說明如表所示。

show.bs.popover 當調用show方法時，此事件立即觸發。
shown.bs.popover 當彈窗對使用者可見時觸發此事件。
hide.bs.popover 當調用hide方法時，将立即觸發此事件。
hidden.bs.popover 當彈窗對使用者隐藏完成時，将觸發此事件。
inserted.bs.popover 這個事件在show.bs.popover事件結束後被觸發。 
<h2 class="mb-5">彈窗事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="popover" id="myPopover">彈窗</button>
<script>
    $(function () {
        /*
        綁定5個監聽事件，然後激活工具提示互動行為；彈出框，然後再重置按鈕的顔色

        */
        $('#myPopover').popover({
            title:"彈窗标題",     //彈窗标題
            content:"彈窗内容",   //顯示内容
            trigger:"click",      //滑鼠單擊時觸發
        });
        $('#myPopover').on('show.bs.popover', function () {
            $(this).removeClass("btn-info").addClass("btn-primary");
            alert("show.bs.popover");
        })
        $('#myPopover').on('inserted.bs.popover', function () {
            $(this).removeClass("btn-primary").addClass("btn-danger");
            alert("inserted.bs.popover");
        })
        $('#myPopover').on('shown.bs.popover', function () {
            $(this).removeClass("btn-danger").addClass("btn-info");
            alert("shown.bs.popover");
        })
        $('#myPopover').on('hide.bs.popover', function () {
            $(this).removeClass("btn-info").addClass("btn-success");
            alert("hide.bs.popover");
        })
        $('#myPopover').on('hidden.bs.popover', function () {
            $(this).removeClass("btn-success").addClass("btn-info");
            alert("hidden.bs.popover");
        })
    })
</script>

4 輪播（重點，未掌握）

4.1. 定義輪播

輪播是一個幻燈片效果，内容循環播放，使用CSS 3D變形轉換和JavaScript建構。它适用于一系列圖像、文本或自定義标記，還包括對上一個、下一個圖的浏覽控制和指令支援。

bootstrap輪播插件有3個部分構成：辨別圖示、幻燈片和控制按鈕。

提示：bootstrap輪播，可以根據自己的需要去掉一些“東西”，例如圖示訓示、控制按鈕和圖檔說明等，以達到相應的效果。

<div id="Carousel" class="carousel slide" data-ride="carousel">
    <!--slide用來設定切換圖檔的過渡和動畫效果-->
    <!--辨別圖示-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻燈片-->
    <div class="carousel-inner">
        <div class="carousel-item "><!--将active類添加到其中一個幻燈片中，非則輪播不可見-->
            <img src="image/002.png" class="d-block w-100" alt="">
            <!--修正浏覽器預設的圖像對齊帶來的影響-->
            <div class="carousel-caption"><!--carousel-caption圖檔說明框-->
                <h5>圖檔一</h5>
                <p>說明文字</p>
            </div>
        </div>
        <div class="carousel-item active"><!--active展示的是輪播的首頁-->
            <img src="image/003.png" class="d-block w-100" alt="">
            <div class="carousel-caption">
                <h5>圖檔二</h5>
                <p>說明文字</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="image/004.png" class="d-block w-100" alt="">
            <div class="carousel-caption">
                <h5>圖檔三</h5>
                <p>說明文字</p>
            </div>
        </div>
    </div>
    <!--控制按鈕-->
    <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#Carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

4.2. 設計輪播風格

前面介紹可以添加slide類來實作圖檔切換的動畫，本節來介紹一下圖檔的交叉淡入淡出以及圖檔自動循環間隔時間。

1.交叉淡入淡出

2.設定自動循環間隔時間

<!--carousel-fade交叉淡入淡出類-->
<div id="Carousel" class="carousel slide carousel-fade">
    <!--辨別圖示-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻燈片-->
    <div class="carousel-inner">
        <div class="carousel-item active" data-interval="1000">
            <!--data-interval="1000"設定自動循環間隔時間-->
            <img src="image/002.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-interval="2000">
            <img src="image/003.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-interval="3000">
            <img src="image/004.png" class="d-block w-100" alt="">
        </div>
    </div>
    <!--控制按鈕-->
    <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#Carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</body>

<script>
    $(function(){
        $('.carousel').carousel({
            interval:3000,
            keyboard:true
        });
    })
</script>

4.3. 調用輪播

調用輪播插件的方法有兩種，具體說明如下。

1.通過data屬性

2.使用JavaScript調用

在腳本中使用carousel()方法調用輪播：

​$('.carousel').carousel()​

4.4. 添加使用者行為 

<div id="indicators" class="carousel slide" data-ride="carousel">
    <!--data-ride="carousel"屬性用于定義輪播在頁面加載時就開始動畫播放-->
    <ol class="carousel-indicators">
        <li data-target="#indicators" data-slide-to="0" class="active"></li>
        <li data-target="#indicators" data-slide-to="1"></li>
        <li data-target="#indicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image/01.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="image/02.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="image/03.png" class="d-block w-100" alt="">
        </div>
    </div>
    <a class="carousel-control-prev" href="#indicators" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#indicators" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

</body>
<script>
    $(function(){
        $('.carousel').on("slide.bs.carousel",function(e){
            e.target.style.border="solid 10px #FF1493"
        })
        $('.carousel').on("slid.bs.carousel",function(e){
            e.target.style.border="solid 10px #9C9C9C"
        })
    })
</script>

5 滾動監聽

5.1 定義滾動監聽

Bootstrap4支援HTML和JavaScript兩種方法調用滾動監聽插件。

2.通過JavaScript腳本

​待補​

清單組實列

<style>
        .Scrollspy{
            width: 500px;      /*定義寬度*/
            height: 500px;     /*定義高度*/
            overflow: scroll;   /*定義當内容溢出元素框時，浏覽器顯示滾動條以便檢視其餘的内容*/
        }
    </style>
</head>
<body>
<h3 class="mb-4">清單組示例</h3>
<div class="row">
    <div class="col-3">
        <div id="list" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-5">Item 5</a>
        </div>
    </div>
    <div class="col-9">
        <div class="Scrollspy">
            <h4 id="list-item-1">Item 1</h4>
            <p><img src="image/001.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-2">Item 2</h4>
            <p><img src="image/002.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-3">Item 3</h4>
            <p><img src="image/003.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-4">Item 4</h4>
            <p><img src="image/004.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-5">Item 5</h4>
            <p><img src="image/005.jpg" alt="" class="img-fluid"></p>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $('.Scrollspy').scrollspy({
            offset:200
        })
    })
</script>

5.2 調用滾動監聽

在頁面中為被監聽的元素定義data-spy="scroll"屬性,即可激活Bootstrap滾動監聽插件。如果要監聽浏覽器視窗的内容滾動，則可以為标簽添加data-spy="scroll"屬性

<body data-spy="scroll">

使用data-target="目标對象"定義監聽的導航結構

當為body元素定義data-target="#navbar"時，則ID值為navbar的導航框就擁有了監聽頁面滾動的行為。

​body data-spy="scroll" data-target="#navbare"​

直接為被監聽的對象綁定scrollspy()方法即可調用滾動監聽插件

例如标簽綁定滾動監聽行為

<script>
  $(function(){
      $('body').scrollspy();
})
</script>

5.3 添加使用者行為

滾動監聽插件定義了一個事件：activate.bs.scrollspy。每當新項目被滾動激活時，該事件就會在滾動元素上觸發。下面利用activate事件跟蹤目前菜單項，當新項目被滾動激活時，标簽的背景色變為黃色。

<style>
    .Scrollspy{
        width: 500px;      /*定義寬度*/
        height: 400px;     /*定義高度*/
        overflow: scroll;   /*定義當内容溢出元素框時，浏覽器顯示滾動條以便檢視其餘的内容*/
    }
</style>
<body class="container">
<nav id="navbar" class="navbar navbar-light bg-light">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="#list1">清單1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#list2">清單2</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜單</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#menu1">菜單1</a>
                <a class="dropdown-item" href="#menu2">菜單2</a>
                <a class="dropdown-item" href="#menu3">菜單3</a>
            </div>
        </li>
    </ul>
</nav>
<div data-spy="scroll" data-target="#navbar" data-offset="80" class="Scrollspy">
    <h4 id="list1">清單1</h4>
    <p><img src="image/002.png" alt="" class="img-fluid"></p>
    <h4 id="list2">清單2</h4>
    <p><img src="image/004.png" alt="" class="img-fluid"></p>
    <h4 id="menu1">菜單1</h4>
    <p><img src="image/003.png" alt="" class="img-fluid"></p>
    <h4 id="menu2">菜單2</h4>
    <p><img src="image/008.png" alt="" class="img-fluid"></p>
    <h4 id="menu3">菜單3</h4>
    <p><img src="image/003.png" alt="" class="img-fluid"></p>
</div>
</body>
<script>
    $(function(){
        $("body").on("activate.bs.scrollspy",function(e){
            $("body").css("background","yellow")
        })
    })
</script>

6 實戰實訓1——設計折疊搜尋框

跟着寫的大概20分鐘左右

錯誤點：

1.

<!--這裡之前隻寫了btn btn-primary忘寫了class-->
             <a href="#" class='btn btn-primary'>搜尋</a>

​​搜尋​​

導緻不能顯示搜尋框

<i ></i></a>
                   <!--在<a></a>之間寫注釋會有間隙,對下一個樣式會産生影響-->
                   <!--fa fa-shopping-cart 架構提供的樣式-->
<!--我之前寫并沒有顯示，shoping錯，時shopping;
              fa-fa-search錯，是fa-search
                 -->

導緻并沒有圖示，fa fa-shopping-cart 架構提供的圖示樣式

<!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.0">
    <title>設計折疊搜尋框</title>
    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
    <style>
        i{
            border: 1px solid black;   /*定義邊框*/
            border-radius: 50%;        /*定義圓角邊框*/
            padding: 5px;              /*定義内邊距*/
        }
        i:hover {
            background: #00aa88;       /*定義背景色*/
            color: white;              /*定義字型顔色*/
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-light bg-light mt-3">
        <a href="#" class="navbar-brand">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a href="#" class="nav-link">首頁</a>
                </li>
                <li class="nav-item ">
                    <a href="#" class="nav-link">關于我們</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">聯系我們</a>
                </li>
            </ul>
            <div>
                <a href="#">
                    <i ></i></a>
                    <!--在<a></a>之間寫注釋會有間隙,對下一個樣式會産生影響-->
                    <!--fa fa-shopping-cart 架構提供的樣式-->
                    <!--我之前寫并沒有顯示，shoping錯，時shopping;
                    fa-fa-search錯，是fa-search
                    -->
                <a href="#" data-toggle="collapse" data-target="#collapseExample">
                  <i class="fa fa-search"></i>  
                </a>
            </div>
        </div>
    </nav>
    <div class="d-flex justify-content-end mr-3">
        <div class="collapse" id="collapseExample">
            <div class="form-group form-inline">
                <input type="search" name="search" class="form-control mr-2">
                <!--這裡之前隻寫了btn btn-primary忘寫了class-->
                <a href="#" class='btn btn-primary'>搜尋</a>
            </div>
        </div>
    </div>
</body>
</html>

7 實戰實訓2——仿小米内容展示

​待補​

努力拼搏吧，不要害怕，不要去規劃，不要迷茫。但你一定要在路上一直的走下去，盡管可能停滞不前，但也要走。

待補 ide 工具提示 bootstrap css
上一篇: 想快速學 Java？所有 Java 教程都可以燒掉了
下一篇: 船舶自動識别系統（AIS）

繼續閱讀