트위터 Bootstrap에서 슬라이딩 버튼

1375 단어 TwitterBootstrap
Bootsnipp이라는 트위터 Bootstrap 코드를 공개할 수 있는 서비스를 찾았기 때문에 겸사겸사 사용해 봤습니다.
  • http://bootsnipp.com/snippets/00GPD

  • 사용법, 이동하는 샘플 자체는 그대로 붙이고 적혀 있으니 저쪽 w 참조
    트위터 부트스트랩의 자바스크립트 분류, → 버튼의 경우'싱글투글'을 기반으로 한 간단한 구조 설명이다.
    일반 버튼(.btn)에 data-toggle="button"까지 추가하면 클릭할 때 .active클래스가 추가되지만 이 클래스를 추가할 때는 CSS로 다양한 스티커를 붙인다.
    구체적으로 CSS3의 transition를 사용하여 오른쪽으로 이동합니다.간단하네요... (JavaScript로 구현한 것이 아닙니다. 탓하지 마세요...)
    원래 float로 이동하려고 했는데 floattranssition이 효과가 없다고 생각했어요.
  • http://oli.jp/2010/css-animatable-properties/
  • 어쩔 수 없어서 margin-left: 등으로 움직이고 있어요.결과적으로 버튼 크기가 변경되면 CSS와 같은 스팸 사양을 수정해야 합니다.응.
    무슨 묘책이 있으면 내가 고칠 것이다.
    샘플 코드는 트위터 Bootstrap3에서 실행되지만 트위터 Bootstrap2에도 Single togle Button이 존재하므로 조금만 수정하면 될 것 같습니다.
    꼭 활용하세요.

    좋은 웹페이지 즐겨찾기