Bootstrap 튜토리얼 노트 - JS 플러그인 3/3

bootstrap 플러그인을 배울 때 버전 2의 소개를 볼 때가 많습니다. 그렇지 않으면 많든 적든 한두 번 당황할 수 있습니다.
Bootstrap-JS 플러그인
bootstrap.js는 다양한 JS 효과를 제공합니다.만약 그 중의 어떤 효과만 원한다면, 그 중의 어떤 단독 파일을 인용하면 된다
1. 모드 상자modal.js
1. 정적
구조: (modal) > (modal-dialog) > (modal-content) > (modal-header + modal-body + modal-footer)

    

      

        

        
          

            
               ×
            
            
  
          
          

            
    
          
          

              
              
          
        

      

    

2. 동적
이전의 정태를 바탕으로 활성화 단추를 추가하면 됩니다. 정적 ID는 단추의 데이터-target과 귀속되어야 합니다.

3. 사이즈
우리modal원소의 하층원소modal-dialog는 사이즈의 크기를 조절하는 역할을 하는데 이를 바탕으로 두 가지 상태가 있는데 더 크고 더 작다

    

      

        

          ...
        
      
    

    

      

        

          ...
        
      
    

4. 애니메이션 효과 차단
modal 탭 요소에서fade류를 제거하면 됩니다
5. JS를 통해 호출
modal 요소 속성 추가tabindex="-1"
매개 변수
타입
기본값
기능
keyboard
boolean
true
키보드의 esc 키가 눌렸을 때 모드 상자를 닫습니다.
show
boolean
false
모드 상자가 초기화되면 바로 표시됩니다

    $('#myModal').modal(  )

2. 드롭다운 메뉴dropdown.js
css 구성 요소 보기 - 하단 메뉴 부분
3. 스크롤 감청scrollspy.js
데이터-spy="scroll"을 감청된 페이지 요소에 추가하고(대부분 바디에 추가) 데이터-target=".navbar"로 내비게이션을 연결합니다.

    ...

    
...

내비게이션 게이지의 링크에 해당하는 목표 id를 지정해야 합니다.

   
       ...
       
home
       ...
   

    

        

            
home
            ...
        
    

4. 탭 탭.js
1. html 구조
a 탭의href 속성이나 데이터-target에서 목표 내용을 지정하려면

    

        
홈 페이지
        ...
        
뉴스.
    

대상 컨텐트에 적절한 ID 이름 쓰기

    

      
...
       ...
      
...
    

2. 속성 호출
a 탭에서 데이터-toggle 속성을:tab 또는 pill로 설정하고 내용을 지정합니다

    

      
첫 페이지
       ...
      
뉴스.
    

3. JavaScript 호출
JavaScript를 통해 탭을 시작합니다. (탭마다 따로 활성화되어야 합니다.) 내비게이션에 ID 값을 추가해야 합니다.

    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })

5. 도구 알림tooltip.js
1. html 구조
a 태그 또는 버튼 태그, 데이터-toggle 속성에 속성 값 추가tooltip

  사과.

2. 활성화

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

3. 방향
데이터-placement 속성에left,right,top,bottom 방향 속성 값 추가

  사과.

6. 팝업 상자 popover.js
1. 기본 코드
title 속성 제목 추가, 데이터-content 속성 텍스트 내용 추가, 데이터-toggle 귀속 팝업 상자

    
          /     
    

2. 활성화

 $(function () {
      $('[data-toggle="popover"]').popover()
    })

3. 방향
사용법은 도구 알림과 같습니다: 데이터-placement = "left/right/top/bottom"
4. 사라질 수 있는 팝업 상자
더 좋은 크로스 브라우저와 크로스 플랫폼 효과를 위해서는 a 탭을 사용해야 합니다. button 탭을 사용할 수 없고 데이터-trigger="focus"와tabindex 속성도 포함해야 합니다.

    사라질 수 있는 팝업 상자

7. 접는collapse.js
데이터-toggle 바인딩collapse, button이면 데이터-target 연결 내용 ID

      
    누름단추

내용 클래스 이름.collapse, ID 값은 버튼과 응답해야 합니다.well 라벨이 팝업 내용을 감싸고 있습니다

    

      

        ...
      
    

8. 윤방도 카르셀.js
데이터 속성을 사용하면 윤방의 위치를 쉽게 제어할 수 있다.데이터-slide에는 prev나next가 포함되어 있으며 현재 프레임을 변경할 수 있습니다.또한 데이터-slide-to를 사용하면 특정한 프레임의 하표를 전달할 수 있다. 예를 들어 데이터-slide-to="2"를 사용하면 이 지정된 프레임으로 바로 이동할 수 있다. 하표는 0부터 계산한다.

    

       
      

        

        

        

      
      
      

        
1
        
2
        
3
      
      
      ‹
      ›