From 72d7e4612bc97230e2c1da0d5e2229ec21793e51 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 1 Aug 2019 18:07:17 +0300 Subject: Trying to get rid of the version number from folders. --- site/content/docs/examples/.stylelintrc | 15 + site/content/docs/examples/_index.md | 36 + site/content/docs/examples/album-rtl/index.html | 209 +++ site/content/docs/examples/album/index.html | 208 +++ site/content/docs/examples/blog-rtl/index.html | 202 +++ site/content/docs/examples/blog/blog.css | 103 ++ site/content/docs/examples/blog/blog.rtl.css | 103 ++ site/content/docs/examples/blog/index.html | 200 +++ site/content/docs/examples/carousel-rtl/index.html | 167 ++ site/content/docs/examples/carousel/carousel.css | 93 ++ .../docs/examples/carousel/carousel.rtl.css | 89 ++ site/content/docs/examples/carousel/index.html | 166 ++ .../docs/examples/cheatsheet-rtl/index.html | 1614 ++++++++++++++++++++ .../docs/examples/cheatsheet/cheatsheet.css | 169 ++ .../content/docs/examples/cheatsheet/cheatsheet.js | 68 + .../docs/examples/cheatsheet/cheatsheet.rtl.css | 162 ++ site/content/docs/examples/cheatsheet/index.html | 1598 +++++++++++++++++++ site/content/docs/examples/checkout-rtl/index.html | 232 +++ .../docs/examples/checkout/form-validation.css | 3 + .../docs/examples/checkout/form-validation.js | 20 + site/content/docs/examples/checkout/index.html | 232 +++ site/content/docs/examples/cover/cover.css | 53 + site/content/docs/examples/cover/index.html | 34 + .../docs/examples/dashboard-rtl/dashboard.js | 53 + .../content/docs/examples/dashboard-rtl/index.html | 253 +++ site/content/docs/examples/dashboard/dashboard.css | 100 ++ site/content/docs/examples/dashboard/dashboard.js | 53 + .../docs/examples/dashboard/dashboard.rtl.css | 96 ++ site/content/docs/examples/dashboard/index.html | 252 +++ site/content/docs/examples/grid/grid.css | 13 + site/content/docs/examples/grid/index.html | 188 +++ site/content/docs/examples/masonry/index.html | 105 ++ .../content/docs/examples/navbar-bottom/index.html | 41 + site/content/docs/examples/navbar-fixed/index.html | 40 + .../examples/navbar-fixed/navbar-top-fixed.css | 5 + .../content/docs/examples/navbar-static/index.html | 40 + .../docs/examples/navbar-static/navbar-top.css | 4 + site/content/docs/examples/navbars/index.html | 416 +++++ site/content/docs/examples/navbars/navbar.css | 7 + site/content/docs/examples/offcanvas/index.html | 139 ++ site/content/docs/examples/offcanvas/offcanvas.css | 67 + site/content/docs/examples/offcanvas/offcanvas.js | 7 + site/content/docs/examples/pricing/index.html | 117 ++ site/content/docs/examples/pricing/pricing.css | 7 + site/content/docs/examples/product/index.html | 148 ++ site/content/docs/examples/product/product.css | 69 + site/content/docs/examples/sign-in/index.html | 26 + site/content/docs/examples/sign-in/signin.css | 42 + .../docs/examples/starter-template/index.html | 50 + .../examples/starter-template/starter-template.css | 3 + .../docs/examples/sticky-footer-navbar/index.html | 52 + .../sticky-footer-navbar/sticky-footer-navbar.css | 7 + .../content/docs/examples/sticky-footer/index.html | 24 + .../docs/examples/sticky-footer/sticky-footer.css | 9 + 54 files changed, 8209 insertions(+) create mode 100644 site/content/docs/examples/.stylelintrc create mode 100644 site/content/docs/examples/_index.md create mode 100644 site/content/docs/examples/album-rtl/index.html create mode 100644 site/content/docs/examples/album/index.html create mode 100644 site/content/docs/examples/blog-rtl/index.html create mode 100644 site/content/docs/examples/blog/blog.css create mode 100644 site/content/docs/examples/blog/blog.rtl.css create mode 100644 site/content/docs/examples/blog/index.html create mode 100644 site/content/docs/examples/carousel-rtl/index.html create mode 100644 site/content/docs/examples/carousel/carousel.css create mode 100644 site/content/docs/examples/carousel/carousel.rtl.css create mode 100644 site/content/docs/examples/carousel/index.html create mode 100644 site/content/docs/examples/cheatsheet-rtl/index.html create mode 100644 site/content/docs/examples/cheatsheet/cheatsheet.css create mode 100644 site/content/docs/examples/cheatsheet/cheatsheet.js create mode 100644 site/content/docs/examples/cheatsheet/cheatsheet.rtl.css create mode 100644 site/content/docs/examples/cheatsheet/index.html create mode 100644 site/content/docs/examples/checkout-rtl/index.html create mode 100644 site/content/docs/examples/checkout/form-validation.css create mode 100644 site/content/docs/examples/checkout/form-validation.js create mode 100644 site/content/docs/examples/checkout/index.html create mode 100644 site/content/docs/examples/cover/cover.css create mode 100644 site/content/docs/examples/cover/index.html create mode 100644 site/content/docs/examples/dashboard-rtl/dashboard.js create mode 100644 site/content/docs/examples/dashboard-rtl/index.html create mode 100644 site/content/docs/examples/dashboard/dashboard.css create mode 100644 site/content/docs/examples/dashboard/dashboard.js create mode 100644 site/content/docs/examples/dashboard/dashboard.rtl.css create mode 100644 site/content/docs/examples/dashboard/index.html create mode 100644 site/content/docs/examples/grid/grid.css create mode 100644 site/content/docs/examples/grid/index.html create mode 100644 site/content/docs/examples/masonry/index.html create mode 100644 site/content/docs/examples/navbar-bottom/index.html create mode 100644 site/content/docs/examples/navbar-fixed/index.html create mode 100644 site/content/docs/examples/navbar-fixed/navbar-top-fixed.css create mode 100644 site/content/docs/examples/navbar-static/index.html create mode 100644 site/content/docs/examples/navbar-static/navbar-top.css create mode 100644 site/content/docs/examples/navbars/index.html create mode 100644 site/content/docs/examples/navbars/navbar.css create mode 100644 site/content/docs/examples/offcanvas/index.html create mode 100644 site/content/docs/examples/offcanvas/offcanvas.css create mode 100644 site/content/docs/examples/offcanvas/offcanvas.js create mode 100644 site/content/docs/examples/pricing/index.html create mode 100644 site/content/docs/examples/pricing/pricing.css create mode 100644 site/content/docs/examples/product/index.html create mode 100644 site/content/docs/examples/product/product.css create mode 100644 site/content/docs/examples/sign-in/index.html create mode 100644 site/content/docs/examples/sign-in/signin.css create mode 100644 site/content/docs/examples/starter-template/index.html create mode 100644 site/content/docs/examples/starter-template/starter-template.css create mode 100644 site/content/docs/examples/sticky-footer-navbar/index.html create mode 100644 site/content/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css create mode 100644 site/content/docs/examples/sticky-footer/index.html create mode 100644 site/content/docs/examples/sticky-footer/sticky-footer.css (limited to 'site/content/docs/examples') diff --git a/site/content/docs/examples/.stylelintrc b/site/content/docs/examples/.stylelintrc new file mode 100644 index 000000000..dc76dedbd --- /dev/null +++ b/site/content/docs/examples/.stylelintrc @@ -0,0 +1,15 @@ +{ + "extends": [ + "stylelint-config-twbs-bootstrap/css" + ], + "rules": { + "at-rule-no-vendor-prefix": null, + "comment-empty-line-before": null, + "media-feature-name-no-vendor-prefix": null, + "property-blacklist": null, + "property-no-vendor-prefix": null, + "selector-no-qualifying-type": null, + "selector-no-vendor-prefix": null, + "value-no-vendor-prefix": null + } +} diff --git a/site/content/docs/examples/_index.md b/site/content/docs/examples/_index.md new file mode 100644 index 000000000..4d747cd78 --- /dev/null +++ b/site/content/docs/examples/_index.md @@ -0,0 +1,36 @@ +--- +layout: single +title: Examples +description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. +aliases: "/examples/" +--- + +{{< list-examples.inline >}} +{{ range $entry := $.Site.Data.examples -}} +

