Boostrap은 다음을 포함하여 12 개의 JavaScript 플러그인을 제공합니다.
애니메이션 전환
모달 모달
드롭 다운 메뉴
Scrollspy
꼬리표
프롬프트 박스 툴팁
팝 오버
경고 상자 경보
단추
무너지다
로타리 회전식
플로트 부착을 자동으로 배치합니다
모달 팝업 창
<div> <div> <div> <div> <버튼 유형 = "버튼"Data-dismiss = "modal"aria-hidden = "true"> </button> <h4> 모달 제목 </h4> </div> <div> <p> 이것은 팝업 창이 표시하는 것입니다 ....... data-dismiss = "modal"> 저장 </div> </div> </div> </div>
풀다운 메뉴
선언적 사용
일반적으로 드롭 다운 메뉴는 네비게이션 바 (Navbar) 및 Tab (Tab)에서 구현됩니다.
<div id = "nav-example"> <a href = "#"> 프로젝트 이름 </a> <ul 역할 = "navigation"> <li> <data-toggle = "dropdown"role = "button"href = "#"id = "id ="id = "id ="drop1 "> dropdown </b> </a> <ul arria-labelledby ="real = "hreen ="recon "> dropDown href = "#"tabindex = "-1"role = "menuitem"> action1 </a> </li> <li 역할 = "프레젠테이션"> <a href = "#"tabindex = "-1"roboy = "menuitem"> action2 </a> </li> <li rocile = "presentation"> <a href = "#"href = "#" "reach ="href = "#" </li> </ul> </li> <li> <A Data-Toggle = "dropdown"robile = "button"href = "#"#"id ="id = "id ="id = "drop2"> dropdown2 <b> </b> </a> <ul aria-labelledby = "drop2"role = "menu"> <li robol = "prestib"> 역할 = "menuitem"> action4 </a> </a> <li 역할 = "프리젠 테이션"> <a href = "#"tabindex = "-1"role = "menuitem"> action5 </a> </li> <li role = "프리젠 테이션"> <a href = "#"tabindex = "-1"menuitem "> action6 </a>>>>> </li> </ul> </li> </ul> </div>
꼬리표
<%-네비게이션 바 탭-%> <ul> <li> <a href = "#home"data-toggle = "탭"> home </a> <li> <a href = "#profile"data-toggle = "tab"> 프로파일 </a> </li> <li> <a href = "#메시지"탭 "</li> </li>>>>>>>>>>>>>>> <li> <li> <li> <li> <li> <li> href = "#settings"data-toggle = "tab"> 설정 </a> </li> </ul> <%-탭 패널-%> <div> <div id = "home"> home ... </div> <div id = "profile"> 프로파일 ... </div id = "messages"> </div id id = "설정"> 설정 "</div> </div>
프롬프트 상자
<버튼 데이터 원리-타이틀 = "왼쪽의 툴팁"data-toggle = "툴팁"data-placement = "왼쪽"> 왼쪽의 도구 팁> <버튼 데이터-오리올-타이틀 = "상단의 도구 팁"데이터-툴 팁 "top </button </button <button-original-title" Data-Toggle = "Tooltip"Data-Prolement = "Bottom"> 하단의 툴팁 </button> <버튼 데이터 원시-타이틀 = "하단의 툴팁"Data-Toggle = "Tooltip"Data-Placement = "Bottom"> 툴팁 </button </button <button data-original-title = "Data-Toggle의 도구 립">
경고함
<div> <버튼 데이터 mismiss = "alert"type = "button"> x </button> <h4> 경고 제목 </h4> <p> 이것을 변경하고 이전을 시도하십시오. </p> </div>
겹
<div id = "아코디언"> <div> <div> <h4> <data-toggle = "Collapse"data-parent = "#아코디언"href = "#아코일 디온"> 트리거 요소#1 </h4> </div> <div id = "Collapseon"> <div> infold 컨텐츠 ... </div> </div> </div> </div>
회전 회전식
<div data-ride = "carouse1" id="container"><%-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-slide-to = "2"data-target = "#컨테이너"> </li> </ol> <%-왼쪽 및 왼쪽 제어 버튼-%> <a data-slide = "prev"href = "#container"> <span> </span> </a> <a data-slide = "prev"href = "#container"> </span> </a> </a> </
위의 것은 편집자가 소개 한 기본 Boostrap 튜토리얼의 JavaScript 플러그인 장입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!