Bootstrap을 다운로드하여 설치 한 후 D :/Program Files/Nodejs/Node_Modules/Bootstrap/JS에서 12 개의 JS 파일을 찾을 수 있습니다. 이 JS 파일은 부트 스트랩과 함께 제공되는 12 개의 JQuery 플러그인입니다. d :/program files/nodejs/node_modules/bootstrap/dist/js에서 bootstrap.js 및 bootstrap.min.js를 찾을 수도 있습니다. 두 파일 모두 12 개의 jQuery 플러그인이 포함되어 있습니다.
이 12 개의 JQuery 플러그인 중에서 가장 일반적으로 사용되는 가장 일반적으로 사용되는 것은 Picture Carousel.js, Tag Switching Tab.js, Scrolling Listening Scrollspy.js, Dropdown List Drop-Up Layer Modal.js 및 프롬프트 상자 도구 팁 .JS 입니다.
(i) 그림 캐 러셀 .js
그림 회전 목마는 필요에 따라 CSS에서 이미지 크기, 위치 등을 설정할 수 있습니다.
Image Carousel에는 jquery.min.js 및 carousel.js의 도입이 필요하거나 Transition.js가 도입되어 전환 효과를 추가 할 수 있습니다.
<div> <div> <div> <!-Data-Ride = "Carousel"속성은 페이지를로드 할 때 애니메이션 재생을 시작하는 회전 목마를 표시하는 데 사용됩니다 .-> <div data-ride = "id ="carousel-332839 "> <ol> <li data-slide-to ="0 "data-target ="#carousel-332839 "> </li> </li> </li> <li> <li. data-slide-to = "1"data-target = "#carousel-332839"> </li> <li data-slide-to = "2"data-target = "#carousel-332839"> </li> </li> <div> <div> <div> <div> <h4> first thrumbnail.jpg " <p> cras justo odio, dapibus ac facilisis in, egestas eget quam. Eget Metus에서 Donec id elit non mi porta gravida. NULLAM ID DOLOR ID NIBH ULTRICIES VEHICULA UT ID ELIT. </p> </div> </div> <div> <img src = "images/desert.jpg"/> <div> <h4> 두 번째 썸네일 레이블 </h4> <p> cras justo odio, dapibus ac pacilisis in, egstas eget quam. Eget Metus에서 Donec id elit non mi porta gravida. NULLAM ID DOLOR ID NIBH ULTRICIES VEHICULA UT ID ELIT. </p> </div> </div> <div> <img src = "images/hydrangeas.jpg"> <div> <h4> 세 번째 썸네일 레이블 </h4> <p> cras justo odio, dapibus ac pacilisis in, egstas eget quam. Eget Metus에서 Donec id elit non mi porta gravida. NULLAM ID DOLOR ID NIBH ULTRICIES VEHICULA UT ID ELIT. </p> </div> </div> </div> <a href = "#carousel-332839"data-slide = "prev"> </span> </span> </a> <a href = "#carousel-332839"data-slide = "next"> <span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(ii) 태그 스위칭 탭
태그 스위칭에는 jQuery.min.js 및 tab.js가 도입되거나 전환 효과를 추가하기 위해 도입 될 수 있습니다.
<div> <div> <div> <div id = "tabs-440751"> <ul> <li> <a href = "#panel-1"data-toggle = "tab"> 섹션 1 </a> </li> <li> <a href = "#panel-2"data-toggle = "tab"> 섹션 2 </li> </li> </ul> </p> </div> <div id = "Panel-2"> <p> 섹션 2에 있습니다. </p> </div> </div> </div> </div> </div> </div> </div>
(iii) Scrollspy.js 및 드롭 다운 목록 Dropdown.js의 스크롤
스크롤 및 드롭 다운 목록을 결합하여 드롭 다운 목록으로 스크롤 및 청취 할 수있는 탐색 표시 줄을 만듭니다.
스타일을 설정해야합니다.이 예제의 스타일은 다음과 같습니다.
.a, .b {높이 : 500px; 너비 : 100%;}. B {배경색 : 흰색;}.jquery.min.js, dropdown.js, scrollspy.js를 소개해야합니다.
<body data-spy = "scroll"data-target = "#navbarexample"> <div> <div> <div> <div> <div = "navbarexample"> <div> <버튼 유형 = "button"data-toggle = "data-target ="#bs-example-navbar-collapse-1 "> Navigation </span> <span> </span> </span> </span> <span> </span> <span> </span> </button> <a href = "#"> brand </a> </div> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#1"> </li>> <li>>>> <li>> <li>> <li> <li> <li> <li> <li> <li> <li> href = "#2"> link </a> </a> </li> <li> <a href = "#3"data-toggle = "dropdown"> dropdown <strong> </strong> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> </li> <<a href = "<a href </a>> 여기 </a> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> <li> a href = "#"> 분리 된 링크 </a> </li> <li> <a href = "#"> 더 분리 된 링크 </a> </li> </ul> </ul> <comple "> <div> <input"> </div> <button type = "제출"> 제출 </button> </form> <ul> <li> <a href = "#4"> link </a> </li> <li> <a href = "#5"data-toggle = "dropdown"> dropdown <strong> </strong> </a> <ul> <li> <a href = "#"> action </li> </li> <li> </li> <li> <a href = "href dropdown href = "#"> 또 다른 행동 </a> </li> <li> <a href = "#"> 여기에 다른 것들 </a> </li> <li> </a> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> data-spy = "scroll"data-target = "#navbarexample">-> <div> <div id = "1"> </div> <div id = "2"> </div> <div id = "3"> </div id = "4"> </div id = "5"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
(iv) 모달 프레임 팝업 레이어 modal.js
jquery.min.js 및 modal.js를 소개하거나 전환 효과를 추가하기 위해 Transition.js를 도입 할 수 있습니다.
<div> <div> <a id = "modal-732948"href = "#modal-container-732948"role = "button"data-toggle = "modal"> 런치 데모 modal </a> <div id = "modal-container-732948"roble = "aria-labelledby ="aria-labelledby = "mymodallal" "aria-labelledby ="modal-container-732948 "aria-labelledby ="Modal-container-732948 "aria-labelledby ="modal-container-732948 "aria-labelledby =. <div> <div> <div> <버튼 유형 = "버튼"Data-dismiss = "modal"aria-hidden = "true"> </button> <h4 id = "mymodallabel"> modal title </h4> </div> <div> ... </div> <div> <button < "button" "bultion"> button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(v) 프롬프트 박스 툴팁 .js
jquery.min.js 및 tooltip.js를 소개해야하거나 Transition.js를 도입하여 전환 효과를 추가 할 수 있습니다.
또한 툴팁 플러그인은 다른 플러그인과 같지 않으며 순수한 CSS 플러그인이 아닙니다. 이 플러그인을 사용하려면 jQuery를 사용하여 활성화해야합니다.
$ (function () {$ ( "[Data-Toggle = 'ToolTip']"). ToolTip ();}); <바디 스타일 = "패딩 : 100px;" > <a href="#" data-toggle="tooltip" >Default Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="left">Tooltip on the left</a> <br/> <a href="#" data-toggle="tooltip" data-placement="top" >Tooltip on the top</a> <br/> <a href = "#"data-toggle = "tooltip"data-placement = "bottom"> 하단의 툴팁 </a> <br/> <a href = "#"data-toggle = "툴팁"data-placement = "right"> 오른쪽 </a> <br/> <blust ""data-toggle = <버튼 "> 도구 팁" "툴 타프"툴팁 "> type = "button"data-toggle = "tooltip"data-placement = "left"> 왼쪽의 툴팁 </button> <br/> <버튼 유형 = "버튼"버튼 "Data-toggle ="툴팁 "data-placement ="top "> 툴팁 </button> <br/> <bring button"data-toggle = "data-tog"/thant at at at at at hant at han <button type = "button"data-toggle = "툴팁"data-placement = "right"> 오른쪽의 툴팁 </button> </body>멋진 주제 공유 : jQuery 사진 회전 목마 JavaScript 사진 회전 목마 부트 스트랩 사진 회전 목마
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 테이블 사용 자습서
이 기사는 "Bootstrap 플러그인 사용 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.