{{ $entry.category }}

+

{{ $entry.description }}

+ {{ if eq $entry.category "RTL" -}} +
+

The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we'd love to get your insights.

+
+ {{ end -}} + + {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}
{{ end }} +
+ + +

{{ $example.name }}

+ +

{{ $example.description }}

+
+ {{ if (eq (add $i 1) $len) }}
{{ end }} + {{ end -}} +{{ end -}} +{{< /list-examples.inline >}} diff --git a/site/content/docs/examples/album-rtl/index.html b/site/content/docs/examples/album-rtl/index.html new file mode 100644 index 000000000..ff84f122b --- /dev/null +++ b/site/content/docs/examples/album-rtl/index.html @@ -0,0 +1,209 @@ +--- +layout: examples +title: مثال الألبوم +direction: rtl +--- + +
+ +
+
+ + + الألبوم + + +
+
+
+ +
+ +
+
+
+

مثال الألبوم

+

شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.

+

+ الدعوة الرئيسية للعمل + عمل ثانوي +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/examples/album/index.html b/site/content/docs/examples/album/index.html new file mode 100644 index 000000000..2d25d726a --- /dev/null +++ b/site/content/docs/examples/album/index.html @@ -0,0 +1,208 @@ +--- +layout: examples +title: Album example +--- + +
+ +
+
+ + + Album + + +
+
+
+ +
+ +
+
+
+

Album example

+

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

+

+ Main call to action + Secondary action +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/examples/blog-rtl/index.html b/site/content/docs/examples/blog-rtl/index.html new file mode 100644 index 000000000..c72171770 --- /dev/null +++ b/site/content/docs/examples/blog-rtl/index.html @@ -0,0 +1,202 @@ +--- +layout: examples +title: قالب المدونة +direction: rtl +extra_css: + - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" + - "../blog/blog.rtl.css" +include_js: false +--- + +
+
+
+
+ الإشتراك +
+
+ +
+
+ + بحث + + سجل +
+
+
+ +
+ +
+
+ +
+
+
+

عنوان مشاركة مدونة مميزة أطول

+

أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.

+

أكمل القراءة...

+
+
+ +
+
+
+
+ العالمية +

مشاركة مميزة

+
12 نوفمبر
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

+ أكمل القراءة +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}} +
+
+
+
+
+
+ التصميم +

عنوان الوظيفة

+
11 نوفمبر
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

+ أكمل القراءة +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}} +
+
+
+
+ +
+
+

+ من Firehose +

+ +
+

عينة مشاركة مدونة

+

1 يناير 2014 بواسطة Mark

+ +

تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.

+
+

إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.

+
+

ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.

+
+

إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.

+

عنوان

+

جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.

+

العنوان الفرعي

+

موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.

+ 
Example code block
+

تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.

+

العنوان الفرعي

+

مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.

+
    +
  • بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.
    • +
  • لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.
    • +
  • ذات مئات المشترك بالمحور عن وشعار.
    • +
+

لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.

+
    +
  1. عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.
    2. +
  2. ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.
    3. +
  3. علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.
    4. +
+

الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.

+
+ +
+

مشاركة مدونة أخرى

+

23 ديسمبر 2013 بواسطة Jacob

+ +

إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.

+
+

ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.

+
+

إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.

+

جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.

+
+ +
+

ميزة جديدة

+

14 ديسمبر 2013 بواسطة Jacob

+ +

تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.

+

مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.

+
    +
  • بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.
    • +
  • لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.
    • +
  • ذات مئات المشترك بالمحور عن وشعار.
    • +
+

لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.

+
+ + + +
+ +
+
+

حول

+

بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.

+
+ +
+

أرشيف

+
    +
  1. مارس 2014
    2. +
  2. شباط 2014
    3. +
  3. يناير 2014
    4. +
  4. ديسمبر 2013
    5. +
  5. نوفمبر 2013
    6. +
  6. أكتوبر 2013
    7. +
  7. سبتمبر 2013
    8. +
  8. اغسطس 2013
    9. +
  9. يوليو 2013
    10. +
  10. يونيو 2013
    11. +
  11. مايو 2013
    12. +
  12. ابريل 2013
    13. +
+
+ +
+

في مكان آخر

+
    +
  1. GitHub
    2. +
  2. Twitter
    3. +
  3. Facebook
    4. +
