Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > Front-End-Fragen und Antworten > Welche js-Bibliotheken können für Bootstrap verwendet werden?

Welche js-Bibliotheken können für Bootstrap verwendet werden?

青灯夜游
Freigeben： 2021-12-30 11:23:41
Original
2642 Leute haben es durchsucht

Verfügbare js-Plug-in-Bibliotheken: 1. Animationsübergang „transition.js“; 2. Modales Popup-Fenster „modal.js“; 4. Tab „tab. js“; 5. Eingabeaufforderungsfeld „tooltop.js“; 6. Warnfeld „alert.js“ und so weiter.

Welche js-Bibliotheken können für Bootstrap verwendet werden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.2, DELL G3-Computer

JavaScript-Plug-in (Bibliothek), unterstützt von Bootstrap

Einmaliger Import:

Bootstrap bietet eine einzelne Datei. Diese Datei enthält alle JavaScript-Plug-Ins von Bootstrap, nämlich bootstrap.js (komprimierte Version: bootstrap.min.js).

Die spezifische Verwendung ist wie folgt (oder siehe Zeilen 28-29 des Code-Editors rechts): 

<!—导入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>
Nach dem Login kopieren

Besondere Anweisung: Die jQuery-Versionsbibliothek kann auch Ihre lokale jQuery-Version laden.

Einzelimport:

Um den unabhängigen Import von Spezialeffektdateien zu erleichtern, bietet Bootstrap V3.2 12 JavaScript-Plug-Ins, diese sind:

☑ Animationsübergänge (Übergänge): Korrespondierender Plug -in-Dateien "transition.js"

☑Modal:Entsprechende Plug-in-Datei"modal.js"

☑Dropdown-Menü (Dropdown):Entsprechende Plug-in-Datei „dropdown.js“

☑Scroll-Erkennung (Scrollspy): Die entsprechende Plug-in-Datei „scrollspy.js“

☑ Tab: Die entsprechende Plug-in-Datei“ Tab .js"

☑ Tooltips: Die entsprechende Plug-in-Datei "tooltop.js"

☑ Popover: Die entsprechende Plug-in-Datei "popover.js"

☑ Alert: Entsprechende Plug-in-Datei"alert.js"

☑Buttons (Buttons): Entsprechende Plug-in-Datei"button.js"

☑ Zusammenbruch : Die entsprechende Plug-in-Datei"collapse.js"

☑Bildkarussell Karussell: Die entsprechende Plug-in-Datei"carousel.js"

☑ Automatische Positionierungsboje Af beheben: Die entsprechende Plug-In-Datei "affix.js"

Der Download des oben genannten unabhängigen Plug-Ins kann von Github (https://github.com/twbs/bootstrap) heruntergeladen werden.

Modales Popup-Fenster – die Verwendung eines modalen Popup-Fensters (Datenparameterbeschreibung)

Zusätzlich zur Steuerung modaler Popup-Fenster durch Datenumschaltung und Datenziel zielt das Bootstrap-Framework auch auf modale Fenster ab Popup-Boxen werden zur Steuerung modaler Popups bereitgestellt. Zum Beispiel: ob ein modaler Hintergrund mit grauem Hintergrund vorhanden ist und ob das modale Popup-Fenster durch Drücken der ESC-Taste geschlossen werden kann. Die relevanten Anweisungen zu den benutzerdefinierten Eigenschaften des modalen Popup-Fensters lauten wie folgt:

Durch JavaScript ausgelöster Popup-Fenstercode: 

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});
Nach dem Login kopieren

Modales Popup-Feld – Parametereinstellungen, wenn JavaScript ausgelöst wird (1 )

JavaScript zum Auslösen verwenden Für modale Popup-Fenster bietet das Bootstrap-Framework einige Einstellungen, hauptsächlich einschließlich

Attributeinstellungen, Parametereinstellungen und Ereigniseinstellungen.

Attributeinstellungen

Die wichtigsten benutzerdefinierten Attribute, die standardmäßig von modalen Popup-Fenstern unterstützt werden, sind:

