Bootstrap 플러그인 소개 및 사용

Bootstrap 플러그인 개요
이전 레이아웃 구성 요소 장에서 설명한 구성 요소는 시작에 불과합니다. Bootstrap과 함께 제공되는 12개의 jQuery 플러그인에는 확장된 기능이 있으며 사이트에 더 많은 상호 작용을 추가할 수 있습니다. 고급 js 개발자가 아니더라도
Bootstrap의 js 플러그인을 배울 수 있습니다. Bootstrap Data API를 사용하면 코드를 작성하지 않고도 대부분의 플러그인을 실행할 수 있습니다.
사이트에서 부트스트랩 플러그인을 참조하는 방법에는 두 가지가 있습니다.
개별 참조: Bootstrap의 개별 *.js 파일을 사용합니다. 일부 플러그인과 CSS 구성요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 참조하는 경우 먼저 해당 플러그인 간의 종속성을 파악해야 합니다.
컴파일(동시) 참조: Bootstrap.js 또는 bootstrap.min.js의 압축 버전을 사용하세요
bootstrap.js와 bootstrap.min.js 모두 모든 플러그인을 포함하고 있으므로 두 파일을 동시에 참조하려고 하지 마세요.
모든 플러그인은 jQuery에 의존합니다. 따라서 플러그인 파일 앞에 jQuery를 인용해야 합니다. 현재 Boostrap에서 지원하는 jQuery 버전을 보려면 bower.json을 방문하세요.
데이터 속성
한 줄의 자바스크립트 코드도 작성하지 않고도 데이터 속성 API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있습니다. 이는 부트스트랩의 첫 번째 클래스 API이며 선호하는 방법이어야 합니다.
그러다가 다시 기능을 꺼야 하는 상황이 발생할 수 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 data-api 네임스페이스를 사용하여 문서에 바인딩된 이벤트를 차단 해제하는 방법도 제공합니다. 다음과 같습니다:
$(document).off('.data-api')
특정 플러그인을 꺼야 하는 경우 플러그인 이름 앞에 네임스페이스로 플러그인 이름을 추가하기만 하면 됩니다. data-api 네임스페이스는 아래와 같습니다:
$(document).off('.alert.data-api')
Programmatic API
모든 Bootstrap 플러그인에 순수 자바스크립트 API를 제공합니다. 모든 공개 API는 개별 또는 체인 호출 방법을 지원하고 모든 작업에 대한 요소 컬렉션을 반환합니다(참고: 호출 형식은 jQuery와 일치합니다).
$('.btn.danger').button('toggle').addClass('fat')

Import

【일회성 가져오기】

　Bootstrap은 Bootstrap 모든 JavaScript 플러그가 포함된 단일 파일을 제공합니다. -ins, 즉 bootstrap.js (압축 버전: bootstrap.min.js)

【개별 가져오기】

　특수 효과 파일을 쉽게 별도로 가져올 수 있도록 Bootstrap에서는 12가지 유형의 JavaScript 플러그인을 제공합니다.

xml 애니메이션 전환: 해당 플러그인 파일 "transition.js"

　 ✽ 모달 팝업 창(Modal): 해당 플러그인 파일 "modal.js"

　xml 드롭다운 메뉴(Dropdown): 해당 플러그 -in 파일 "dropdown.js"

　xml 스크롤 감지(Scrollspy): 해당 플러그인 파일 “scrollspy.js”

　xml 탭(Tab): 해당 플러그인 파일 “tab.js”

　EMA 툴팁 : 해당 Plug-in 파일 "tooltop.js"

　xml 팝업 상자 (Popover) : 해당 플러그인 파일 "popover.js"

　tax Alert box (Alert) : 해당 플러그인 파일 "alert.js"

　tax Buttons : 해당 플러그인 파일 "button.js"

　되더라도 접기/아코디언(Collapse) : 해당 플러그인 파일 "collapse.js"

　xml Image carousel Carousel : 해당 플러그인- "carousel.js" 파일에

　xml 자동 위치 지정 부표 Affix: 해당 플러그인 파일 "affix.js"

data attribute

　한 줄도 쓰지 않고 데이터 속성 API를 통해서만 모든 Bootstrap 플러그인을 사용할 수 있습니다. 자바스크립트 코드. 이는 Bootstrap의 최고 수준 API이며 선호되는 접근 방식입니다.

　그리고 어떤 경우에는 이 기능을 꺼야 할 수도 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 data-api를 네임스페이스로 사용하여 문서에 바인딩된 이벤트를 차단 해제하는 방법도 제공됩니다. 다음과 같습니다. data-api 为命名空间并绑定在文档上的事件。就像下面这样：

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

　　另外，如果是针对某个特定的插件，只需在 data-api

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

또한 특정 플러그인에 대한 것이라면 data-api 앞에 해당 플러그인의 이름을 네임스페이스로 추가하면 됩니다.

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

API

　Bootstrap은 모든 플러그인에 순수 JavaScript API를 제공합니다. 모든 공개 API는 개별 또는 체인 호출 메소드를 지원하고, 이들이 작동하는 요소 세트를 반환합니다. 이는 jQuery의 호출 형식과 일치합니다. 모든 메소드는 선택적 옵션 객체를 매개변수로 허용하거나 특정 메소드를 나타내는 A 문자열을 허용할 수 있습니다. 아무것도 제공하지 마세요(이 경우 플러그인은 기본값으로 초기화됩니다)

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

　　某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，可以通过调用插件的 .noConflict 方法恢复其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

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

 

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false

위 내용은 Bootstrap 플러그인 소개 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!