+
+
+ +
+ +
+ + diff --git a/site/content/docs/examples/blog/blog.css b/site/content/docs/examples/blog/blog.css new file mode 100644 index 000000000..437a540f6 --- /dev/null +++ b/site/content/docs/examples/blog/blog.css @@ -0,0 +1,103 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 0 3px 3px 0; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} +.blog-pagination > .btn { + border-radius: 2rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #727272; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/site/content/docs/examples/blog/blog.rtl.css b/site/content/docs/examples/blog/blog.rtl.css new file mode 100644 index 000000000..35eac731f --- /dev/null +++ b/site/content/docs/examples/blog/blog.rtl.css @@ -0,0 +1,103 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: Amiri, Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: Amiri, Georgia, "Times New Roman", serif; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 3px 0 0 3px; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} +.blog-pagination > .btn { + border-radius: 2rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #727272; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/site/content/docs/examples/blog/index.html b/site/content/docs/examples/blog/index.html new file mode 100644 index 000000000..e25d740b9 --- /dev/null +++ b/site/content/docs/examples/blog/index.html @@ -0,0 +1,200 @@ +--- +layout: examples +title: Blog Template +extra_css: + - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" + - "blog.css" +include_js: false +--- + +
+
+
+
+ Subscribe +
+
+ +
+
+ + Search + + Sign up +
+
+
+ +
+ +
+
+ +
+
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

Featured post

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+
+
+ Design +

Post title

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+ +
+
+

+ From the Firehose +

+ +
+

Sample blog post

+

January 1, 2014 by Mark

+ +

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.

+
+

Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.

+
+

Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. This is how we do it. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.

+
+

Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room pink flamingos in the pool.

+

Heading

+

Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.

+

Sub-heading

+

You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.

+ 
Example code block
+

Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.

+

Sub-heading

+

You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.

+
    +
  • Got a motel and built a fort out of sheets.
    • +
  • Your kiss is cosmic, every move is magic.
    • +
  • Suiting up for my crowning battle.
    • +
+

Takes you miles high, so high, 'cause she’s got that one international smile.

+
    +
  1. Scared to rock the boat and make a mess.
    2. +
  2. I could have rewrite your addiction.
    3. +
  3. I know you get me so I let my walls come down.
    4. +
+

After a hurricane comes a rainbow.

+
+ +
+

Another blog post

+

December 23, 2013 by Jacob

+ +

I am ready for the road less traveled. Already brushing off the dust. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.

+
+

Growing fast into a bolt of lightning. Be careful Try not to lead her on

+
+

I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.

+

This is transcendental, on another level, boy, you're my lucky star.

+
+ +
+

New feature

+

December 14, 2013 by Chris

+ +

From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.

+
    +
  • I hope you got a healthy appetite.
    • +
  • You're never gonna be unsatisfied.
    • +
  • Got a motel and built a fort out of sheets.
    • +
+

Don't need apologies. Boy, you're an alien your touch so foreign, it's supernatural, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.

+
+ + + +
+ +
+
+

About

+

Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above.

+
+ +
+

Archives

+
    +
  1. March 2014
    2. +
  2. February 2014
    3. +
  3. January 2014
    4. +
  4. December 2013
    5. +
  5. November 2013
    6. +
  6. October 2013
    7. +
  7. September 2013
    8. +
  8. August 2013
    9. +
  9. July 2013
    10. +
  10. June 2013
    11. +
  11. May 2013
    12. +
  12. April 2013
    13. +
+
+ +
+

Elsewhere

+
    +
  1. GitHub
    2. +
  2. Twitter
    3. +
  3. Facebook
    4. +
+
+
+ +
+ +
+ + diff --git a/site/content/docs/examples/carousel-rtl/index.html b/site/content/docs/examples/carousel-rtl/index.html new file mode 100644 index 000000000..def1abde8 --- /dev/null +++ b/site/content/docs/examples/carousel-rtl/index.html @@ -0,0 +1,167 @@ +--- +layout: examples +title: قالب دائري +direction: rtl +extra_css: + - "../carousel/carousel.rtl.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

عنوان

+

ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.

+

عرض التفاصيل

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

عنوان

+

هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.

+

عرض التفاصيل

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

عنوان

+

غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.

+

عرض التفاصيل

+
+
+ + + + +
+ +
+
+

العنوان الأول المميز. سيذهل عقلك.

+

في التخطيط التجارية هذا, إذ هذه الشمل موالية الخاطفة. أحدث وبدون اتفاق من غير, جعل عل أطراف مشاركة الأعمال. بل الى قادة واحدة, لهيمنة التجارية حتى ثم. هو وبالرغم ابتدعها بال. بوابة ماشاء أما أي, ما وفي أحكم غريمه التقليدية.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

أوه نعم ، هذا جيد. شاهد بنفسك.

+

صفحة وحرمان الأراضي أم أخذ, قد ذلك الثقيلة المتاخمة وبريطانيا. أخذ أن اللا لإعلان لهيمنة, وفي كل موالية الشّعبين. تكاليف الخاسرة لمّ لم, إذ بحق موالية الثقيلة. العظمى والفلبين تم عرض, جمعت شعار الحرة حيث بل. عرض و وترك اللازمة.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

وأخيرًا ، هذا. كش ملك.

+

تحرّك أراضي هذا عن, كرسي وكسبت يتم بل. بحق بل القوى وفنلندا, الجو واُسدل التكاليف وتم تم, بسبب ا السادس كان أن. وبعد ميناء من بلا, تصفح يتبقّ تلك هو. ان دول بخطوط وإعلان ومطالبة, المزيفة الأوروبية، عل حدى قام.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/examples/carousel/carousel.css b/site/content/docs/examples/carousel/carousel.css new file mode 100644 index 000000000..f91faec76 --- /dev/null +++ b/site/content/docs/examples/carousel/carousel.css @@ -0,0 +1,93 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} +.carousel-item > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing h2 { + font-weight: 400; +} +/* rtl:begin:ignore */ +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} +/* rtl:end:ignore */ + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + /* rtl:remove */ + letter-spacing: -.05rem; +} + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/examples/carousel/carousel.rtl.css b/site/content/docs/examples/carousel/carousel.rtl.css new file mode 100644 index 000000000..853640b97 --- /dev/null +++ b/site/content/docs/examples/carousel/carousel.rtl.css @@ -0,0 +1,89 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} +.carousel-item > img { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing h2 { + font-weight: 400; +} +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; +} + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/examples/carousel/index.html b/site/content/docs/examples/carousel/index.html new file mode 100644 index 000000000..2c0bc5129 --- /dev/null +++ b/site/content/docs/examples/carousel/index.html @@ -0,0 +1,166 @@ +--- +layout: examples +title: Carousel Template +extra_css: + - "carousel.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

Heading

+

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

Heading

+

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

Heading

+

And lastly this, the third column of representative placeholder content.

+

View details »

+
+
+ + + + +
+ +
+
+

First featurette heading. It’ll blow your mind.

+

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

Oh yeah, it’s that good. See for yourself.

+

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

And lastly, this one. Checkmate.

+

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/examples/cheatsheet-rtl/index.html b/site/content/docs/examples/cheatsheet-rtl/index.html new file mode 100644 index 000000000..9b9b81ea6 --- /dev/null +++ b/site/content/docs/examples/cheatsheet-rtl/index.html @@ -0,0 +1,1614 @@ +--- +layout: examples +title: ورقة غش +extra_css: + - "../cheatsheet/cheatsheet.rtl.css" +extra_js: + - src: "../cheatsheet/cheatsheet.js" +body_class: "bg-light" +direction: rtl +--- + +
+
+

+ Bootstrap + ورقة غش +

+ }}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR +
+
+ +
+
+

محتويات

+ +
+
+

الطباعة

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +

العرض 1

+

العرض 2

+

العرض 3

+

العرض 4

+

العرض 5

+

العرض 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

عنوان 1

+

عنوان 2

+

عنوان 3

+

عنوان 4

+

عنوان 5

+

عنوان 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ حيث وبدون الساحة وقوعها، أي, فقد عل مكّن تمهيد قتيل،. ولم والحزب الشرقي و, أضف بالفشل الخاسر استمرار ان. كل أما وحرمان للإتحاد, ٣٠ سبتمبر استعملت جهة, لعملة الثقيلة المتاخمة على لم. أي نفس دارت والفلبين. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

يمكنك استخدام علامة العلامة لتحديد نص .

+

من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.

+

من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.

+

من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.

+

سيتم عرض هذا السطر كما هو مسطر.

+

من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.

+

تم تقديم هذا السطر كنص عريض.

+

تم تقديم هذا السطر كنص مائل.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

بين كرسي والمعدات بالولايات تم. الذود اتّجة التقليدية يتم و, حيث وقرى.

+
شخص مشهور في عنوان المصدر
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • معقل الطريق واقتصار أم قام.
    • +
  • أمّا ولكسمبورغ ثم جُل, هو.
    • +
  • ان وبحلول لمحاكم الخارجية ومن.
    • +
  • بها بل العظمى إيطاليا الساحلية.
    • +
  • مدن قد وبحلول وأكثرها الدنمارك. +
      +
    • به، المشترك إتفاقية.
      • +
    • لإعادة الواقعة و.
      • +
    • وترك وانتهاءً ضرب.
      • +
    • الشتاء العالم، أي.
      • +
    +
    • +
  • ودول يتسنّى بتطويق لمّ في.
    • +
  • بعض و مرمى يتسنّى, في.
    • +
  • أسيا اعلان ومحاولة عل انه.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • لمّ مع.
    • +
  • أم دون.
    • +
  • ذات بل.
    • +
+ {{< /example >}} +
+
+
+
+

صور

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}} + {{< /example >}} +
+
+
+
+

جدول

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةاسم مستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةاسم مستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
Classعنوانعنوان
Defaultزنزانةزنزانة
{{ .name | title }}زنزانةزنزانة
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةاسم مستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

