权威阿尔卑斯山高手实战玩法及经验揭秘

Default Modal

<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#exampleModal"><span>Launch demo modal</span></button><!-- default Modal--><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">... </div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>

Static Backdrop

Copy

copy

<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><span>Launch static backdrop modal</span></button><!-- static Modal --><div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">... </div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Understood</button></div></div></div></div>

Scrolling Long Content

Copy

copy

<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#scrollable"><span>Launch demo modal</span></button><!-- Scrollable modal --><div class="modal fade" id="scrollable" tabindex="-1" aria-labelledby="scrollableLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="scrollable">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">... </div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>

Vertically Centered

Copy

copy

<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#centered"><span>Launch demo modal</span></button><!-- Vertically centered --><div class="modal fade" id="centered" tabindex="-1" aria-labelledby="centeredLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="centeredLabel">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">... </div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>

Using The Grid

Copy

copy

<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#grid"><span>Launch demo modal</span></button><!-- Using the grid --><div class="modal fade" id="grid" tabindex="-1" aria-labelledby="gridLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="gridLabel">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="container-fluid"><div class="row mb-4"><div class="col-md-4 border bg-light">.col-md-4</div><div class="col-md-4 ms-auto border bg-light">.col-md-4 .ms-auto</div></div><div class="row mb-4"><div class="col-md-3 ms-auto border bg-light">.col-md-3 .ms-auto</div><div class="col-md-2 ms-auto border bg-light">.col-md-2 .ms-auto</div></div><div class="row mb-4"><div class="col-md-6 ms-auto border bg-light">.col-md-6 .ms-auto</div></div><div class="row"><div class="col-sm-9 border bg-light">Level 1:.col-sm-9 <div class="row"><div class="col-8 col-sm-6 border bg-light">Level 2:.col-8 .col-sm-6 </div><div class="col-4 col-sm-6 border bg-light">Level 2:.col-4 .col-sm-6 </div></div></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>

Modal

Default Modal

Static Backdrop

Scrolling Long Content

Vertically Centered

Using The Grid

权威阿尔卑斯山彩票攻略