搜尋
首頁web前端Bootstrap教程bootstrap插件有哪些
bootstrap插件有哪些Jul 18, 2019 am 10:13 AM
bootstrap

Bootstrap自備12 jQuery插件,擴展了功能,可以為網站添加更多的互動。 即使您不是高階的 JavaScript 開發人員,您也可以著手學習 Bootstrap 的 JavaScript 外掛程式。

bootstrap插件有哪些

利用 Bootstrap 資料 API(Bootstrap Data API),大部分的外掛程式可以在不寫任何程式碼的情況下被觸發。 (推薦學習:Bootstrap影片教學

過渡效果(Transition)外掛程式提供了簡單的過渡效果。

Transition.js 是 transitionEnd 事件和 CSS 過渡效果模擬器的基本幫助器類別。它被其他插件用來檢查 CSS 過渡效果支持,並用來獲得過渡效果。

模態框(Modal)外掛程式

模態框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自單獨的來源的內容,可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。

下拉選單(Dropdown)插件

使用下拉式選單(Dropdown)插件,您可以向任何元件(例如導覽列、標籤頁、膠囊式導覽功能表、按鈕等)新增下拉式選單。

滾動監聽(Scrollspy)插件

滾動監聽(Scrollspy)插件,即自動更新導航插件,會根據捲軸的位置自動更新對應的導航目標。其基本的實作是隨著您的捲動,基於捲軸的位置會向導覽列添加 .active class。

標籤頁(Tab)外掛程式

標籤頁(Tab)透過結合一些 data 屬性,您可以輕鬆地建立一個標籤頁介面。透過這個外掛您可以把內容放置在標籤頁或是膠囊式標籤頁甚至是下拉式選單標籤頁中。

提示工具(Tooltip)外掛程式

當您想要描述一個連結的時候,提示工具(Tooltip)就顯得非常有用。提示工具(Tooltip)插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發。提示工具(Tooltip)插件做了許多改進,例如不需要依賴圖像,而是改用 CSS 實現動畫效果,用 data 屬性儲存標題資訊。

彈出框(Popover)外掛程式

彈出框(Popover)與工具提示(Tooltip)類似,提供了擴充的視圖。如需啟動彈出框,使用者只需把滑鼠懸停在元素上即可。彈出框的內容完全可使用 Bootstrap 資料 API(Bootstrap Data API)來填入。此方法依賴工具提示(tooltip)。

警告框(Alert)外掛程式

警告框(Alert)訊息大多是用來向終端使用者顯示諸如警告或確認訊息的資訊。使用警告框(Alert)插件,您可以為所有的警告框訊息添加可取消(dismiss)功能。

按鈕(Button)外掛程式

按鈕(Button)在 Bootstrap 按鈕 一章中介紹過。透過按鈕(Button)插件,您可以添加進一些交互,例如控制按鈕狀態,或為其他元件(如工具列)建立按鈕組。

折疊(Collapse)外掛程式

折疊(Collapse)外掛程式可以輕鬆地讓頁面區域折疊起來。無論您用它來創建折疊導航還是內容面板,它都允許很多內容選項。

輪播(Carousel)外掛程式

Bootstrap 輪播(Carousel)外掛程式是一種靈活的響應式的向網站添加滑桿的方式。除此之外,內容也是足夠靈活的,可以是影像、內嵌框架、影片或其他您想要放置的任何類型的內容。

附加導覽(Affix)外掛程式

附加導覽(Affix)外掛程式允許指定

固定在頁面的某個位置。一個常見的例子是社交圖示。它們將在某個位置開始,但當頁面點擊某個標記,該
會鎖定在某個位置,不會隨著頁面其他部分一起滾動。

更多Bootstrap相關技術文章,請造訪Bootstrap教學欄位進行學習!

以上是bootstrap插件有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
10款好看又实用的Bootstrap后台管理系统模板(快来下载)10款好看又实用的Bootstrap后台管理系统模板(快来下载)Aug 06, 2021 pm 01:55 PM

一个好的网站,不能只看外表,网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板,可以帮助大家快速建立强大有美观的网站后台,欢迎下载使用!如果想要获取更多后端模板,请关注php中文网后端模板栏目!

bootstrap与jquery是什么关系bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PM

bootstrap与jquery的关系是:bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站,jquery是一个兼容多浏览器的javascript库,bootstrap是基于HTML、CSS、JAVASCRIPT的。

7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

8款Bootstrap企业公司网站模板(源码免费下载)8款Bootstrap企业公司网站模板(源码免费下载)Aug 24, 2021 pm 04:35 PM

好看又实用的企业公司网站模板可以提高您的建站效率,下面PHP中文网为大家分享8款Bootstrap企业公司网站模板,均可免费下载,欢迎大家使用!更多企业站源码模板,请关注php中文网企业站源码栏目!

bootstrap中sm是什么意思bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM

在bootstrap中,sm是“小”的意思,是small的缩写;sm常用于表示栅格类“.col-sm-*”,是小屏幕设备类的意思,表示显示大小大于等于768px并且小于992px的屏幕设备,类似平板设备。

bootstrap modal 如何关闭bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AM

bootstrap modal关闭的方法:1、连接好bootstrap的插件;2、给按钮绑定模态框事件;3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。

bootstrap默认字体大小是多少bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PM

bootstrap默认字体大小是“14px”;Bootstrap是一个基于HTML、CSS、JavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面,并且默认的行高为“20px”,p元素行高为“10px”。

bootstrap是免费的吗bootstrap是免费的吗Jun 21, 2022 pm 05:31 PM

bootstrap是免费的;bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,开发完成后在2011年8月就在GitHub上发布了,并且开源免费。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版