رقم

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
شرح للصورة أعلاه.
+
+ {{< /example >}} +
+
+
+ +
+

نماذج

+ +
+
+

نظرة عامة

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
لن نشارك بريدك الإلكتروني مع أي شخص آخر.
+
+
+ + +
+
+ + +
+
+ أزرار الراديو +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

أشكال المعطلين

+ }}#disabled-forms">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ أزرار اختيار المعوقين +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+
+

تحجيم

+ }}#sizing">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

مجموعة الإدخال

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+ @ + +
+
+ + @example.com +
+ +
+ https://example.com/users/ + +
+
+ $ + + .00 +
+
+ مع textarea + +
+ {{< /example >}} +
+
+
+
+

تسميات عائمة

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

التحقق

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ تبدو جيدا! +
+
+
+ + +
+ تبدو جيدا! +
+
+
+ +
+ @ + +
+ يرجى اختيار اسم المستخدم. +
+
+
+
+ + +
+ الرجاء إدخال مدينة صالحة. +
+
+
+ + +
+ الرجاء تحديد ولاية صالحة. +
+
+
+ + +
+ الرجاء تقديم رمز بريدي صالح. +
+
+
+
+ + +
+ يجب أن توافق قبل التقديم. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

مكونات

+ +
+
+

انهيارالأكورديون

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. +
+
+
+
+

+ +

+
+
+ أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. +
+
+
+
+

+ +

+
+
+ أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. +
+
+
+
+ {{< /example >}} +
+
+
+
+

إنذار

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

شارة

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +

عنوان المثال جديد

+

عنوان المثال جديد

+

عنوان المثال جديد

+

عنوان المثال جديد

+

عنوان المثال جديد

+

عنوان المثال جديد

+

عنوان المثال جديد

+

عنوان المثال جديد

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

أزرار

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

مجموعة الأزرار

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

بطاقة

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}} +
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+ اذهب لمكان ما +
+
+
+
+
+
+ متميز +
+
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+ اذهب لمكان ما +
+
+ 2 منذ أيام +
+
+
+
+
+
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+
+
    +
  • أسر كل أراض.
    • +
  • شرسة مشارف واستمرت.
    • +
  • مكن إذ كانتا.
    • +
+
+ رابط البطاقة + رابط آخر +
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="صورة" >}} +
+
+
+
عنوان البطاقة
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+

آخر تحديث منذ 3 دقائق

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

مجموعة القوائم

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
    +
  • الفرنسية الأثناء، أي.
    • +
  • كلّ في تعداد.
    • +
  • وتم الأخذ أساسي.
    • +
  • لدحر بشرية ابتدعها.
    • +
  • لكون أسيا ولاتّساع.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • الفرنسية الأثناء، أي.
    • +
  • كلّ في تعداد.
    • +
  • وتم الأخذ أساسي.
    • +
  • لدحر بشرية ابتدعها.
    • +
  • لكون أسيا ولاتّساع.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ كلّ في تعداد. + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + عنصر مجموعة قائمة {{ .name }} بسيط + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + +
+
+

ترقيم الصفحات

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

بوبوفيرس

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

شريط التقدم

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+ {{< /example >}} +
+
+
+
+

مخطوطة

+ }}">توثيق +
+ +
+
+ +
+

@fat

+

إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.

+

@mdo

+

بل الشتاء، بمحاولة جُل, فعل ببعض الأراضي مع. أما لم الأولى تكاليف, في بحشد جنوب الدول دون. في لمحاكم الإنزال تلك, أي بين الصفحة النزاع. عن دول فسقط احداث. وباءت التقليدي أم حيث, دنو ماذا واستمرت بل, غير ٣٠ بقعة هناك وفنلندا.

+

واحد

+

وزارة العاصمة الأوربيين حتى بـ. إذ دول مقاطعة بالرغم الأوروبي, كلّ هو نهاية لبولندا،, إذ مما ماشاء إتفاقية. إذ جهة تسبب وانتهاءً, تم تعد الذود أعلنت الأمريكية. ضرب نقطة حالية أن, ثم مارد للصين جديداً بين, بعد بل العظمى ابتدعها والفرنسي. ثم جعل يذكر ووصف, أثره، وعُرفت هو كان, بها قُدُماً البولندي ان. العالمي الجديدة، الفرنسية عرض كل.

+

اثنان

+

إذ قِبل أعلنت عرض. ما به، هاربر قتيل، الإكتفاء, أوزار المنتصر لبولندا، بلا بـ. وبدون بزمام وبحلول جُل أن, مكن أي لعدم مشارف. تم أخر دفّة وصغار وبالتحديد،, وقد اعلان العالم واشتدّت عن. أي حين الأولية لبولندا،, كما مايو وحتّى فرنسا ثم.

+

ثلاثة

+

لم هذا تسمّى إعادة مليون, ان يذكر فرنسا كما. إذ الدول الشتوية وأكثرها مدن. عرض بفرض بتحدّي الأوضاع تم. أحدث شاسعة تكبّد أخر من, ٣٠ حتى الخاطفة العالمية, هناك عالمية وقد لم. بشرية إتفاقية عل جهة, كل هُزم كانتا ضرب.

+

أن كلّ صفحة إعادة الأمريكية. بحث تشكيل ويعزى وتزويده بل. وحتّى وإعلان أن دار, من مكّن الصينية المشتّتون مكن, وبحلول للمجهود الأمريكي أن بحق. أم جهة وجهان الأرض.

+
+
+
+
+
+
+

المغازل

+ }}">توثيق +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

نخب

+ }}">توثيق +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

تلميحات الأدوات