Zum Beispiel, wenn Sie nicht möchten, dass der Benutzer die ESC-Taste drücken muss, um das zu schließen modales Popup-Fenster, Sie können dies tun: 

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({            keyboard:false
        });
    });
});
Nach dem Login kopieren

bietet auch drei Parametereinstellungen für modale Popup-Fenster im Bootstrap-Framework. Die spezifischen Anweisungen lauten wie folgt:

Parameter

Verwendung

Beschreibung

toggle

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

Bei Auslösung den Status des modalen Popup-Fensters umkehren. Wenn das modale Popup-Fenster angezeigt wird, wird es geschlossen; andernfalls wird es angezeigt, wenn das modale Popup-Fenster geschlossen ist

show

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

Bei Auslösung das modale Popup anzeigen

hide

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

Bei Auslösung das Modal schließen Popup

Ereigniseinstellungen:

Das modale Popup-Fenster unterstützt auch vier Arten von Ereignissen, nämlich vor dem Popup des modalen Popup-Fensters, nach dem Popup, vor dem Schließen und nach dem Schließen Die spezifische Beschreibung lautet wie folgt:

Event Type

Description

show.bs.modal

Wird sofort ausgelöst, wenn die Show-Methode aufgerufen wird (bevor sie angezeigt wurde); Wenn auf ein Element geklickt wird, ist dieses Element die relatedTarget-Eigenschaft des Ereignisses damit die CSS-Animation abgeschlossen wird); wenn auf ein Element geklickt wird, wird das Ereignis „The Element's relatedTarget“ sofort beim Aufruf der Methode „hide.bs.modal“ als Ereignis ausgelöst (aber Das Ausblenden ist noch nicht deaktiviert

调用方法也非常简单：

$(&#39;#myModal&#39;).on(&#39;hidden.bs.modal&#39;, function (e) {
    // 处理代码...
})
Nach dem Login kopieren

下拉菜单（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>
Nach dem Login kopieren

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

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

  • ”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类 名，此时下拉菜单将隐藏。

    效果图如下：

    使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。

    $(function(){
    $(".dropdown-toggle").dropdown();
})
    Nach dem Login kopieren

    还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏。

    $(function(){
    $(".dropdown-toggle").dropdown("toggle");
})
    Nach dem Login kopieren

    不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法：

    $(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})
    Nach dem Login kopieren

    滚动监控器 scrollspy.js

    （官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

    1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项

    2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示：

    这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。

    选项卡（Tabs）

    插件引用地址：

    选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。如下图所示：

    选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）

    底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示

    一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下：

    <!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">规则</a></li>
    <li><a href="#forum" role="tab">论坛</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<p id="myTabContent" class="tab-content">
    <p class="tab-pane fade in active" id="bulletin">公告内容面板</p>
    <p class="tab-pane fade" id="rule">规则内容面板</p>
    <p class="tab-pane fade" id="forum">论坛内容面板</p>
    <p class="tab-pane fade" id="security">安全内容面板</p>
    <p class="tab-pane fade" id="welfare">公益内容面板</p>
</p>
    Nach dem Login kopieren

    关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

    在Bootstrap框架中选项卡nav-tabs已带有样式，前面在介绍导航一节中有详细介绍。而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的：

    /*bootstrap.css文件第3758行～第3763行*/
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}
    Nach dem Login kopieren

    选项卡--触发切换效果

    同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：
    1、选项卡导航链接中要设置 data-toggle="tab"

    2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

    如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"

    主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

    3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

    选项卡--为选择卡添加fade样式

    为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

    选项卡--胶囊式选项卡（nav-pills）

    在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。

    调用方法:

    在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用：

    $(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})
    Nach dem Login kopieren

    提示框(Tooltip)

    插件源文件：tooltip.js

    （引用地址：）

    提示框--结构

    Bootstrap框架中的tooltip的插件提供了四种不同的风格：

    提示信息在左边：

    在Bootstrap框架中的提示框，结构非常简单，常常使用的是按钮