Perpustakaan js yang manakah boleh digunakan untuk bootstrap?-Soal Jawab bahagian hadapan-php.cn

Pustaka pemalam js yang tersedia: 1. Peralihan animasi "transition.js"; 2. Tetingkap pop timbul "modal.js" 3. Menu lungsur turun "dropdown.js"; Tab "tab" .js"; 5. Kotak gesaan "tooltop.js"; 6. Kotak amaran "alert.js" dan sebagainya.

Perpustakaan js yang manakah boleh digunakan untuk bootstrap?

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.2, komputer DELL G3

Pemalam JavaScript (perpustakaan) disokong oleh Bootstrap

Import sekali:

Bootstrap menyediakan satu fail yang mengandungi semua pemalam JavaScript Bootstrap, iaitu bootstrap.js (versi termampat: bootstrap. min. js).

Penggunaan khusus adalah seperti berikut (atau lihat baris 28-29 editor kod di sebelah kanan):

<!—导入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>

Salin selepas log masuk

Pernyataan khas: Repositori jQuery juga boleh memuatkan versi jQuery tempatan anda .

Import individu:

Untuk memudahkan import bebas fail kesan khas, Bootstrap V3.2 menyediakan 12 pemalam JavaScript, iaitu:

☑ Peralihan animasi (Peralihan): Fail pemalam yang sepadan"transition.js"

☑ Tetingkap pop timbul modal (Modal): Fail pemalam yang sepadan "modal.js"

☑ Menu lungsur turun (Turun Turun ): Fail pemalam yang sepadan "dropdown.js"

☑ Pengesanan tatal (Scrollspy): Pemalam yang sepadan fail " scrollspy.js"

☑ Tab: Fail pemalam yang sepadan"tab.js"<>

☑ Petua alatan: Fail pemalam yang sepadan"tooltop.js"

☑ 🎜>Popover: Fail pemalam yang sepadan"popover.js"

☑ Makluman:Fail pemalam yang sepadan "alert.js"

☑ Butang: Fail pemalam yang sepadan "butang .js”

☑ Runtuh/Akordeon: Fail pemalam yang sepadan“collapse.js”

☑ 🎜>Karusel gambar: Fail pemalam yang sepadan"carousel.js"

☑

Kedudukan automatik imbuhan pelampung: Fail pemalam yang sepadan"affix.js"

