summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.2/examples/carousel
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--site/content/docs/5.2/examples/carousel-rtl/index.html167
-rw-r--r--site/content/docs/5.2/examples/carousel/carousel.css82
-rw-r--r--site/content/docs/5.2/examples/carousel/carousel.rtl.css74
-rw-r--r--site/content/docs/5.2/examples/carousel/index.html166
4 files changed, 489 insertions, 0 deletions
diff --git a/site/content/docs/5.2/examples/carousel-rtl/index.html b/site/content/docs/5.2/examples/carousel-rtl/index.html
new file mode 100644
index 0000000..b8c35d6
--- /dev/null
+++ b/site/content/docs/5.2/examples/carousel-rtl/index.html
@@ -0,0 +1,167 @@
+---
+layout: examples
+title: قالب شرائح العرض
+direction: rtl
+extra_css:
+ - "../carousel/carousel.rtl.css"
+---
+
+<header>
+ <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#">شرائح العرض</a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarCollapse">
+ <ul class="navbar-nav me-auto mb-2 mb-md-0">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">حلقة الوصل</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled">رابط غير مفعل</a>
+ </li>
+ </ul>
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
+ <button class="btn btn-outline-success" type="submit">بحث</button>
+ </form>
+ </div>
+ </div>
+ </nav>
+</header>
+
+<main>
+
+ <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-indicators">
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ </div>
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ <div class="container">
+ <div class="carousel-caption text-start">
+ <h1>عنوان المثال.</h1>
+ <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="carousel-item">
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ <div class="container">
+ <div class="carousel-caption">
+ <h1>عنوان مثال آخر.</h1>
+ <p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="carousel-item">
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ <div class="container">
+ <div class="carousel-caption text-end">
+ <h1>واحد أكثر لقياس جيد.</h1>
+ <p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">السابق</span>
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">التالي</span>
+ </button>
+ </div>
+
+
+ <!-- Marketing messaging and featurettes
+ ================================================== -->
+ <!-- Wrap the rest of the page in another container to center all the content. -->
+
+ <div class="container marketing">
+
+ <!-- Three columns of text below the carousel -->
+ <div class="row">
+ <div class="col-lg-4">
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ <h2 class="fw-normal">عنوان</h2>
+ <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
+ <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
+ </div><!-- /.col-lg-4 -->
+ <div class="col-lg-4">
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ <h2 class="fw-normal">عنوان آخر</h2>
+ <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
+ <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
+ </div><!-- /.col-lg-4 -->
+ <div class="col-lg-4">
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
+ <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
+ <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
+ </div><!-- /.col-lg-4 -->
+ </div><!-- /.row -->
+
+
+ <!-- START THE FEATURETTES -->
+
+ <hr class="featurette-divider">
+
+ <div class="row featurette">
+ <div class="col-md-7">
+ <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
+ <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
+ </div>
+ <div class="col-md-5">
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ </div>
+ </div>
+
+ <hr class="featurette-divider">
+
+ <div class="row featurette">
+ <div class="col-md-7 order-md-2">
+ <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
+ <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
+ </div>
+ <div class="col-md-5 order-md-1">
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ </div>
+ </div>
+
+ <hr class="featurette-divider">
+
+ <div class="row featurette">
+ <div class="col-md-7">
+ <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
+ <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
+ </div>
+ <div class="col-md-5">
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ </div>
+ </div>
+
+ <hr class="featurette-divider">
+
+ <!-- /END THE FEATURETTES -->
+
+ </div><!-- /.container -->
+
+
+ <!-- FOOTER -->
+ <footer class="container">
+ <p class="float-end"><a href="#">عد إلى الأعلى</a></p>
+ <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">سياسة الخصوصية</a> &middot; <a href="#">شروط الاستخدام</a></p>
+ </footer>
+</main>
diff --git a/site/content/docs/5.2/examples/carousel/carousel.css b/site/content/docs/5.2/examples/carousel/carousel.css
new file mode 100644
index 0000000..0bdf976
--- /dev/null
+++ b/site/content/docs/5.2/examples/carousel/carousel.css
@@ -0,0 +1,82 @@
+/* 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;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+/* 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 <hr> more */
+}
+
+/* Thin out the marketing headings */
+/* rtl:begin:remove */
+.featurette-heading {
+ letter-spacing: -.05rem;
+}
+
+/* rtl:end:remove */
+
+/* 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/5.2/examples/carousel/carousel.rtl.css b/site/content/docs/5.2/examples/carousel/carousel.rtl.css
new file mode 100644
index 0000000..d20a811
--- /dev/null
+++ b/site/content/docs/5.2/examples/carousel/carousel.rtl.css
@@ -0,0 +1,74 @@
+/* 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;
+}
+
+
+/* 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 .col-lg-4 p {
+ margin-right: .75rem;
+ margin-left: .75rem;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+ margin: 5rem 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+
+/* 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/5.2/examples/carousel/index.html b/site/content/docs/5.2/examples/carousel/index.html
new file mode 100644
index 0000000..67c0dd5
--- /dev/null
+++ b/site/content/docs/5.2/examples/carousel/index.html
@@ -0,0 +1,166 @@
+---
+layout: examples
+title: Carousel Template
+extra_css:
+ - "carousel.css"
+---
+
+<header>
+ <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#">Carousel</a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarCollapse">
+ <ul class="navbar-nav me-auto mb-2 mb-md-0">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled">Disabled</a>
+ </li>
+ </ul>
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </div>
+ </nav>
+</header>
+
+<main>
+
+ <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-indicators">
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ </div>
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ <div class="container">
+ <div class="carousel-caption text-start">
+ <h1>Example headline.</h1>
+ <p>Some representative placeholder content for the first slide of the carousel.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="carousel-item">
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ <div class="container">
+ <div class="carousel-caption">
+ <h1>Another example headline.</h1>
+ <p>Some representative placeholder content for the second slide of the carousel.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="carousel-item">
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ <div class="container">
+ <div class="carousel-caption text-end">
+ <h1>One more for good measure.</h1>
+ <p>Some representative placeholder content for the third slide of this carousel.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </button>
+ </div>
+
+
+ <!-- Marketing messaging and featurettes
+ ================================================== -->
+ <!-- Wrap the rest of the page in another container to center all the content. -->
+
+ <div class="container marketing">
+
+ <!-- Three columns of text below the carousel -->
+ <div class="row">
+ <div class="col-lg-4">
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ <h2 class="fw-normal">Heading</h2>
+ <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
+ <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+ </div><!-- /.col-lg-4 -->
+ <div class="col-lg-4">
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ <h2 class="fw-normal">Heading</h2>
+ <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
+ <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+ </div><!-- /.col-lg-4 -->
+ <div class="col-lg-4">
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ <h2 class="fw-normal">Heading</h2>
+ <p>And lastly this, the third column of representative placeholder content.</p>
+ <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+ </div><!-- /.col-lg-4 -->
+ </div><!-- /.row -->
+
+
+ <!-- START THE FEATURETTES -->
+
+ <hr class="featurette-divider">
+
+ <div class="row featurette">
+ <div class="col-md-7">
+ <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+ <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
+ </div>
+ <div class="col-md-5">
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ </div>
+ </div>
+
+ <hr class="featurette-divider">
+
+ <div class="row featurette">
+ <div class="col-md-7 order-md-2">
+ <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+ <p class="lead">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.</p>
+ </div>
+ <div class="col-md-5 order-md-1">
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ </div>
+ </div>
+
+ <hr class="featurette-divider">
+
+ <div class="row featurette">
+ <div class="col-md-7">
+ <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+ <p class="lead">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.</p>
+ </div>
+ <div class="col-md-5">
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ </div>
+ </div>
+
+ <hr class="featurette-divider">
+
+ <!-- /END THE FEATURETTES -->
+
+ </div><!-- /.container -->
+
+
+ <!-- FOOTER -->
+ <footer class="container">
+ <p class="float-end"><a href="#">Back to top</a></p>
+ <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+ </footer>
+</main>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-07 03:16:07 +0000