0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00

docs(cheatsheet): various fixes

This commit is contained in:
Gaël Poupard 2020-12-03 12:38:20 +02:00 committed by XhmikosR
parent 153f6c72ce
commit 082723f3f4
4 changed files with 168 additions and 122 deletions

View File

@ -2,9 +2,9 @@
layout: examples
title: ورقة غش
extra_css:
- "../cheatsheet/cheatsheet.rtl.css"
- "../cheatsheet/cheatsheet.rtl.css"
extra_js:
- src: "../cheatsheet/cheatsheet.js"
- src: "../cheatsheet/cheatsheet.js"
body_class: "bg-light"
direction: rtl
---
@ -23,48 +23,48 @@ direction: rtl
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">
<a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#contents-collapse" aria-controls="contents-collapse">محتويات</a>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button>
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
<li><a href="#typography">الطباعة</a></li>
<li><a href="#images">صور</a></li>
<li><a href="#tables">جدول</a></li>
<li><a href="#figures">رقم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#typography">الطباعة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li>
</ul>
</li>
<li class="my-2">
<a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#forms-collapse" aria-controls="forms-collapse">نماذج</a>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">نماذج</button>
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
<li><a href="#overview">نظرة عامة</a></li>
<li><a href="#disabled-forms">أشكال المعطلين</a></li>
<li><a href="#sizing">تحجيم</a></li>
<li><a href="#input-group">مجموعة الإدخال</a></li>
<li><a href="#floating-labels">تسميات عائمة</a></li>
<li><a href="#validation">التحقق</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
</ul>
</li>
<li class="my-2">
<a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#components-collapse" aria-controls="components-collapse">مكونات</a>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
<li><a href="#accordion">الأكورديون</a></li>
<li><a href="#alerts">إنذار</a></li>
<li><a href="#badge">شارة</a></li>
<li><a href="#breadcrumb">مسار التنقل</a></li>
<li><a href="#buttons">أزرار</a></li>
<li><a href="#button-group">مجموعة الأزرار</a></li>
<li><a href="#card">بطاقة</a></li>
<li><a href="#carousel">شرائح عرض</a></li>
<li><a href="#dropdowns">هبوط قطرة</a></li>
<li><a href="#list-group">مجموعة القوائم</a></li>
<li><a href="#modal">مشروط</a></li>
<li><a href="#navs">التنقل</a></li>
<li><a href="#navbar">شريط التنقل</a></li>
<li><a href="#pagination">ترقيم الصفحات</a></li>
<li><a href="#popovers">بوبوفيرس</a></li>
<li><a href="#progress">شريط التقدم</a></li>
<li><a href="#scrollspy">مخطوطة</a></li>
<li><a href="#spinners">المغازل</a></li>
<li><a href="#toasts">نخب</a></li>
<li><a href="#tooltips">تلميحات الأدوات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">الأكورديون</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">تلميحات الأدوات</a></li>
</ul>
</li>
</ul>
@ -72,7 +72,7 @@ direction: rtl
</aside>
<div class="bd-cheatsheet container-fluid bg-white">
<section id="content">
<h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
<article class="my-3" id="typography">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
@ -318,7 +318,7 @@ direction: rtl
</section>
<section id="forms">
<h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2>
<article class="my-3" id="overview">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
@ -510,7 +510,7 @@ direction: rtl
<div>
{{< example show_markup="false" >}}
<form class="row g-3">
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">عنوان بريد الكتروني</label>
@ -601,7 +601,7 @@ direction: rtl
</section>
<section id="components">
<h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2>
<article class="my-3" id="accordion">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">

View File