Muat turun pemalam bebas di atas boleh dimuat turun daripada github (https: //github.com /twbs/bootstrap). Kotak pop timbul modal - penggunaan tetingkap pop timbul modal (penerangan parameter data)

Selain mengawal pop timbul modal melalui togol data dan sasaran data Selain tetingkap, rangka kerja Bootstrap juga menyediakan

atribut data tersuai lain untuk kotak pop timbul modal untuk mengawal tetingkap pop timbul modal. Contohnya: sama ada terdapat tirai latar modal dengan latar belakang kelabu dan sama ada tetingkap pop timbul modal boleh ditutup dengan menekan kekunci ESC. Arahan yang berkaitan tentang sifat tersuai tetingkap timbul Modal adalah seperti berikut:

Kod tetingkap timbul yang dicetuskan JavaScript:

Kotak Pop Timbul Modal - Tetapan parameter apabila JavaScript dicetuskan (1)

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

Salin selepas log masuk

Apabila menggunakan JavaScript untuk mencetus tetingkap pop timbul modal, rangka kerja Bootstrap menyediakan beberapa tetapan, terutamanya termasuk atribut

tetapan,

tetapan parameter dan tetapan acara.

Tetapan atribut

Atribut tersuai utama yang disokong oleh tetingkap pop timbul modal secara lalai ialah:

Sebagai contoh, jika anda tidak mahu pengguna menekan kekunci ESC untuk menutup tetingkap pop timbul modal, anda boleh melakukan ini:

Rangka kerja Bootstrap juga menyediakan tiga jenis tetingkap pop timbul modal, arahan terperinci adalah seperti berikut:

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

Salin selepas log masuk

ParameterPenggunaanPenerangan


togol	$(“#mymodal”).modal(“togol”)	Terbalikkan keadaan pop timbul modal apabila dicetuskan. Jika tetingkap pop timbul modal dipaparkan, tutupnya; sebaliknya, jika tetingkap pop timbul modal ditutup, paparkan
tunjukkan	$(“#mymodal”).modal(“show”)	Apabila dicetuskan, paparkan pop timbul modal
sembunyikan	$("#mymodal").modal("sembunyikan")	Apabila dicetuskan, Tutup pop timbul modal

Tetapan acara:

Timbul timbul modal juga menyokong empat jenis acara, Ia adalah sebelum dan selepas tetingkap pop timbul modal muncul, sebelum menutup dan selepas ditutup Penerangan khusus adalah seperti berikut:

事件类型	描述
show.bs.modal	在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
shown.bs.modal	该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
hide.bs.modal	在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal	该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发

Jenis acara<🎜><🎜>

<🎜>Penerangan<🎜 > <🎜><🎜><🎜>

<🎜>show.bs.modal<🎜><🎜>

<🎜>Dicetuskan serta-merta apabila kaedah pertunjukan dipanggil (sebelum ia dipaparkan);

<🎜>shown.bs.modal<🎜><🎜>

<🎜>Acara ini dipaparkan sepenuhnya dalam tetingkap pop timbul modal Dicetuskan selepas diberikan kepada pengguna (dan selepas menunggu animasi CSS selesai); <🎜><🎜>

<🎜>hide.bs.modal<🎜><🎜>

<🎜 >Dicetuskan serta-merta apabila kaedah sembunyi dipanggil (tetapi penyembunyian belum dimatikan) <🎜><🎜><🎜><🎜>

<🎜>tersembunyi. bs.modal<🎜><🎜>

<🎜>Acara ini dicetuskan selepas tetingkap pop timbul modal tersembunyi sepenuhnya (dan selepas animasi CSS selesai)< 🎜><🎜><🎜><🎜><🎜>

调用方法也非常简单：

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

Salin selepas log masuk

下拉菜单（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>

Salin selepas log masuk

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

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

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

效果图如下：

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

$(function(){
    $(".dropdown-toggle").dropdown();
})

Salin selepas log masuk

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

$(function(){
    $(".dropdown-toggle").dropdown("toggle");
})

Salin selepas log masuk

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

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

Salin selepas log masuk

滚动监控器 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>

Salin selepas log masuk

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

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

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

Salin selepas log masuk

选项卡--触发切换效果

同样的，选项卡也定义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");
    });
})

Salin selepas log masuk

提示框(Tooltip)

插件源文件：tooltip.js

（引用地址：）

提示框--结构

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

提示信息在左边：

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

Perpustakaan js yang manakah boleh digunakan untuk bootstrap?

Pemalam JavaScript (perpustakaan) disokong oleh Bootstrap

Apabila menggunakan JavaScript untuk mencetus tetingkap pop timbul modal, rangka kerja Bootstrap menyediakan beberapa tetapan, terutamanya termasuk atribut

下拉菜单（Dropdown）dropdown.js

滚动监控器 scrollspy.js

选项卡（Tabs）

选项卡--触发切换效果

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

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

提示框(Tooltip)

提示框--结构

提示框--其他的自定义属性

提示框--JS设置参数方法

弹出框（Popover）

弹出框--自定义结构属性

弹出框--提示框和弹出框的异同

警告框（Alert）

警告框--使用声明式触发警告框

警告框--JavaScript触发警告框

按钮插件（Button）

按钮插件--按钮加载状态

按钮插件--模拟单选择按钮

按钮插件--模拟复选按钮

手风琴（Collapse）

图片轮播（Carousel）

图片轮播--JavaScript触发方法

固定定位（Affix）

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

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