Twitter Bootstrap 3 - JavaScript 구성 요소

트위터 부트 스트랩 : 간단하고 강력한 CSS 프레임 워크 및 JavaScript 구성 요소 세부 설명

키 포인트 :

Twitter Bootstrap 3은 포괄적 인 JavaScript 구성 요소를 갖춘 강력한 CSS 프레임 워크이며 CSS를 이해하지 않더라도 템플릿을 쉽게 만들 수 있습니다.

Bootstrap 3의 JavaScript 구성 요소는 Modal, Dropdown, ScrollSpy, Tab, Tooltip, Popover 및 Alert를 포함한 jQuery를 기반으로 작성됩니다. 각 구성 요소에는 고유 한 특정 기능이 있으며 다양한 프로젝트 요구에 맞게 사용자 정의 할 수 있습니다. 이 JavaScript 구성 요소를 사용하려면 getBootstrap.com에서 Bootstrap 3을 다운로드하고 웹 브라우저 (권장 Google Chrome) 및 텍스트 편집기 (예 : Sublime Text)를 다운로드해야합니다. JavaScript 구성 요소가 올바르게 작동하도록하려면 부트 스트랩 CSS가 포함되어야합니다. Bootstrap 3의 JavaScript 구성 요소는 그것이 인기있는 중요한 이유 중 하나입니다. 이들은 CSS와 설계 효율성을 향상시키려는 디자이너를 이해하지 못하는 개발자에게 편리한 솔루션을 제공합니다.

사용하십시오 :
• 먼저 GetBootstrap.com에서 Bootstrap 3을 다운로드하고 웹 브라우저 (바람직하게는 Chrome) 및 텍스트 편집기 (숭고한 텍스트를 사용하고 있음)를 준비해야합니다. Bootstrap의 JavaScript 구성 요소는 jQuery를 기반으로 작성되므로 jQuery를 사용해야합니다. Bootstrap 3을 다운로드 한 후
폴더의 내용을 새 작업 공간에 복사하십시오. JavaScript를 배우기 위해 왜 여전히 CSS와 글꼴 폴더가 필요한지 궁금 할 것입니까? 많은 부트 스트랩 JavaScript 구성 요소는 CSS에 의존하여 제대로 작동하므로 부트 스트랩 CS가 포함되지 않으면 제대로 작동하지 않습니다. Bootstrap 3을 사용하면 모든 JavaScript 구성 요소를 다운로드하지 않고도 각 모듈을 별도로 사용할 수 있습니다. 이 튜토리얼은 모든 구성 요소를 포함하지 않고 모듈 만 사용하는 방법으로 끝납니다. 이 튜토리얼은 다음과 같은 주요 트위터 부트 스트랩 자바 스크립트 구성 요소를 설명합니다.
• 모달 (모달 박스) 드롭 다운 (드롭 다운 메뉴) 스크롤스피 (스크롤 듣기) 탭 (탭) 툴팁 (ToolTip) 팝 오버 (팝업) 경고 (경고 상자)
우리는 각 구성 요소를 하나씩 설명하고 사용자 정의 부트 스트랩 3 JavaScript 구성 요소를 얻기위한 실험을 수행합니다. 데모 페이지를 보려면 여기를 클릭하십시오.
모달 (모달 박스)
모달 박스는 전통적인 경고 상자와 유사하지만 모달 제목, 모달 바디, 모달 바닥 글, 닫기 버튼 및 오른쪽 상단의 닫기 기호를 포함하여 더 강력합니다. 지불을하거나 계정 삭제 전 등과 같은 확인 창에 많은 응용 프로그램에서 사용할 수 있습니다.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  启动演示模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="模态标题">模态标题</h4>
      </div>
      <div class="modal-body">
        <h1 id="Hello-World">Hello World!</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

부트 스트랩 모달에는 제목, 신체 및 바닥 글의 세 부분이 포함되어 있습니다. 각 섹션에 배치 할 내용을 결정할 수 있습니다.

(후속 구성 요소 드롭 다운, 스크롤 스피, 탭, 툴팁, 팝 오버, 설명 및 예제 사진에 대한 경고, 원본 텍스트에 따라 추가하고 그림 형식을 변경하지 않음)

. 결론

이 자습서를 사용하면 Twitter Bootstrap이 jQuery 코드를 작성하지 않고 JavaScript 구성 요소를 작성하는 데 어떻게 도움이되는지 더 잘 이해해야합니다. 이 JavaScript 구성 요소는 Twitter 부트 스트랩 프레임 워크가 인기있는 주된 이유 중 하나입니다. CSS를 이해하지 못하는 개발자에게는 적합 할뿐만 아니라 설계자가 설계 효율성을 향상시키는 데 도움이됩니다. 다음 게시물에서는 Twitter Bootstrap 3의 회전 목마 구성 요소를 사용하여 슬라이더를 만드는 방법을 설명합니다. 궁금한 점이 있으면 의견 섹션에 메시지를 남겨주십시오. Twitter Bootstrap을 처음 사용하는 경우 Sitepoint의 저자 페이지를 방문하여 이전 Twitter Bootstrap 튜토리얼을 읽으십시오.

(원본 텍스트에 제공된 FAQ 부분은 필요에 따라 의사 결정자가 선택적으로 또는 직접 유지 될 수 있습니다.)

위 내용은 Twitter Bootstrap 3 - JavaScript 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!