@ -23,38 +23,53 @@ body {
/* Table of contents */
.bd-aside a {
padding: .125rem 1rem;
color: inherit;
}
.bd-aside a:not(:hover) {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: .3125rem;
color: rgba(0, 0, 0, .65);
text-decoration: none;
}
.bd-aside a:not(:only-child) {
margin-left: -1rem;
.bd-aside a:hover,
.bd-aside a:focus {
color: rgba(0, 0, 0, .85);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside a:not(:only-child)::before {
width: 1rem;
.bd-aside .active {
font-weight: 600;
color: rgba(0, 0, 0, .85);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
border: 0;
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
color: rgba(0, 0, 0, .85);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .btn:focus {
box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
}
.bd-aside .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
.bd-aside a:not(:only-child):not(.collapsed) {
color: #000;
.bd-aside .btn[aria-expanded="true"]::before {
transform: rotate(90deg)/* rtl:ignore */;
}
.bd-aside a:not(:only-child):not(.collapsed)::before {
transform: rotate(90deg);
}
.bd-aside .active {
font-weight: 700;
color: #000;
}
/* Examples */
.scrollspy-example {
@ -125,8 +140,17 @@ body {
scroll-margin-top: 2rem;
}
.bd-cheatsheet section > h2 {
grid-column: 1 / span 2;
.bd-cheatsheet section > h2::before {
position: absolute;
/* rtl:begin:ignore */
top: 0;
right: 0;
bottom: -2rem;
left: 0;
/* rtl:end:ignore */
z-index: -1;
content: "";
background-image: linear-gradient(to bottom, #fff calc(100% - 3rem), transparent);
}
.bd-cheatsheet article,

View File

@ -23,38 +23,53 @@ body {
/* Table of contents */
.bd-aside a {
padding: .125rem 1rem;
color: inherit;
}
.bd-aside a:not(:hover) {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-right: .3125rem;
color: rgba(0, 0, 0, .65);
text-decoration: none;
}
.bd-aside a:not(:only-child) {
margin-right: -1rem;
.bd-aside a:hover,
.bd-aside a:focus {
color: rgba(0, 0, 0, .85);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside a:not(:only-child)::before {
width: 1rem;
.bd-aside .active {
font-weight: 600;
color: rgba(0, 0, 0, .85);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
border: 0;
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
color: rgba(0, 0, 0, .85);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .btn:focus {
box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
}
.bd-aside .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
.bd-aside a:not(:only-child):not(.collapsed) {
color: #000;
.bd-aside .btn[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.bd-aside a:not(:only-child):not(.collapsed)::before {
transform: rotate(-90deg);
}
.bd-aside .active {
font-weight: 700;
color: #000;
}
/* Examples */
.scrollspy-example {
@ -123,8 +138,15 @@ body {
scroll-margin-top: 2rem;
}
.bd-cheatsheet section > h2 {
grid-column: 1 / span 2;
.bd-cheatsheet section > h2::before {
position: absolute;
top: 0;
right: 0;
bottom: -2rem;
left: 0;
z-index: -1;
content: "";
background-image: linear-gradient(to bottom, #fff calc(100% - 3rem), transparent);
}
.bd-cheatsheet article,

View File

@ -2,9 +2,9 @@
layout: examples
title: Cheatsheet
extra_css:
- "cheatsheet.css"
- "cheatsheet.css"
extra_js:
- src: "cheatsheet.js"
- src: "cheatsheet.js"
body_class: "bg-light"
---
@ -22,48 +22,48 @@ body_class: "bg-light"
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">
<a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#contents-collapse" aria-controls="contents-collapse">Contents</a>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
<li><a href="#typography">Typography</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#figures">Figures</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#typography">Typography</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li>
</ul>
</li>
<li class="my-2">
<a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#forms-collapse" aria-controls="forms-collapse">Forms</a>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
<li><a href="#overview">Overview</a></li>
<li><a href="#disabled-forms">Disabled forms</a></li>
<li><a href="#sizing">Sizing</a></li>
<li><a href="#input-group">Input group</a></li>
<li><a href="#floating-labels">Floating labels</a></li>
<li><a href="#validation">Validation</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#overview">Overview</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li>
</ul>
</li>
<li class="my-2">
<a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#components-collapse" aria-controls="components-collapse">Components</a>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
<li><a href="#accordion">Accordion</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#badge">Badge</a></li>
<li><a href="#breadcrumb">Breadcrumb</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#button-group">Button group</a></li>
<li><a href="#card">Card</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#dropdowns">Dropdowns</a></li>
<li><a href="#list-group">List group</a></li>
<li><a href="#modal">Modal</a></li>
<li><a href="#navs">Navs</a></li>
<li><a href="#navbar">Navbar</a></li>
<li><a href="#pagination">Pagination</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#progress">Progress</a></li>
<li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="#spinners">Spinners</a></li>
<li><a href="#toasts">Toasts</a></li>
<li><a href="#tooltips">Tooltips</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">Accordion</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li>
</ul>
</li>
</ul>
@ -71,7 +71,7 @@ body_class: "bg-light"
</aside>
<div class="bd-cheatsheet container-fluid bg-white">
<section id="content">
<h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
<article class="my-3" id="typography">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
@ -317,7 +317,7 @@ body_class: "bg-light"
</section>
<section id="forms">
<h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2>
<article class="my-3" id="overview">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
@ -509,7 +509,7 @@ body_class: "bg-light"
<div>
{{< example show_markup="false" >}}
<form class="row g-3">
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
@ -600,7 +600,7 @@ body_class: "bg-light"
</section>
<section id="components">
<h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Components</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Components</h2>
<article class="my-3" id="accordion">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">