대화 상자는 부트스트랩을 기반으로 합니까?

JQuery UI를 사용해 본 사람들은 풍부한 기능을 갖춘 대화 상자 팝업 상자 구성 요소가 있다는 것을 알아야 합니다.

jQuery UI의 대화 상자와 유사하게 Bootstrap에는 팝업 상자 구성 요소도 내장되어 있습니다. (권장 학습: Bootstrap 비디오 튜토리얼)

부트스트랩 문서 http://v3.bootcss.com/comComponents/를 열면 해당 대화 상자가 bootstrap.js 및 bootstrap.css에 직접 포함되어 있음을 볼 수 있습니다. 부트스트랩 파일만 추가하면 해당 대화 상자 구성 요소를 직접 사용할 수 있어 매우 편리하지 않나요?

이번 글에서는 새로운 편집 기능을 기반으로 한 부트스트랩 대화상자 사용법을 소개하겠습니다. 더 이상 고민하지 않고 직접 사용 방법을 살펴보겠습니다.

html 코드를 통해 표시

<!-- Button trigger modal 弹出框的触发器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal 弹出框的结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

이 방법은 간단하고 직관적이지만 html의 '가중치'가 증가하므로 대규모 사용에는 권장되지 않습니다.

js를 통해 표시됩니다.

가장 쉬운 방법 구현 방법:

BootstrapDialog.show({
  message: 'Hi Apple!'
});

Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

위 내용은 대화 상자는 부트스트랩을 기반으로 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!