ACCP8.0Y2Web前端框架與移動應用開發第4章Bootstrap的JavaScript插件

時間 2019-11-11

標籤 accp8.0y2web accp web 前端框架移動應用開發 bootstrap javascript 插件欄目 HTML 简体版

原文原文鏈接

雜記css

插件之間的依賴關係

某些插件和 CSS 組件依賴於其它插件。若是你是單個引入每一個插件的，請確保在文檔中檢查插件之間的依賴關係。注意，全部插件都依賴 jQuery （也就是說，jQuery必須在全部插件以前引入頁面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。html

data 屬性

你能夠僅僅經過 data 屬性 API 就能使用全部的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。jquery

話又說回來，在某些狀況下可能須要將此功能關閉。所以，咱們還提供了關閉 data 屬性 API 的方法，即解除以 data-api 爲命名空間並綁定在文檔上的事件。就像下面這樣：編程

$(document).off('.data-api')

另外，若是是針對某個特定的插件，只需在 data-api 前面添加那個插件的名稱做爲命名空間，以下：json

$(document).off('.alert.data-api')

編程方式的 API

咱們爲全部 Bootstrap 插件提供了純 JavaScript 方式的 API。全部公開的 API 都是支持單獨或鏈式調用方式，而且返回其所操做的元素集合（注：和 jQuery 的調用形式一致）。bootstrap

$('.btn.danger').button('toggle').addClass('fat')

全部方法均可以接受一個可選的 option 對象做爲參數，或者一個表明特定方法的字符串，或者什麼也不提供（在這種狀況下，插件將會以默認值初始化）：api

$('#myModal').modal()                      // 以默認值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化後當即調用 show 方法

每一個插件還經過 Constructor 屬性暴露了其原始的構造函數：$.fn.popover.Constructor。若是你想獲取某個插件的實例，能夠直接經過頁面元素獲取：$('[rel="popover"]').data('popover')。瀏覽器

默認設置ide

每一個插件均可以經過修改其自身的 Constructor.DEFAULTS 對象從而改變插件的默認設置：函數

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態框插件的 `keyboard` 默認選參數置爲 false

一.單詞部分

modal模態框 transition動畫過渡效果插件 carousel旋轉輪播

indicators指針 scroll滾動

二.預習部分

1.bootstrap有哪些插件？分別是什麼

動畫過渡，警告框，提示框，按鈕

2.動畫過渡插件應用在其餘那些插件中

①模態框的滑動和漸變效果

②選項卡的漸變效果

③旋轉輪播的滑動效果

三.練習部分

1.製做百度登陸框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下</title>


</head>
<body>
<div class="container">
    <br><br><br>
    <div class="row">
        <div class="col-md-2 col-md-push-10">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-sm">
                登陸
            </button>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <div class="input-group">
           <input type="text" class="form-control" placeholder="">
            <span class="input-group-addon">百度一下</span>
            </div>
        </div>
    </div>

    <!--fade過渡效果-->
   <!-- <div class="modal fade bs-example-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                這是小的
            </div>
        </div>
    </div>-->

    <div class="modal fade bs-example-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <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" id="myMti">登陸百度帳號</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">

                        <input type="text" class="form-control" placeholder="手機/郵箱/用戶名">

                        <input type="password" class="form-control" placeholder="密碼">


                    </div>
                    <input type="radio">下次自動登陸
                    <br>
                    <div class="container">

                        <div class="row">
                            <div class="col-md-3 col-md-push-0"><button type="button" class="btn btn-danger" style="width: 200px;">登陸</button></div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

2.製做搜狐新聞選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


        <style>
            .container{
                border: 1px rgba(222,180,233,0.95) solid;
                margin-top: 50px;
            }
            .img-rounded{
                margin-top: 20px;
                margin-left: 20px;
            }
        </style>
