집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩에 내장된 플러그인은 무엇입니까?
부트스트랩에 내장된 플러그인은 무엇입니까?
- 青灯夜游원래의
- 2021-11-11 11:47:194271검색
Bootstrap의 내장 플러그인은 다음과 같습니다: 1. 전환 효과 플러그인 2. 모달 상자 플러그인 3. 드롭다운 메뉴 플러그인 5. 탭 플러그인 6. 프롬프트 도구 플러그인 8. 경고 상자 플러그인 10. 접이식 플러그인; . 추가 탐색 플러그인.
이 튜토리얼의 운영 환경: Windows 7 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터
bootstrap 내장 플러그인에는 다음이 포함됩니다:
Bootstrap 전환 효과
부트스트랩 모달 상자
부트스트랩 드롭다운 메뉴
부트스트랩 스크롤 모니터링
부트스트랩 탭 페이지
부트스트랩 프롬프트 도구
-
부트스트랩 팝업 상자
-
부트스트랩 경고 상자
ㅋㅋㅋ otstrap 전환 플러그인 - 전환 플러그인은 간단한 전환 효과를 제공합니다.
본 플러그인의 기능을 별도로 참조하려면 다른 JS 파일 외에 Transition.js를 참조해야 합니다. 또는 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
- Transition.js는 TransitionEnd 이벤트 및 CSS 전환 효과 시뮬레이터의 기본 도우미 클래스입니다. CSS 전환 지원을 확인하고 전환 효과를 얻기 위해 다른 플러그인에서 사용됩니다.
- Bootstrap 모달 박스(Modal) 플러그인
이 플러그인의 기능을 별도로 참조하려면 modal.js를 참조해야 합니다. 또는 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
사용법:
data 속성을 통해: 컨트롤러 요소(예: 버튼 또는 link) ", data-target="#identifier" 또는 href="#identifier"를 설정하여 전환할 특정 모달 상자(id="identifier" 포함)를 지정합니다.모달 플러그인의 숨겨진 콘텐츠를 전환할 수 있습니다:
JavaScript를 통해: 이 기술을 사용하면 간단한 JavaScript 줄로 id="identifier"로 모달을 호출할 수 있습니다.
$('#identifier').modal(options)
Bootstrap 드롭다운 플러그인
이 플러그인의 기능을 별도로 참조하려면 dropdown.js를 참조해야 합니다. 또는 bootstrap.js 또는 bootstrap.min.js의 압축 버전을 참조하세요.드롭다운 플러그인을 사용하면 다음을 추가할 수 있습니다. 모든 구성 요소(예: 탐색 모음, 탭 페이지, 캡슐 탐색 메뉴, 버튼 등)에 대한 드롭다운 메뉴.
- Bootstrap Scrollspy 플러그인
- Scrollspy 플러그인은 스크롤 막대의 위치에 따라 해당 탐색 대상을 자동으로 업데이트하는 자동 업데이트 탐색 플러그인입니다. 기본 구현은 스크롤할 때 스크롤 막대의 위치에 따라 탐색 막대에 .active 클래스를 추가하는 것입니다.
- Usage
상위 탐색에 스크롤 청취 동작을 추가할 수 있습니다: 데이터 속성을 통해: 듣고 싶은 요소(보통 본문)에 data-spy="scroll"을 추가합니다. 그런 다음 Bootstrap .nav 구성 요소의 상위 요소 ID 또는 클래스를 사용하여 data-target 속성을 추가합니다. 이것이 작동하려면 수신하려는 링크의 ID와 일치하는 요소가 페이지 본문에 존재하는지 확인해야 합니다.
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>
</div>
...
</body>JavaScript를 통해: JavaScript를 통해 스크롤 모니터링을 호출하고 모니터링할 요소를 선택한 다음 .scrollspy() 함수를 호출할 수 있습니다. $('body').scrollspy({ target: '.navbar-example' })
Bootstrap 탭 플러그인
일부 데이터 속성을 결합하여 , 탭 인터페이스를 쉽게 만들 수 있습니다. 이 플러그인을 사용하면 탭, 캡슐 탭 또는 드롭다운 메뉴 탭에 콘텐츠를 배치할 수 있습니다.
Bootstrap 도구 설명 플러그인
툴팁은 링크를 설명할 때 매우 유용합니다. Tooltip 플러그인은 Jason Frame이 작성한 jQuery.tipsy에서 영감을 받았습니다. 예를 들어, 도구 설명 플러그인은 이미지에 의존할 필요가 없지만 대신 CSS를 사용하여 애니메이션 효과를 얻고 데이터 속성을 사용하여 제목 정보를 저장합니다.
Bootstrap Popover 플러그인
Popover는 Tooltip과 유사하며 확장된 보기를 제공합니다. 팝오버를 활성화하려면 사용자가 해당 요소 위로 마우스를 가져가면 됩니다. 팝업 상자의 내용은 Bootstrap Data API를 사용하여 완전히 채울 수 있습니다. 이 방법은 도구 설명에 의존합니다.
Bootstrap 경고 플러그인
경고 메시지는 대부분 최종 사용자에게 경고 또는 확인 메시지와 같은 정보를 표시하는 데 사용됩니다. 경고 플러그인을 사용하면 모든 경고 메시지에 해제 기능을 추가할 수 있습니다.
Bootstrap Button 플러그인
Button은 Bootstrap Button 장에서 소개되었습니다. 버튼 플러그인을 사용하면 버튼 상태 제어와 같은 일부 상호 작용을 추가하거나 다른 구성 요소(예: 도구 모음)에 대한 버튼 그룹을 생성할 수 있습니다.
Bootstrap Collapse Plugin
Collapse 플러그인을 사용하면 페이지 영역을 쉽게 접을 수 있습니다. 아코디언 탐색 또는 콘텐츠 패널을 만드는 데 사용하든 다양한 콘텐츠 옵션을 허용합니다.
Bootstrap Carousel Plugin
Bootstrap Carousel 플러그인은 사이트에 슬라이더를 추가하는 유연하고 반응이 빠른 방법입니다. 그 외에도 콘텐츠는 충분히 유연하며 이미지, iframe, 비디오 또는 배치하려는 기타 유형의 콘텐츠일 수 있습니다.
Bootstrap 추가 탐색(Affix) 플러그인
추가 탐색(Affix) 플러그인을 사용하면
추천 학습: "부트스트랩 사용 튜토리얼"
위 내용은 부트스트랩에 내장된 플러그인은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!