+ }}">توثيق +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/examples/cheatsheet/cheatsheet.css b/site/content/docs/examples/cheatsheet/cheatsheet.css new file mode 100644 index 000000000..77aa0f23c --- /dev/null +++ b/site/content/docs/examples/cheatsheet/cheatsheet.css @@ -0,0 +1,169 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-right: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: .3125rem; + color: rgba(0, 0, 0, .65); + text-decoration: none; +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.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='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; + + /* rtl:raw: + transform: rotate(180deg) translateX(-2px); + */ + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg)/* rtl:ignore */; +} + + +/* Examples */ +.scrollspy-example { + position: relative; + height: 200px; + margin-top: .5rem; + overflow: auto; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 1rem 1rem 0; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + gap: 1rem; + grid-template-columns: 1fr 4fr 1fr; + grid-template-rows: auto; + } + + .bd-header { + position: fixed; + top: 0; + /* rtl:begin:ignore */ + right: 0; + left: 0; + /* rtl:end:ignore */ + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + gap: inherit; /* 1 */ + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + grid-template-rows: auto; + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .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, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/examples/cheatsheet/cheatsheet.js b/site/content/docs/examples/cheatsheet/cheatsheet.js new file mode 100644 index 000000000..541cf9350 --- /dev/null +++ b/site/content/docs/examples/cheatsheet/cheatsheet.js @@ -0,0 +1,68 @@ +/* global bootstrap: false */ + +(function () { + 'use strict' + + // Tooltip and popover demos + document.querySelectorAll('.tooltip-demo') + .forEach(function (tooltip) { + new bootstrap.Tooltip(tooltip, { + selector: '[data-bs-toggle="tooltip"]' + }) + }) + + document.querySelectorAll('[data-bs-toggle="popover"]') + .forEach(function (popover) { + new bootstrap.Popover(popover) + }) + + document.querySelectorAll('.toast') + .forEach(function (toastNode) { + var toast = new bootstrap.Toast(toastNode, { + autohide: false + }) + + toast.show() + }) + + // Disable empty links + document.querySelectorAll('[href="#"]') + .forEach(function (link) { + link.addEventListener('click', function (event) { + event.preventDefault() + }) + }) + + function setActiveItem() { + var hash = window.location.hash + + if (hash === '') { + return + } + + var link = document.querySelector('.bd-aside a[href="' + hash + '"]') + var active = document.querySelector('.bd-aside .active') + var parent = link.parentNode.parentNode.previousElementSibling + + link.classList.add('active') + + if (parent.classList.contains('collapsed')) { + parent.click() + } + + if (!active) { + return + } + + var expanded = active.parentNode.parentNode.previousElementSibling + + active.classList.remove('active') + + if (expanded && parent !== expanded) { + expanded.click() + } + } + + setActiveItem() + window.addEventListener('hashchange', setActiveItem) +})() diff --git a/site/content/docs/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/examples/cheatsheet/cheatsheet.rtl.css new file mode 100644 index 000000000..c1a4a1ccc --- /dev/null +++ b/site/content/docs/examples/cheatsheet/cheatsheet.rtl.css @@ -0,0 +1,162 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-left: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-right: .3125rem; + color: rgba(0, 0, 0, .65); + text-decoration: none; +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.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='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: rotate(180deg) translateX(-2px); + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg); +} + + +/* Examples */ +.scrollspy-example { + position: relative; + height: 200px; + margin-top: .5rem; + overflow: auto; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 0 1rem 1rem; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + gap: 1rem; + grid-template-columns: 1fr 4fr 1fr; + grid-template-rows: auto; + } + + .bd-header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + gap: inherit; /* 1 */ + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + grid-template-rows: auto; + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .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, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/examples/cheatsheet/index.html b/site/content/docs/examples/cheatsheet/index.html new file mode 100644 index 000000000..39637a487 --- /dev/null +++ b/site/content/docs/examples/cheatsheet/index.html @@ -0,0 +1,1598 @@ +--- +layout: examples +title: Cheatsheet +extra_css: + - "cheatsheet.css" +extra_js: + - src: "cheatsheet.js" +body_class: "bg-light" +--- + +
+
+

+ Bootstrap + Cheatsheet +

+ }}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet +
+
+ +
+
+

Contents

+ +
+
+

Typography

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Display 1

+

Display 2

+

Display 3

+

Display 4

+

Display 5

+

Display 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Heading 5

+

Heading 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ This is a lead paragraph. It stands out from regular paragraphs. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined.

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

A well-known quote, contained in a blockquote element.

+
Someone famous in Source Title
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list.
    • +
  • It appears completely unstyled.
    • +
  • Structurally, it's still a list.
    • +
  • However, this style only applies to immediate child elements.
    • +
  • Nested lists: +
      +
    • are unaffected by this style
      • +
    • will still show a bullet
      • +
    • and have appropriate left margin
      • +
    +
    • +
  • This may still come in handy in some situations.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list item.
    • +
  • And another one.
    • +
  • But they're displayed inline.
    • +
+ {{< /example >}} +
+
+
+
+

Images

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} + {{< /example >}} +
+
+
+
+

Tables

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
ClassHeadingHeading
DefaultCellCell
{{ .name | title }}CellCell
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

Figures

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
A caption for the above image.
+
+ {{< /example >}} +
+
+
+ +
+

Forms

+ +
+
+

Overview

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+
+ Radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

Disabled forms

+ }}#disabled-forms">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ Disabled radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+
+

Sizing

+ }}#sizing">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

Input group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ @ + +
+
+ + @example.com +
+ +
+ https://example.com/users/ + +
+
+ $ + + .00 +
+
+ With textarea + +
+ {{< /example >}} +
+
+
+
+

Floating labels

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

Validation

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

Components

+ +
+
+

Accordion

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+ {{< /example >}} +
+
+
+
+

Alerts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Badge

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

Buttons

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

Button group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Card

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+ Featured +
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+ 2 days ago +
+
+
+
+
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="Image" >}} +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

List group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
    +
  • A disabled item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ A simple default list group item + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + A simple {{ .name }} list group item + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + +
+
+

Pagination

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Popovers

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

Progress

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+ {{< /example >}} +
+
+
+
+

Scrollspy

+ }}">Documentation +
+ +
+
+ +
+

@fat

+

Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

+

@mdo

+

Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.

+

one

+

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

+

two

+

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

+

three

+

Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.

+

And some more placeholder content, for good measure.

+
+
+
+
+
+
+

Spinners

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

Toasts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

Tooltips

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/examples/checkout-rtl/index.html b/site/content/docs/examples/checkout-rtl/index.html new file mode 100644 index 000000000..5839cb112 --- /dev/null +++ b/site/content/docs/examples/checkout-rtl/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: مثال الخروج +direction: rtl +extra_css: + - "../checkout/form-validation.css" +extra_js: + - src: "../checkout/form-validation.js" +body_class: "bg-light" +--- + +
+
+
+ +

نموذج الخروج

+

فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.

+
+ +
+
+

+ عربتك + 3 +

+
    +
  • +
    +
    اسم المنتج
    + وصف مختصر +
    + $12 +
    • +
  • +
    +
    المنتج الثاني
    + وصف مختصر +
    + $8 +
    • +
  • +
    +
    البند الثالث
    + وصف مختصر +
    + $5 +
    • +
  • +
    +
    رمز ترويجي
    + EXAMPLECODE +
    + -$5 +
    • +
  • + مجموع (USD) + $20 +
    • +
+ +
+
+ + +
+
+
+
+

عنوان وصول الفواتير

+
+
+
+ + +
+ مطلوب الاسم الأول صالح. +
+
+ +
+ + +
+ مطلوب اسم أخير صالح. +
+
+ +
+ +
+ @ + +
+ اسم المستخدم الخاص بك مطلوب. +
+
+
+ +
+ + +
+ يرجى إدخال عنوان بريد إلكتروني صالح لتحديثات الشحن. +
+
+ +
+ + +
+ يرجى إدخال عنوان الشحن الخاص بك. +
+
+ +
+ + +
+ +
+ + +
+ يرجى تحديد بلد صالح. +
+
+ +
+ + +
+ يرجى تقديم حالة صالحة. +
+
+ +
+ + +
+ الرمز البريدي مطلوب. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