</head>
<body>
<div class="container">

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#news" data-toggle="tab" id="one">
        新聞</a>
    </li>
    <li><a href="#play" data-toggle="tab">娛樂</a></li>
    <li><a href="#war" data-toggle="tab">
        軍事</a>
    </li>
    <li><a href="#society" data-toggle="tab">社會</a></li>
    <li><a href="#phy" data-toggle="tab">
        體育</a>
    </li>


</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="news">
     <img src="image/1.jpg" class="img-rounded">
        <ul>
            <li>村主任看風水收費一萬不算違紀？</li>
            <li>女經理色誘警官賣17臺僞劣安檢機？</li>
            <li>男子

yiyeqing

後疑染病將女子推下樓？</li> <li>網傳四川成都一女性頭部被人割掉？</li> <li>遊客遭老虎咬死專家稱園方無責任？</li> </ul> </div> <div class="tab-pane fade" id="play"> <img src="image/2.jpg" class="img-rounded"> <ul> <li>村主任看風水收費一萬不算違紀？</li> <li>女經理色誘警官賣17臺僞劣安檢機？</li> <li>男子

yiyeqing

後疑染病將女子推下樓？</li> <li>網傳四川成都一女性頭部被人割掉？</li> <li>遊客遭老虎咬死專家稱園方無責任？</li> </ul> </div> <div class="tab-pane fade" id="war"> <img src="image/3.jpg" class="img-rounded"> <ul> <li>村主任看風水收費一萬不算違紀？</li> <li>女經理色誘警官賣17臺僞劣安檢機？</li> <li>男子

yiyeqing

後疑染病將女子推下樓？</li> <li>網傳四川成都一女性頭部被人割掉？</li> <li>遊客遭老虎咬死專家稱園方無責任？</li> </ul> </div> <div class="tab-pane fade" id="society"> <img src="image/4.jpg" class="img-rounded"> <ul> <li>村主任看風水收費一萬不算違紀？</li> <li>女經理色誘警官賣17臺僞劣安檢機？</li> <li>男子yiyeqing後疑染病將女子推下樓？</li> <li>網傳四川成都一女性頭部被人割掉？</li> <li>遊客遭老虎咬死專家稱園方無責任？</li> </ul> </div> <div class="tab-pane fade" id="phy"> <img src="image/5.jpg" class="img-rounded"> <ul> <li>村主任看風水收費一萬不算違紀？</li> <li>女經理色誘警官賣17臺僞劣安檢機？</li> <li>男子

yiyeqing

後疑染病將女子推下樓？</li> <li>網傳四川成都一女性頭部被人割掉？</li> <li>遊客遭老虎咬死專家稱園方無責任？</li> </ul> </div> </div> </div> <script src="../jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/bootstrap.min.js"></script> <script> $(function () { $('#one').tab('show'); }); </script> </body> </html>

3.製做美聯英語在線VIP輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美聯英語</title>

    <style>
        .row{
            background-color: rgba(142,131,132,0.95);
        }
        #ulli li{
            float: left;
            list-style: none;
            margin-left: 10px;
            margin-top: 5px;
        }
        #ullii li{
            float: left;
            list-style: none;
        }

    </style>


</head>
<body>

        <div class="row">
            <div class="col-md-3">
                <ul id="ulli">

                    <li><span class="glyphicon glyphicon-phone-alt"></span>400-777-8828</li>
                    <li>中文</li>
                    <li>英文</li></ul>
            </div>
            <div class="col-md-3 col-md-push-6">
                <ul id="ullii">
                    <li><button type="button" class="btn btn-danger btn-sm">免費註冊</button> </li>
                    <li><button type="button" class="btn btn-danger btn-sm">登陸</button></li>
                    </ul>
            </div>
        </div>

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="image/img1.jpg">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="image/img2.jpg">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="image/img3.jpg">
            <div class="carousel-caption"></div>
        </div>
    </div>
    <a class="carousel-control leftt" href="#myCarousel"
       data-slide="prev"></a>
    <a class="carousel-control rightt" href="#myCarousel"
       data-slide="next"></a>
</div>
        <script src="../jquery-3.2.1.min.js"></script>
        <link rel="stylesheet" href="../css/bootstrap.css">
        <!--<script src="../js/bootstrap.min.js"></script>-->
        <script src="../js/bootstrap.js"></script>
        <script>
          $(".carousel").carousel({
              interval:2000
          })
        </script>
</body>

</html>

4.製做所問數據頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所問數據</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">

<nav class="nav navbar-inverse navbar-static navbar-fixed-top" id="myScrollspy" role="navigation">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" type="button"
                data-target=".navbar-collapse">
            <span class="icon-bar active"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
        <h4 style="color: white;margin-top: 15px;margin-left: 20px;">所問數據</h4>
    </div>
    <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
            <li  class="active"><a href="#chanpin">產品優點</a></li>
            <li><a href="#jiejue">解決方案</a></li>
            <li><a href="#guanyu">關於咱們</a></li>
            <li><a href="#lianxi">聯繫咱們</a></li>
        </ul>

    </div>

</nav>
<br><br><br>
<div class="container">
    <div  id="chanpin" class="row">
        <div class="col-md-10 col-xs-10"  style="width: 1200px;height: 1250px; background-image: url('image/header-bg.jpg'); background-size: cover"></div>
    </div>
    <div class="row" style="background-color: rgba(153,159,148,0.95)"><div class="col-md-5 col-md-offset-4 col-xs-12"><h1>行業解決方案</h1>
    <h4  id="jiejue">數據分析，將來市場預判</h4>
    </div><br>
        <br><br>

    </div>
    <div class="row" id="row">
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/analysis.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/antiterrorism.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/financial.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/forecast.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/gov.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/medical.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-2"><img src="image/peng.jpg" id="guanyu"></div>
        <div class="col-md-4"><img src="image/shengchao.jpg"></div>
        <div class="col-md-4"><img src="image/shengchao.jpg"></div><div class="col-md-4"><img src="image/shengchao.jpg"></div>
        <div class="col-md-4"><img src="image/shengchao.jpg"></div>

    </div>
<div class="row">
    <form action="#" style="background-color: white"  id="lianxi">
<h1  style="display: none">jnjknjknknkj</h1>
        <div class="form-group">
          <input class="input-lg" type="text" placeholder="聯繫咱們">
        </div>
        <div class="form-group">
           <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>  &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="電話">
    </div>
        <br>
    </form>
</div>
</div>
<script>
    $(function(){
       
        $("#myScrollspy").scrollspy();
    });
</script>
<script src="../jquery-3.2.1.min.js"></script>

<script src="../js/bootstrap.min.js"></script>


</body>

</html>

四.總結部分

事件

Bootstrap 爲大部分插件所具備的動做提供了自定義事件。通常來講，這些事件都有不定式和過去式兩種動詞的命名形式，例如，不定式形式的動詞（例如 show）表示其在事件開始時被觸發；而過去式動詞（例如 shown ）表示在動做執行完畢以後被觸發。

從 3.0.0 版本開始，全部 Bootstrap 事件的名稱都採用命名空間方式。

全部以不定式形式的動詞命名的事件都提供了 preventDefault 功能。這就賦予你在動做開始執行前將其中止的能力。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模態框的展現
})

未對禁用 JavaScript 的瀏覽器提供補救措施

Bootstrap 插件未對禁用 JavaScript 的瀏覽器提供補救措施。若是你對這種狀況下的用戶體驗很關心的話，請添加<noscript> 標籤向你的用戶進行解釋（並告訴他們如何啓用 JavaScript），或者按照你本身的方式提供補救措施。

歡迎提問，歡迎指錯，歡迎討論學習信息有須要的私聊發佈評論便可都能回覆的

原文在博客園http://www.cnblogs.com/a782126844/有須要能夠聯繫扣扣：2265682997

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。