ブートストラップにはどの JS ライブラリを使用できますか?

青灯夜游
リリース: 2021-12-30 11:23:41
オリジナル
2592 人が閲覧しました

利用可能な js プラグイン ライブラリ: 1. アニメーション トランジション "transition.js"; 2. モーダル ポップアップ ウィンドウ "modal.js"; 3. ドロップダウン メニュー "dropdown.js"; 4.タブ "tab" .js"; 5. プロンプト ボックス "tooltop.js"; 6. 警告ボックス "alert.js" など。

ブートストラップにはどの JS ライブラリを使用できますか?

このチュートリアルの動作環境: Windows 7 システム、ブートラップ バージョン 3.2、DELL G3 コンピューター

JavaScript プラグイン (ライブラリ) をサポートby Bootstrap

ワンタイム インポート:

Bootstrap は、Bootstrap のすべての JavaScript プラグインを含む 1 つのファイル、つまり bootstrap.js (圧縮バージョン: bootstrap.js) を提供します。最小.js)。

具体的な使用法は次のとおりです (または、右側のコード エディターの 28 ~ 29 行目を参照):

<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) --><script src="js/bootstrap.min.js"></script>
ログイン後にコピー

特別なステートメント: jQuery バージョン ライブラリは、ローカルの jQuery バージョンをロードすることもできます。

個別インポート:

特殊効果ファイルの個別インポートを容易にするために、Bootstrap V3.2 には 12 個の JavaScript プラグインが用意されています。

アニメーショントランジション(Transitions):対応プラグインファイル「transition.js」

モーダルポップアップウィンドウ (Modal): 対応するプラグインファイル "modal.js"

ドロップダウンメニュー(ドロップダウン): 対応するプラグインファイル"dropdown.js"

スクロール検知(Scrollspy): 対応するプラグイン-in file"scrollspy.js"

Tab: 対応するプラグインファイル"tab.js"

ツールヒント: 対応するプラグイン ファイル"tooltop.js"

Popover: 対応するプラグインファイル "popover.js"

##☑

Alert:対応するプラグインファイル"alert.js"

ボタン: 対応するプラグインファイル"button .js"

Folding/Accordion (Collapse): 対応プラグインファイル「collapse.js」

Picture carousel カルーセル: 対応するプラグイン ファイル"carousel.js"

ブイを自動的に検索する アフィックス: 対応プラグインファイル 「affix.js」

上記独立プラグインのダウンロードは、github (https:/// github.com/twbs/bootstrap)。 モーダル ポップアップ ボックス - モーダル ポップアップ ウィンドウの使用 (データ パラメーターの説明)

データ切り替えによるモーダル ポップアップの制御に加えておよび data-target ウィンドウに加えて、ブートストラップ フレームワークは、モーダル ポップアップ ウィンドウを制御するために、モーダル ポップアップ ボックス用の他のカスタム

data-attributes も提供します。たとえば、背景が灰色のモーダル背景があるかどうか、ESC キーを押してモーダル ポップアップ ウィンドウを閉じることができるかどうかなどです。モーダル ポップアップ ウィンドウのカスタム プロパティに関する関連手順は次のとおりです。

JavaScript でトリガーされるポップアップ ウィンドウ コード:

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});
ログイン後にコピー

モーダル ポップアップ ボックス -- JavaScript がトリガーされるときのパラメーター設定 (1)

JavaScript を使用してモーダル ポップアップ ウィンドウをトリガーする場合、ブートストラップ フレームワークは、主に

属性設定を含むいくつかの設定を提供します。 、

パラメータ設定とイベント設定。

属性設定

モーダル ポップアップ ウィンドウでデフォルトでサポートされるカスタム属性は次のとおりです:

たとえば、ユーザーが ESC キーを押してモーダル ポップアップ ウィンドウを閉じたくない場合は、次のようにすることができます:

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({            keyboard:false
        });
    });
});
ログイン後にコピー