دفع

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + الاسم الكامل كما هو معروض على البطاقة +
+ الاسم على البطاقة مطلوب +
+
+ +
+ + +
+ رقم بطاقة الائتمان مطلوب +
+
+ +
+ + +
+ تاريخ انتهاء الصلاحية مطلوب +
+
+ +
+ + +
+ رمز الحماية مطلوب +
+
+
+ +
+ + +
+
+
+
+ +
diff --git a/site/content/docs/examples/checkout/form-validation.css b/site/content/docs/examples/checkout/form-validation.css new file mode 100644 index 000000000..e5ea31c40 --- /dev/null +++ b/site/content/docs/examples/checkout/form-validation.css @@ -0,0 +1,3 @@ +.container { + max-width: 960px; +} diff --git a/site/content/docs/examples/checkout/form-validation.js b/site/content/docs/examples/checkout/form-validation.js new file mode 100644 index 000000000..f8fd583de --- /dev/null +++ b/site/content/docs/examples/checkout/form-validation.js @@ -0,0 +1,20 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(function () { + 'use strict' + + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.querySelectorAll('.needs-validation') + + // Loop over them and prevent submission + Array.prototype.slice.call(forms) + .forEach(function (form) { + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) +})() diff --git a/site/content/docs/examples/checkout/index.html b/site/content/docs/examples/checkout/index.html new file mode 100644 index 000000000..fc9cfb6f8 --- /dev/null +++ b/site/content/docs/examples/checkout/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: Checkout example +extra_css: + - "form-validation.css" +extra_js: + - src: "form-validation.js" +body_class: "bg-light" +--- + +
+
+
+ +

Checkout form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
    • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + −$5 +
    • +
  • + Total (USD) + $20 +
    • +
+ +
+
+ + +
+
+
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required. +
+
+ +
+ + +
+ Valid last name is required. +
+
+ +
+ +
+ @ + +
+ Your username is required. +
+
+
+ +
+ + +
+ Please enter a valid email address for shipping updates. +
+
+ +
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+ + +
+ Please select a valid country. +
+
+ +
+ + +
+ Please provide a valid state. +
+
+ +
+ + +
+ Zip code required. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+ +
+ + +
+ Credit card number is required +
+
+ +
+ + +
+ Expiration date required +
+
+ +
+ + +
+ Security code required +
+
+
+ +
+ + +
+
+
+
+ + +
diff --git a/site/content/docs/examples/cover/cover.css b/site/content/docs/examples/cover/cover.css new file mode 100644 index 000000000..87afc3be9 --- /dev/null +++ b/site/content/docs/examples/cover/cover.css @@ -0,0 +1,53 @@ +/* + * Globals + */ + + +/* Custom default button */ +.btn-secondary, +.btn-secondary:hover, +.btn-secondary:focus { + color: #333; + text-shadow: none; /* Prevent inheritance from `body` */ +} + + +/* + * Base structure + */ + +body { + text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); + box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); +} + +.cover-container { + max-width: 42em; +} + + +/* + * Header + */ + +.nav-masthead .nav-link { + padding: .25rem 0; + font-weight: 700; + color: rgba(255, 255, 255, .5); + background-color: transparent; + border-bottom: .25rem solid transparent; +} + +.nav-masthead .nav-link:hover, +.nav-masthead .nav-link:focus { + border-bottom-color: rgba(255, 255, 255, .25); +} + +.nav-masthead .nav-link + .nav-link { + margin-left: 1rem; +} + +.nav-masthead .active { + color: #fff; + border-bottom-color: #fff; +} diff --git a/site/content/docs/examples/cover/index.html b/site/content/docs/examples/cover/index.html new file mode 100644 index 000000000..10362083e --- /dev/null +++ b/site/content/docs/examples/cover/index.html @@ -0,0 +1,34 @@ +--- +layout: examples +title: Cover Template +extra_css: + - "cover.css" +html_class: "h-100" +body_class: "d-flex h-100 text-center text-white bg-dark" +include_js: false +--- + +
+
+
+

Cover

+ +
+
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ + +
diff --git a/site/content/docs/examples/dashboard-rtl/dashboard.js b/site/content/docs/examples/dashboard-rtl/dashboard.js new file mode 100644 index 000000000..2a511ef8b --- /dev/null +++ b/site/content/docs/examples/dashboard-rtl/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace() + + // Graphs + var ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'الأحد', + 'الإثنين', + 'الثلاثاء', + 'الأربعاء', + 'الخميس', + 'يوم الجمعة', + 'يوم السبت' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/site/content/docs/examples/dashboard-rtl/index.html b/site/content/docs/examples/dashboard-rtl/index.html new file mode 100644 index 000000000..848c67c0b --- /dev/null +++ b/site/content/docs/examples/dashboard-rtl/index.html @@ -0,0 +1,253 @@ +--- +layout: examples +title: قالب لوحة القيادة +direction: rtl +extra_css: + - "../dashboard/dashboard.rtl.css" +extra_js: + - src: "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" + integrity: "sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" + - src: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" + integrity: "sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" + - src: "dashboard.js" +--- + +
+ اسم الشركة + + + +
+ +
+
+ + +
+
+

لوحة القيادة

+
+
+ + +
+ +
+
+ + + +

عنوان القسم

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#العنوانالعنوانالعنوانالعنوان
1,001أم.و.ثمّة.ويتّفق.
1,002أضف.ما.من.أم.
1,003دار.ذلك.يبق.المتحدة.
1,003فكانت.الخارجية.الآخر.حتى.
1,004أم.و.ثمّة.ويتّفق.
1,005أضف.ما.من.أم.
1,006دار.ذلك.يبق.المتحدة.
1,007أم.و.ثمّة.ويتّفق.
1,008أضف.ما.من.أم.
1,009دار.ذلك.يبق.المتحدة.
1,010أم.و.ثمّة.ويتّفق.
1,011أضف.ما.من.أم.
1,012دار.ذلك.يبق.المتحدة.
1,013أم.و.ثمّة.ويتّفق.
1,014أضف.ما.من.أم.
1,015دار.ذلك.يبق.المتحدة.
+
+
+
+
diff --git a/site/content/docs/examples/dashboard/dashboard.css b/site/content/docs/examples/dashboard/dashboard.css new file mode 100644 index 000000000..8b0fa7253 --- /dev/null +++ b/site/content/docs/examples/dashboard/dashboard.css @@ -0,0 +1,100 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + /* rtl:raw: + right: 0; + */ + bottom: 0; + /* rtl:remove */ + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + right: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/site/content/docs/examples/dashboard/dashboard.js b/site/content/docs/examples/dashboard/dashboard.js new file mode 100644 index 000000000..d3f549928 --- /dev/null +++ b/site/content/docs/examples/dashboard/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace() + + // Graphs + var ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/site/content/docs/examples/dashboard/dashboard.rtl.css b/site/content/docs/examples/dashboard/dashboard.rtl.css new file mode 100644 index 000000000..2406ce5cc --- /dev/null +++ b/site/content/docs/examples/dashboard/dashboard.rtl.css @@ -0,0 +1,96 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + right: 0; + bottom: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-left: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + left: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/site/content/docs/examples/dashboard/index.html b/site/content/docs/examples/dashboard/index.html new file mode 100644 index 000000000..21d78e47f --- /dev/null +++ b/site/content/docs/examples/dashboard/index.html @@ -0,0 +1,252 @@ +--- +layout: examples +title: Dashboard Template +extra_css: + - "dashboard.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" + integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" + - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" + integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" + - src: "dashboard.js" +--- + +
+ Company name + + + +
+ +
+
+ + +
+
+

Dashboard

+
+
+ + +
+ +
+
+ + + +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001randomdataplaceholdertext
1,002placeholderirrelevantvisuallayout
1,003datarichdashboardtabular
1,003informationplaceholderillustrativedata
1,004textrandomlayoutdashboard
1,005dashboardirrelevanttextplaceholder
1,006dashboardillustrativerichdata
1,007placeholdertabularinformationirrelevant
1,008randomdataplaceholdertext
1,009placeholderirrelevantvisuallayout
1,010datarichdashboardtabular
1,011informationplaceholderillustrativedata
1,012textplaceholderlayoutdashboard
1,013dashboardirrelevanttextvisual
1,014dashboardillustrativerichdata
1,015randomtabularinformationtext
+
+
+
+
diff --git a/site/content/docs/examples/grid/grid.css b/site/content/docs/examples/grid/grid.css new file mode 100644 index 000000000..18e3568b1 --- /dev/null +++ b/site/content/docs/examples/grid/grid.css @@ -0,0 +1,13 @@ +.themed-grid-col { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); +} + +.themed-container { + padding: .75rem; + margin-bottom: 1.5rem; + background-color: rgba(0, 123, 255, .15); + border: 1px solid rgba(0, 123, 255, .2); +} diff --git a/site/content/docs/examples/grid/index.html b/site/content/docs/examples/grid/index.html new file mode 100644 index 000000000..f26829b4f --- /dev/null +++ b/site/content/docs/examples/grid/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Grid Template +extra_css: + - "grid.css" +body_class: "py-4" +include_js: false +--- + +
+
+ +

Bootstrap grid examples

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

+ +

Five grid tiers

+

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

+ +
+
.col-4
+
.col-4
+
.col-4
+
+ +
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+ +
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+ +
+
.col-xxl-4
+
.col-xxl-4
+
.col-xxl-4
+
+ +

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +

Three equal columns alternative

+

By using the .row-cols-* classes, you can easily create a grid with equal columns.

+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+ +

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+ +

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

+
+
.col-md-8
+
.col-md-4
+
+ +

Full width, single column

+

+ No grid classes are necessary for full-width elements. +

+ +
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

+
+
+
+ .col-md-8 +
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+ +
+ +

Mixed: mobile and desktop

+

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

+
+
.col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+ +
+ +

Mixed: mobile, tablet, and desktop

+
+
.col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+ +
+ +

Gutters

+

With .gx-* classes, the horizontal gutters can be adjusted.

+
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
+

Use the .gy-* classes to control the vertical gutters.

+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+

With .g-* classes, the gutters in both directions can be adjusted.

+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+ +
+
+ +

Containers

+

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

+
+ +
.container
+
.container-sm
+
.container-md
+
.container-lg
+
.container-xl
+
.container-xxl
+
.container-fluid
+
diff --git a/site/content/docs/examples/masonry/index.html b/site/content/docs/examples/masonry/index.html new file mode 100644 index 000000000..9061d7cce --- /dev/null +++ b/site/content/docs/examples/masonry/index.html @@ -0,0 +1,105 @@ +--- +layout: examples +title: Masonry example +extra_js: + - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" + integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" + async: true +--- + +
+

Bootstrap and Masonry

+

Integrate Masonry with the Bootstrap grid system and cards component.

+ +

Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:

+ + 

+<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+
+ +

By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

+ +
+ +
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
+
Card title that wraps to a new line
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+
+
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+
+
+
+
+
+
Card title
+

This card has a regular title and short paragraph of text below it.

+

Last updated 3 mins ago

+
+
+
+
+
+ {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} +
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+
+
+
+
+
+
Card title
+

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

+

Last updated 3 mins ago

+
+
+
+
+ +
diff --git a/site/content/docs/examples/navbar-bottom/index.html b/site/content/docs/examples/navbar-bottom/index.html new file mode 100644 index 000000000..aee772e20 --- /dev/null +++ b/site/content/docs/examples/navbar-bottom/index.html @@ -0,0 +1,41 @@ +--- +layout: examples +title: Bottom navbar example +--- + +
+
+

Bottom Navbar example

+

This example is a quick exercise to illustrate how the bottom navbar works.

+ }}" role="button">View navbar docs » +
+
+ diff --git a/site/content/docs/examples/navbar-fixed/index.html b/site/content/docs/examples/navbar-fixed/index.html new file mode 100644 index 000000000..848137eff --- /dev/null +++ b/site/content/docs/examples/navbar-fixed/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Fixed top navbar example +extra_css: + - "navbar-top-fixed.css" +--- + + + +
+
+

Navbar example

+

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.

+ }}" role="button">View navbar docs » +
+
diff --git a/site/content/docs/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/examples/navbar-fixed/navbar-top-fixed.css new file mode 100644 index 000000000..c77c0c147 --- /dev/null +++ b/site/content/docs/examples/navbar-fixed/navbar-top-fixed.css @@ -0,0 +1,5 @@ +/* Show it is fixed to the top */ +body { + min-height: 75rem; + padding-top: 4.5rem; +} diff --git a/site/content/docs/examples/navbar-static/index.html b/site/content/docs/examples/navbar-static/index.html new file mode 100644 index 000000000..fe95dab47 --- /dev/null +++ b/site/content/docs/examples/navbar-static/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Top navbar example +extra_css: + - "navbar-top.css" +--- + + + +
+
+

Navbar example

+

This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

+ }}" role="button">View navbar docs » +
+
diff --git a/site/content/docs/examples/navbar-static/navbar-top.css b/site/content/docs/examples/navbar-static/navbar-top.css new file mode 100644 index 000000000..25bbdde09 --- /dev/null +++ b/site/content/docs/examples/navbar-static/navbar-top.css @@ -0,0 +1,4 @@ +/* Show it's not fixed to the top */ +body { + min-height: 75rem; +} diff --git a/site/content/docs/examples/navbars/index.html b/site/content/docs/examples/navbars/index.html new file mode 100644 index 000000000..38281f3dd --- /dev/null +++ b/site/content/docs/examples/navbars/index.html @@ -0,0 +1,416 @@ +--- +layout: examples +title: Navbar Template +extra_css: + - "navbar.css" +--- + +
+ + + + + + + + + + + + + + + + + + +
+

Matching .container-xl...

+
+ + + +
+ + + + +
+
+
+

Navbar examples

+

This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the }}">top and }}">fixed top examples.

+

At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.

+

+ }}" role="button">View navbar docs » +

+
+
+
+
+
diff --git a/site/content/docs/examples/navbars/navbar.css b/site/content/docs/examples/navbars/navbar.css new file mode 100644 index 000000000..70d209409 --- /dev/null +++ b/site/content/docs/examples/navbars/navbar.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/content/docs/examples/offcanvas/index.html b/site/content/docs/examples/offcanvas/index.html new file mode 100644 index 000000000..a7c99a538 --- /dev/null +++ b/site/content/docs/examples/offcanvas/index.html @@ -0,0 +1,139 @@ +--- +layout: examples +title: Offcanvas template +extra_css: + - "offcanvas.css" +extra_js: + - src: "offcanvas.js" +body_class: "bg-light" +--- + + + +
+ +
+ +
+
+ +
+

Bootstrap

+ Since 2011 +
+
+ +
+
Recent updates
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? +

+
+
+ {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + Some more representative placeholder content, related to this other user. Another status update, perhaps. +

+
+
+ {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates. +

+
+ + All updates + +
+ +
+
Suggestions
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+ + All suggestions + +
+
diff --git a/site/content/docs/examples/offcanvas/offcanvas.css b/site/content/docs/examples/offcanvas/offcanvas.css new file mode 100644 index 000000000..29e26b11b --- /dev/null +++ b/site/content/docs/examples/offcanvas/offcanvas.css @@ -0,0 +1,67 @@ +html, +body { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} + +body { + padding-top: 56px; +} + +@media (max-width: 991.98px) { + .offcanvas-collapse { + position: fixed; + top: 56px; /* Height of navbar */ + bottom: 0; + left: 100%; + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + overflow-y: auto; + visibility: hidden; + background-color: #343a40; + transition: transform .3s ease-in-out, visibility .3s ease-in-out; + } + .offcanvas-collapse.open { + visibility: visible; + transform: translateX(-100%); + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + color: rgba(255, 255, 255, .75); + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-underline .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; + color: #6c757d; +} + +.nav-underline .nav-link:hover { + color: #007bff; +} + +.nav-underline .active { + font-weight: 500; + color: #343a40; +} + +.text-white-50 { color: rgba(255, 255, 255, .5); } + +.bg-purple { background-color: #6f42c1; } diff --git a/site/content/docs/examples/offcanvas/offcanvas.js b/site/content/docs/examples/offcanvas/offcanvas.js new file mode 100644 index 000000000..793ea86cd --- /dev/null +++ b/site/content/docs/examples/offcanvas/offcanvas.js @@ -0,0 +1,7 @@ +(function () { + 'use strict' + + document.querySelector('[data-bs-toggle="offcanvas"]').addEventListener('click', function () { + document.querySelector('.offcanvas-collapse').classList.toggle('open') + }) +})() diff --git a/site/content/docs/examples/pricing/index.html b/site/content/docs/examples/pricing/index.html new file mode 100644 index 000000000..58bb22ccf --- /dev/null +++ b/site/content/docs/examples/pricing/index.html @@ -0,0 +1,117 @@ +--- +layout: examples +title: Pricing example +extra_css: + - "pricing.css" +include_js: false +--- + +
+

Company name

+ + Sign up +
+ +
+
+

Pricing

+

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

+
+ +
+
+
+
+

Free

+
+
+

$0 / mo

+
    +
  • 10 users included
    • +
  • 2 GB of storage
    • +
  • Email support
    • +
  • Help center access
    • +
+ +
+
+
+
+
+
+

Pro

+
+
+

$15 / mo

+
    +
  • 20 users included
    • +
  • 10 GB of storage
    • +
  • Priority email support
    • +
  • Help center access
    • +
+ +
+
+
+
+
+
+

Enterprise

+
+
+

$29 / mo

+
    +
  • 30 users included
    • +
  • 15 GB of storage
    • +
  • Phone and email support
    • +
  • Help center access
    • +
+ +
+
+
+
+ + +
diff --git a/site/content/docs/examples/pricing/pricing.css b/site/content/docs/examples/pricing/pricing.css new file mode 100644 index 000000000..70afca134 --- /dev/null +++ b/site/content/docs/examples/pricing/pricing.css @@ -0,0 +1,7 @@ +.container { + max-width: 960px; +} + +.pricing-header { + max-width: 700px; +} diff --git a/site/content/docs/examples/product/index.html b/site/content/docs/examples/product/index.html new file mode 100644 index 000000000..423890e3b --- /dev/null +++ b/site/content/docs/examples/product/index.html @@ -0,0 +1,148 @@ +--- +layout: examples +title: Product example +extra_css: + - "product.css" +--- + +
+ +
+ +
+
+
+

Punny headline

+

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.

+ Coming soon +
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+ + diff --git a/site/content/docs/examples/product/product.css b/site/content/docs/examples/product/product.css new file mode 100644 index 000000000..5fcb582b4 --- /dev/null +++ b/site/content/docs/examples/product/product.css @@ -0,0 +1,69 @@ +.container { + max-width: 960px; +} + +/* + * Custom translucent site header + */ + +.site-header { + background-color: rgba(0, 0, 0, .85); + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); +} +.site-header a { + color: #8e8e8e; + transition: color .15s ease-in-out; +} +.site-header a:hover { + color: #fff; + text-decoration: none; +} + +/* + * Dummy devices (replace them with your own or something else entirely!) + */ + +.product-device { + position: absolute; + right: 10%; + bottom: -30%; + width: 300px; + height: 540px; + background-color: #333; + border-radius: 21px; + transform: rotate(30deg); +} + +.product-device::before { + position: absolute; + top: 10%; + right: 10px; + bottom: 10%; + left: 10px; + content: ""; + background-color: rgba(255, 255, 255, .1); + border-radius: 5px; +} + +.product-device-2 { + top: -25%; + right: auto; + bottom: 0; + left: 5%; + background-color: #e5e5e5; +} + + +/* + * Extra utilities + */ + +.flex-equal > * { + flex: 1; +} +@media (min-width: 768px) { + .flex-md-equal > * { + flex: 1; + } +} diff --git a/site/content/docs/examples/sign-in/index.html b/site/content/docs/examples/sign-in/index.html new file mode 100644 index 000000000..6fefc45e6 --- /dev/null +++ b/site/content/docs/examples/sign-in/index.html @@ -0,0 +1,26 @@ +--- +layout: examples +title: Signin Template +extra_css: + - "signin.css" +body_class: "text-center" +include_js: false +--- + +
+
+ +

Please sign in

+ + + + +
+ +
+ +

© 2017–{{< year >}}

+
+
diff --git a/site/content/docs/examples/sign-in/signin.css b/site/content/docs/examples/sign-in/signin.css new file mode 100644 index 000000000..eaa08ba61 --- /dev/null +++ b/site/content/docs/examples/sign-in/signin.css @@ -0,0 +1,42 @@ +html, +body { + height: 100%; +} + +body { + display: flex; + align-items: center; + padding-top: 40px; + padding-bottom: 40px; + background-color: #f5f5f5; +} + +.form-signin { + width: 100%; + max-width: 330px; + padding: 15px; + margin: auto; +} +.form-signin .checkbox { + font-weight: 400; +} +.form-signin .form-control { + position: relative; + box-sizing: border-box; + height: auto; + padding: 10px; + font-size: 16px; +} +.form-signin .form-control:focus { + z-index: 2; +} +.form-signin input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/site/content/docs/examples/starter-template/index.html b/site/content/docs/examples/starter-template/index.html new file mode 100644 index 000000000..0cd64c75f --- /dev/null +++ b/site/content/docs/examples/starter-template/index.html @@ -0,0 +1,50 @@ +--- +layout: examples +title: Starter Template +extra_css: + - "starter-template.css" +--- + + + +
+ +
+

Bootstrap starter template

+

Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.

+
+ +
diff --git a/site/content/docs/examples/starter-template/starter-template.css b/site/content/docs/examples/starter-template/starter-template.css new file mode 100644 index 000000000..6fb709105 --- /dev/null +++ b/site/content/docs/examples/starter-template/starter-template.css @@ -0,0 +1,3 @@ +body { + padding-top: 5rem; +} diff --git a/site/content/docs/examples/sticky-footer-navbar/index.html b/site/content/docs/examples/sticky-footer-navbar/index.html new file mode 100644 index 000000000..ce036dc09 --- /dev/null +++ b/site/content/docs/examples/sticky-footer-navbar/index.html @@ -0,0 +1,52 @@ +--- +layout: examples +title: Sticky Footer Navbar Template +extra_css: + - "sticky-footer-navbar.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + +
+ + +
+ + +
+
+

Sticky footer with fixed navbar

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

+

Back to }}">the default sticky footer minus the navbar.

+
+
+ + diff --git a/site/content/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css new file mode 100644 index 000000000..3087ead7d --- /dev/null +++ b/site/content/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -0,0 +1,7 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +main > .container { + padding: 60px 15px 0; +} diff --git a/site/content/docs/examples/sticky-footer/index.html b/site/content/docs/examples/sticky-footer/index.html new file mode 100644 index 000000000..7a6e127cd --- /dev/null +++ b/site/content/docs/examples/sticky-footer/index.html @@ -0,0 +1,24 @@ +--- +layout: examples +title: Sticky Footer Template +extra_css: + - "sticky-footer.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +include_js: false +--- + + +
+
+

Sticky footer

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

+

Use }}">the sticky footer with a fixed navbar if need be, too.

+
+
+ + diff --git a/site/content/docs/examples/sticky-footer/sticky-footer.css b/site/content/docs/examples/sticky-footer/sticky-footer.css new file mode 100644 index 000000000..f8be43729 --- /dev/null +++ b/site/content/docs/examples/sticky-footer/sticky-footer.css @@ -0,0 +1,9 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +.container { + width: auto; + max-width: 680px; + padding: 0 15px; +} -- cgit v1.2.3