1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00

Use <h1> for all modal-title examples/uses (#37210)

* Use `fs-` font sizing classes where needed
* Also add info callout about heading hierarchy in modals
This commit is contained in:
Patrick H. Lauke
2022-10-02 11:02:36 +01:00
committed by GitHub
parent 812f891bfc
commit 0a5f6e078c
5 changed files with 45 additions and 41 deletions

View File

@@ -1539,7 +1539,7 @@ direction: rtl
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
<h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
@@ -1556,7 +1556,7 @@ direction: rtl
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
@@ -1573,7 +1573,7 @@ direction: rtl
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
@@ -1596,7 +1596,7 @@ direction: rtl
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">

View File

@@ -1535,7 +1535,7 @@ body_class: "bg-light"
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -1552,7 +1552,7 @@ body_class: "bg-light"
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -1569,7 +1569,7 @@ body_class: "bg-light"
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -1588,7 +1588,7 @@ body_class: "bg-light"
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">

View File

@@ -59,7 +59,7 @@ body_class: ""
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header border-bottom-0">
<h5 class="modal-title">Modal title</h5>
<h1 class="modal-title fs-5">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body py-0">
@@ -133,8 +133,8 @@ body_class: ""
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header p-5 pb-4 border-bottom-0">
<!-- <h5 class="modal-title">Modal title</h5> -->
<h2 class="fw-bold mb-0">Sign up for free</h2>
<!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
<h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>