Bootstrap フレームワークもでは、モーダル ポップアップ ウィンドウの 3 つのパラメータ設定を提供します。具体的な手順は次のとおりです:

パラメータ #使用方法説明#$("#mymodal").modal("toggle")show## を表示します。 ##$("#mymodal").modal("hide")いつトリガーされ、モーダル ポップアップ ウィンドウを閉じるモーダル ポップアップ ウィンドウもサポートされていますモーダル ポップアップ ウィンドウが表示される前と後、閉じる前と閉じた後の 4 種類のイベントの具体的な説明は次のとおりです。イベントの種類

toggle

#トリガーされると、モーダル ポップアップ ウィンドウの状態が反転します。モーダル ポップアップ ウィンドウが表示されている場合は閉じます。そうでない場合、モーダル ポップアップ ウィンドウが閉じている場合は、

##$("#mymodal").modal("show")

トリガーされると、モーダル ポップアップ ウィンドウを表示します

#hide

イベント設定:

説明

##show.bs.modalshown .bs.modalhide.bs.modalhidden.bs.modal

调用方法也非常简单:

$(&#39;#myModal&#39;).on(&#39;hidden.bs.modal&#39;, function (e) {
    // 处理代码...
})
ログイン後にコピー

下拉菜单(Dropdown)dropdown.js

(官方发布引用地址:http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js)

<p class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>
        </li>
        <li><a href="##">前端论坛</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</p>
ログイン後にコピー

被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"

Dropdown插件加载时,对所有带 有“data-toggle=dropdown”样式的元素绑定了事件,用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “

トリガーshow メソッドが呼び出された直後 (まだ表示前ではありません)、要素がクリックされた場合、その要素はイベントの関連ターゲット属性として使用されます

このイベントは、モーダル ポップアップ ウィンドウがユーザーに完全に表示された後 (および CSS アニメーションが完了した後) にトリガーされます。要素がクリックされると、要素は、イベントの関連ターゲット イベントとして使用されます

Hide メソッドが呼び出されます (ただし、まだ非表示がオフになっていません)

このイベントはモーダル ポップアップ ウィンドウが完全に非表示になった後 (および CSS アニメーションが完了した後)

属性名称

类型

默认值

描述

data-interval

number

5000

幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环

data-pause

string

hover

默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放

data-wrap

布尔值

true

轮播是否持续循环

图片轮播--JavaScript触发方法

默认情况之下,如果 carousel 容器上定义了 data-ride="carousel" 属性,页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下:

也可以通过容器的 ID 来指定:

在 carousel() 方法中可以设置具体的参数,如:

属性名称

类型

默认值

描述

interval

number

5000

幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环

pause

string

hover

默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放

wrap

布尔值

true

轮播是否持续循环

使用时,在初始化插件的时候可以传关相关的参数,如:

实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:

固定定位(Affix)

插件文件:源文件 affix.js

地址:http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-affix.js

Affix 效果常见的有以下三种:

☑ 顶部固定

☑ 侧边栏固定

☑ 底部固定

固定定位--声明式触发固定定位

Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发。其主要包括两个参数:

1、data-spy:取值 affix,表示元素固定不变的。

2、data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom。

具体使用如下:

分开设置 data-offset 值方式:

我们来看一个简单的示例:

注意,在 body 要声明滚动监控。

运行效果如下:

注意,请在宽屏模式下查看效果。据我测试下来,使用声明式,就算设置了 data-offset-top 的值也会失效,需要在样式中给 affix 设置一个top值,与 data-offset-top 值相等。data-offset-bottom一样。

在线自定义设置--Bootstrap组件

在 Bootstrap 组件设置这一部分,提供了公共样式(Common CSS),UI 组件(Components)和 JavaScript 组件(JavaScript components)三个部分,如下图所示:

每个部分都有对应的列表清单,在自定义配置时候,可以根据自己需求进行选择,比如,我自己的 Bootstrap 框架中,不需要打印样式、code、Glyphicons、等等,那么只需要不选中它们:

ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 !

以上がブートストラップにはどの JS ライブラリを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート