이번에는 JS 구성 요소의 사용을 살펴 보겠습니다. 이 기사는 조금 길다. 나는 모두가 참을성있게 읽을 수 있기를 바랍니다. 그리고 많은 이익이있을 것이라고 믿습니다. 많은 정원 친구들이 나를 친구들에게 추가하고 내 스타일의 글을 표현했습니다. 간단하고 명확합니다. 여기에서 다시 감사드립니다. 한편으로, 내 기술은 제한되어 있으며 비교적 기본적인 것을 씁니다. 다른 한편으로, 나는 내 자신의 이해를 바탕으로 한 것을 쓰고 가장 간단한 언어로 복잡한 것들을 표현합니다. 따라서 글쓰기에 문제가 있으면 몇 가지 수정 사항을 알려주십시오.
1. JS 파일 참조
참고 : 다른 플러그인은 jQuery에 의존하기 때문에 jQuery를 다른 JS 파일 앞에 도입해야합니다.
<!-<script src = "js/jquery-1.11.3.3.min.js"> </script> 로컬로 가져온로드 파일-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js "> </script >- Bootstrp.js <scrp. src = "js/bootstrap.min.js"> </script>
2. 데이터 속성
기능 : 데이터 속성을 통해 JS 코드를 작성하지 않고도 부트 스트랩 플러그인을 사용할 수 있습니다. Data-Toggle = "Dropdown"및 기타 참조 메뉴와 같은 앞에서 언급 한 참조 메뉴 플러그인.
따라서 켜기 기능이 있으므로 함수를 끄는 방법은 무엇입니까? JavaScript에 다음 코드를 추가하십시오.
<script type = "text/javaScript"> $ (document) .off ( '. data-api'); </스크립트>
특정 플러그인의 기능을 끄려면 다음 코드를 추가하십시오.
<script type = "text/javaScript"> // 프롬프트 상자의 플러그인 함수를 닫습니다. </스크립트>
모든 JS 플러그인은 기본적으로 다음 단계입니다.
1 : 사용하는 방법? --- 해당 클래스를 작성하는 방법?
2 : 전화하는 방법? --- 수업을 작성한 후에는 수업을 적용하는 방법은 무엇입니까?
3 : 이벤트 처리-조치가 시작되기 전 발생이 발생하고 조치가 시작된 후 발생합니다.
참고 : 모든 작업이 트리거되기 전에 발생합니다. Bootstrap은 예방을 제공하여 실행되기 전에 작업을 중지하는 것을 구현합니다. 코드는 다음과 같습니다.
$ ( '#myModal'). on ( 'show.bs.modal', function (e) {if (! data) return e.preventDefault () // 모달 상자의 표시를 방지 할 수 있습니다. 물론 다른 플러그인의 모양을 방지하기 위해 전환 할 수도 있습니다}).참고 : 부트 스트랩은 JavaScript를 비활성화하는 브라우저에 대한 치료 조치를 취하지 않습니다. 그러므로 우리는 스스로를 수정하기 위해 코드를 작성해야하며, 모든 사람들이 그것을 알고 있다고 생각합니다.
<NOSCRIPT> 브라우저는 JavaScript를 지원하지 않으므로 최신 브라우저를 다운로드하십시오 </noscript>
3. 모달 박스 구성 요소 (modal.js)
메모:
1 : 동시에 여러 모달 박스를 열도록 지원되지 않습니다.
2 : 모달 박스는 모달 박스의 디스플레이 및 기능에 영향을 미치는 다른 구성 요소를 피하기 위해 가능한 한 바디 하위 요소에 위치해야합니다.
3 : 모바일 터미널 지침
4 : 접근성 향상-ADD 역할 속성
5 :보기는 모달 박스에 포함될 수 있습니다. 즉, Data-Toggle = "Modal"
아래 열을 살펴 보겠습니다. 버튼을 클릭하면 모달 상자가 나타납니다. 여기의 속성과 관련하여 이전 기사를 읽은 경우 이해하기 어렵지 않다고 생각합니다. 나는 여기서 그것을 자세히 설명하지 않을 것입니다. 코드를 게시하여 직접 테스트 할 수 있습니다.
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"contment = "width = device-width, mete-scale = 1"-위의 3 개의 태그 * 다른 컨텐츠 *를 따라야합니다! -> <title> </title> <link href = "css/bootstrap.css"rel = "stylesheet"> <link href = "css/bootstrap.min.css"rel = "Stylesheet"> <link href = "css/style.css"rel = "Stylesheet"> </head> <Blitty type = "버튼" data-toggle = "modal"data-target = ". bs-example-modal-lg"> 큰 모달 박스가 팝업 </button </button> <div id = "myModal"tabindex = "-1"역할 = "대화"aria-labelledby = "mylargemodallabel"> <div> <mylargemodallabel "> <div> <button =" "data-dism" aria-label = "close"> <span aria-hidden = "true"> x </span> </button> <h4> 모달 제목 </h4> </div> <div> <p> 하나의 고급 바디… </div> </div> <!-모달 상자의 크기를 변경하고 클래스 모달 -sm-> <버튼 유형 = "button"data-toggle = "modal"data-target = ". bs-example-modal-sm"> 작은 모달 상자가 팝업 </button> <div id = "myModal"tabindex = ""dialog " aria-labelledby = "mylargemodallabel"> <div> --- 작은 모달 상자 <div> <div> <버튼 유형 = "button"data-dismiss = "modal"aria-label = "close"> <span aria-hidden = "true"> </div> <div> <p> one fine body… </div>. <div> <버튼 유형 = "버튼"Data-dismiss = "modal"> Close </button> <button type = "button"> 변경 저장 </button> </div> </div> </div> </div> </div> <!-애니메이션 효과는 금지되어 있습니다. src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script> <text/javascript "> $ ("#mymodal "); --- 플러그인 작업을 위해이 코드를 호출하여 </script> </body> </html>효과는 다음과 같습니다.
모달 박스와 결합하여 양식에 포함 된 입력 상자 등과 같은 신체 내용에 다른 기능을 추가 할 수 있으며 여기에는 코드가 게시되지 않습니다.
모달 박스의 이벤트의 경우 다음과 같이 JavaScript로 다음 코드를 추가하십시오.
코드를 다음과 같이 복사하십시오. <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script "> JavaScript"> $ ( "#myModal"). Modal ( "show"); ---이 코드를 호출하여 플러그인 모달 박스를 발효시키고 $ ( '#myModal'). on ( 'hidden.bs.modal', function (e) {
경고 ( "111");
}) ---이 이벤트는 모달 박스를 닫은 후 경고 이벤트가 트리거 될 것임을 의미합니다.
비디오에 모달 박스가 어떻게 포함되어 있는지 살펴 보겠습니다. 코드, 자동 재생, 정지 및 기타 기능을 추가해야합니다. 먼저 코드를 살펴 보겠습니다
<a href = "#"data-toggle = "modal"data-target = "#videomodal"data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduyma==.html"> video </a> <div id = "videomodal"-1 "rodiog" aria-labelledby = "videomodal"aria-hidden = "true"> <div> <div> <div> <버튼 유형 = "버튼"Data-dismiss = "data-dismiss ="modal "aria-hidden ="true "> </div> <iframe src =" "> </iframe> </div> </div> </div> </div> </div> </div> </div> </div> </div> src = "js/jquery-1.11.3.min.js"> </script> 로컬로드 파일-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> </script> type = "text/javaScript"> // 함수보기 autoplayModal () {var trigger = $ ( "body"). 찾기 ( '[data-toggle = "modal"]'); trigger.click (function () {var themodal = $ (this) .data ( "target"); var videosrc = $ (this) .attr ( "data-thevideo"); var videosrcauto = videosrc+"? autoplay = 1"; $ (themodal+'iframe'). button.close '). click (function () {$ (themodal+'iframe '). attr ('src ', videosrc);}); }); }); }); } // 함수를 호출합니다. </script> <noscript> JavaScript 브라우저를 지원하지 않습니다 </noscript>효과는 더 이상 스크린 샷이 아니며 위의 SRC는 Youku의 주소를 소개합니다.
4. 스크롤 모니터링 구성 요소
탐색 표시 줄에 나열되어 있습니다. 즉, 스크롤 위치에 따라 자동으로 탭을 전환합니다. 코드를 봅시다.
1 : 스크롤 막대가 나타나는지 확인하십시오.
2 : 일반적으로 데이터-스파이를 본문에 추가하십시오. 즉, Data-Spy = "Scroll"<body data-spy = "scroll"data-target = ". navbar"data-offetset = "70"> <div id = "myscrollspy"> <nav 역할 = "navigation"> <div> <div id = "navbar-scroll"> <ul> <ul> <a href = "a href = a href ="a href = "navigation". <li> <a href = "#message"> message </a> </a> </a> </a> </li> <li> <a href = "#about"about "about </a> </a> </a> </a> </a> </a> </a> </a> </li> <li> <a href ="#"#"data-toggle = "drop-down 메뉴 <b> </b> </b> </b> </b> </b> href = "#one"> one </a> <li> <a href = "#two"> 2 </a> 2 </a> <li> <a href = "#Three"> Three </a> </ul> </li> </ul> </div> </nav> </nav> </nav> <h1 id = "home"> home "> Home </h1> <P> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 추면 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 추면 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 id = "About"> 정보 </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 <hr> <h1 id = "one"> one </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지는 <p>입니다 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지는 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지는 </p> <h1 id = "two"> 2 </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 추는 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지
데이터 오프셋의 의미를 이해하십시오. 즉, 스크롤 위치가있을 때 상단의 오프셋입니다. 둘째, 이벤트 처리는 모달 박스의 사용과 유사하며 설명되지 않습니다.
효과는 다음과 같습니다.
5. 프롬프트 상자 구성 요소
알아채다:
1 : Data-Toggle = "Tooltip"사용
2 : 데이터 배치는 프롬프트 상자의 방향을 나타내며 4 개의 방향 (왼쪽, 오른쪽, 하단, 상단이 있습니다.
3 : 데이터 애니메이션은 애니메이션 효과를 False로 설정하는 것입니다. 즉, 마우스가 이동 한 후에는 원래 점진적으로 내고 출발하여 버퍼링 효과없이 즉각적인 모양으로 변경됩니다.
<div> <p> <!-완화-> 이것은 테스트 제목입니다. 이것은 테스트 제목입니다. 이것은 <a href = "#"id = "clickevent"data-toggle = "툴팁"data-porment = "thantop"data-prolement = "밑바닥"data-original-title = "cnblog.com/jtjds"data-animation = "false"> me, 기억 </p> </div> <!-</p> </div> < src = "js/jquery-1.11.3.min.js"> </script> 로컬로드 파일-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> </script> 유형 = "text/javaScript"> $ ( '[data-toggle = "tooltip"]]. 표시}) </script>
6. 팝업 프레임 구성 요소
알아채다:
1 : 팝업 박스는 메인 이외의 정보를 저장하기 위해 모든 요소에 작은 매달린 레이어를 추가합니다.
2 : 내용 길이가 0 인 경우 팝업 상자가 표시되지 않습니다. Data-Toggle = "Popover"사용
3 : 프롬프트 박스 플러그인에 의존하고 수동으로 초기화해야합니다 (JavaScript의 초기화 참조).
다음 코드와 더 이상 스크린 샷을 보지 마십시오.
다음과 같이 코드를 복사하십시오. <!-버튼을 클릭하여 팝업 한 다음 버튼을 클릭하여 숨 깁니다.
<button type = "button"data-toggle = "popover"data-content = "그리고 여기 놀라운 콘텐츠가 있습니다. 매우 매력적입니다."> 팝업/숨기기 위해 나를 클릭하십시오. </button>
버튼을 클릭하면 나타나면 버튼을 클릭하고 사라집니다. 빈 공간에서 클릭하고 숨기려면 어떻게해야합니까?
Data-Trigger = "Focus"를 추가하여 초점을 숨기려면 트리거가 트리거를 의미합니다.
다음과 같이 코드를 복사하십시오. <!- 버튼을 클릭하여 팝업을 클릭하고 빈 공간을 클릭하여 숨 깁니다. A 태그를 사용하는 것이 가장 좋습니다. 물론 버튼을 사용할 수도 있습니다->
라고
Data-Trigger = "Focus"Data-Content = "이 아름다운 콘텐츠입니다."
7. 경고 상자 구성 요소
알아채다:
1 : data-dismiss = "Alert"사용
2 : 플러그인은 클릭을 추가하고 경고 메시지에 사라질 수 있습니다.
3 : 닫기 버튼을 사용하는 경우, 즉 닫기 클래스가 사용될 때 경고의 첫 번째 자식 요소 여야하며 텍스트는 그 전에 나타나지 않아야합니다.
코드를 살펴 보겠습니다.
<!-경고 상자-> <div id = "myalert"> <button type = "button"data-dismiss = "alert"aria-label = "close"> <span aria-hidden = "true"> </span> </button> <span> 환영 </span> <button type = "button"> 세부 사항 </button> <div id = "button type =" "button-dispist". aria-label = "close"> <span aria-hidden = "true"> x </span> </button> <span> 환영 </span> <버튼 유형 = "버튼"> 세부 사항 </button> </div>
JavaScript에 여러 개의 경고 상자가 있고 경고 상자를 닫으려면 다음과 같이 JavaScript에 다음 코드를 추가하십시오.
$ ( " #myalert"). Alert ( 'Close') // 첫 번째 경고 상자가 닫히면 또는 #MyAlert가 #myAlert1로 교체되면 두 번째 경고 상자가 $ ( ' #myAlert1')를 닫습니다 ( 'wast.bs.alert', function () {alert ( "close"); - 닫기 단추가 클릭되면 ALERT 이벤트가 실행됩니다})8. 버튼 구성 요소
알아채다:
1 : 버튼의 상태를 전환합니다 (비활성화 또는 켜기)-AutoComplete = "Off"를 사용하여 달성됩니다.
2 : 툴바 등으로 여러 버튼을 만듭니다.
3 : 데이터로드-텍스트를 설정하여로드 상태를 설정하십시오 = "로드 ..."
<!-> <button type = "button"id = "myButton"data-loading-text = "로드 ..."autocomplete = "꺼짐">로드 스테이트 </button> <button "data-toggle ="button "aria-pressed ="false "autocomplete ="autocomplete </button> <div datoggle "> 유형 = "checkbox"autocomplete = "off"cheecked> home </label> <label> <label> <label> <input type = "checkbox"autocomplete = "off"> message </label> <label> <input type = "checkbox"autocomplete = "off"> 프로파일 </label> </div>
버튼을 클릭 한 후 콘텐츠를 변경하려면 Data-Complete-Text = "xxxx"를 추가하고 다음과 같이 JavaScript 코드를 추가하십시오.
코드 코드를 다음과 같이 복사하십시오. <!-트리거를 클릭 한 후 컨텐츠 데이터를 변경 한 후 완성 된 컨텐츠를 나타냅니다->
<button type = "button"data-complete-text = "finish"autocomplete = "off"> </button> <cript> $ ( '. mybtn'). on ( 'click'{$ (this) .button ( 'complete')) </script>를 클릭 한 후 컨텐츠가 자동으로 변경됩니다.
스위치 상태로 버튼을 설정하고 스위치 상태로 시간을 설정하려면 다음 코드를 JavaScript에 추가 할 수 있습니다.
<cript> $ ( '#myButton'). on ( 'click', function (e) {var btn = $ (this) .Button ( 'loading'); settimeout (function (e) {btn.button ( 'Reset')); // 원래 상태로 설정되게 설정}) </script>9. 접는 프레임 어셈블리
참고 : Data-Toggle = "Collapse"를 사용하여 코드를보십시오.
<A 역할 = "버튼"data-toggle = "Collapse"href = "#collapseexample"aria-expanded = "false"aria-controls = "collapseexample"> href와의 링크 </a> <div id = "charpseexample"> <div> 안녕하세요, 테스트입니다! </div> </div>
또한 아래와 같이 패널 그룹과 함께 사용할 수 있습니다.
<!-패널 그룹-> <div id = "myPanel"role = "TACKIST"> <!-첫 번째 패널-> <div> <div robel = "ab"id = "headingone"> <h4> <a data-toggle = "collapse"data-parent = "#mypanel"href = "#collapseon </a> </h4> </h4> </h4> id = "Collapseone"robile = "tabpanel"> <div> 안녕하세요 </div> </div> </div> <!-두 번째 패널-> </div>
컨텐츠 부분을 제어하기 위해 집을 클릭하면 컨텐츠에 해당하는 ID 인 HREF = "#CollapSeone"을 설정해야합니다.
이전에 사용 된 이벤트와 유사하게 이러한 구성 요소는 다음과 같이 비슷한 시간 사용이 있습니다.
<script type = "text/javaScript"> $ ( '#myPanel'). on ( 'hidden.bs.collapse', function () {alert ( "2222");}) </script>10. 카우셀 슬라이딩 구성 요소
참고 : 우리가 일반적으로 만든 회전 목마와 같은 Data-Ride = "Carousel"을 사용하십시오. 먼저 내가 만든 회전 목마 다이어그램 코드를 살펴 보겠습니다.
<div id = "mycontainer"> --- 데이터-표적의 목표 <div id = "carousel1"data-ride = "carousel"> <ol>-인디케이터는 슬라이딩 표시를 나타냅니다. data-slide-to = "1"> </li> <li data-target = "#carousel1"data-slide-to = "2"> </li> </ol> <!-렌더링 컨텐츠-> <div role = "listbox"> <div> <img src = "bg.jpeg"> <div>-carousel-caption carries <h3> sungrean </h3> <p> 선샤인 기분, 당신과 나는 당신과 함께 갈 것입니다 </p> </div> </div> <div> <img src = "timg.jpg"> </div> <div> <img src = "xx.jpg"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <a href = "" "" "" "" "". <span aria-hidden = "true"> </span> <span> previous </span> </a> <a href = "#carousel1"role = "button"data-slide = "next"> <span aria-hidden = "true"> </span> next </span> </a> </div>
효과는 다음과 같습니다.
슬라이딩 속도와 관련하여 Data-InterVal = "2000"을 직접 추가하여 2 초 스위치 토글을 설정할 수 있지만이 방법의 문제는 다음과 같습니다.
브라우저를 새로 고치면 전환하기 전에 왼쪽 및 오른쪽 버튼을 수동으로 클릭해야합니다. 가장 좋은 방법은 JavaScript로 설정하는 것입니다. 다음 코드에 표시된대로
<script type = "text/javaScript"> $ ( ". carousel"). carousel ({interal : 2000;}) </script>11. 부착 구성 요소
참고 : 사용 위치 : 포지셔닝을 위해 고정, Data-Spy = "affix"를 사용하여 데이터 오프셋과 결합하여 모니터링을 달성하고 특정 이벤트가 발생하면 오프셋이 발생합니다. 다음 코드를 읽으십시오.
<div> <!-그리드 시스템의 레이아웃-> <div> <ul> <li> 11111111111 </li> <li> 222222222222 </li> <li> 33333333333333333 </li> <li> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444OOOOOMA <li> 5555555555 </li> <li> 6666666666666 </li> <li>7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111음 추출 추정 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 <div> <ul> <li> 11111111111111 </li> <li> 222222222222 </li> <li> 3333333333333333 </li> <li> 4444444444444444444444444444 </li> <li> 5555555555555555555555 <li> 66666666666666 </li> <li> 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 개의 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script> <text/javascript "> $ ( '. 오프셋 : {}}) $ ( '. JS-Affixed-Element-Bottom'). affix ({오프셋 : {하단 : 200} --- 마우스가 하단으로 굴러 가면 DIV가 자동으로 하단에서 200px로 이동합니다}) </script>JS 구성 요소는 거의 여기에 있으며 부트 스트랩의 프레임 워크를 배우는 것은 거의 끝났습니다. 다음 기사는 끝났습니다. 나는 부트 스트랩을 사용하여 특별히 페이지를 디자인하여 그것을 만들어 공유 할 계획입니다. 부트 스트랩 프레임 워크를 배우고 있다면 의사 소통하고 배우십시오!
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.