mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-03 15:24:19 +01:00
203 lines
16 KiB
HTML
203 lines
16 KiB
HTML
---
|
|
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
|
|
---
|
|
|
|
<div class="container">
|
|
<header class="blog-header py-3">
|
|
<div class="row flex-nowrap justify-content-between align-items-center">
|
|
<div class="col-4 pt-1">
|
|
<a class="link-secondary" href="#">الإشتراك</a>
|
|
</div>
|
|
<div class="col-4 text-center">
|
|
<a class="blog-header-logo text-dark" href="#">كبير</a>
|
|
</div>
|
|
<div class="col-4 d-flex justify-content-end align-items-center">
|
|
<a class="link-secondary" href="#" aria-label="بحث">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
|
|
</a>
|
|
<a class="btn btn-sm btn-outline-secondary" href="#">سجل</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="nav-scroller py-1 mb-2">
|
|
<nav class="nav d-flex justify-content-between">
|
|
<a class="p-2 link-secondary" href="#">العالمية</a>
|
|
<a class="p-2 link-secondary" href="#">نحن.</a>
|
|
<a class="p-2 link-secondary" href="#">تقنية</a>
|
|
<a class="p-2 link-secondary" href="#">التصميم</a>
|
|
<a class="p-2 link-secondary" href="#">حضاره</a>
|
|
<a class="p-2 link-secondary" href="#">اعمال</a>
|
|
<a class="p-2 link-secondary" href="#">سياسة</a>
|
|
<a class="p-2 link-secondary" href="#">رأي</a>
|
|
<a class="p-2 link-secondary" href="#">علم</a>
|
|
<a class="p-2 link-secondary" href="#">الصحة</a>
|
|
<a class="p-2 link-secondary" href="#">أسلوب</a>
|
|
<a class="p-2 link-secondary" href="#">السفر</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
|
|
<div class="col-md-6 px-0">
|
|
<h1 class="display-4 font-italic">عنوان مشاركة مدونة مميزة أطول</h1>
|
|
<p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p>
|
|
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">أكمل القراءة...</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-md-6">
|
|
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
<div class="col p-4 d-flex flex-column position-static">
|
|
<strong class="d-inline-block mb-2 text-primary">العالمية</strong>
|
|
<h3 class="mb-0">مشاركة مميزة</h3>
|
|
<div class="mb-1 text-muted">12 نوفمبر</div>
|
|
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
|
<a href="#" class="stretched-link">أكمل القراءة</a>
|
|
</div>
|
|
<div class="col-auto d-none d-lg-block">
|
|
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
<div class="col p-4 d-flex flex-column position-static">
|
|
<strong class="d-inline-block mb-2 text-success">التصميم</strong>
|
|
<h3 class="mb-0">عنوان الوظيفة</h3>
|
|
<div class="mb-1 text-muted">11 نوفمبر</div>
|
|
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
|
<a href="#" class="stretched-link">أكمل القراءة</a>
|
|
</div>
|
|
<div class="col-auto d-none d-lg-block">
|
|
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h3 class="pb-4 mb-4 font-italic border-bottom">
|
|
من Firehose
|
|
</h3>
|
|
|
|
<article class="blog-post">
|
|
<h2 class="blog-post-title">عينة مشاركة مدونة</h2>
|
|
<p class="blog-post-meta">1 يناير 2014 بواسطة <a href="#"> Mark </a></p>
|
|
|
|
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.</p>
|
|
<hr>
|
|
<p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
|
|
<blockquote>
|
|
<p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
|
|
</blockquote>
|
|
<p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
|
|
<h2>عنوان</h2>
|
|
<p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
|
|
<h3>العنوان الفرعي</h3>
|
|
<p>موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.</p>
|
|
<pre><code>Example code block</code></pre>
|
|
<p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
|
|
<h3>العنوان الفرعي</h3>
|
|
<p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
|
|
<ul>
|
|
<li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
|
|
<li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
|
|
<li>ذات مئات المشترك بالمحور عن وشعار.</li>
|
|
</ul>
|
|
<p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
|
|
<ol>
|
|
<li>عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.</li>
|
|
<li>ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.</li>
|
|
<li>علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.</li>
|
|
</ol>
|
|
<p>الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.</p>
|
|
</article><!-- /.blog-post -->
|
|
|
|
<article class="blog-post">
|
|
<h2 class="blog-post-title">مشاركة مدونة أخرى</h2>
|
|
<p class="blog-post-meta">23 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
|
|
|
|
<p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
|
|
<blockquote>
|
|
<p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
|
|
</blockquote>
|
|
<p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
|
|
<p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
|
|
</article><!-- /.blog-post -->
|
|
|
|
<article class="blog-post">
|
|
<h2 class="blog-post-title">ميزة جديدة</h2>
|
|
<p class="blog-post-meta">14 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
|
|
|
|
<p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
|
|
<p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
|
|
<ul>
|
|
<li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
|
|
<li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
|
|
<li>ذات مئات المشترك بالمحور عن وشعار.</li>
|
|
</ul>
|
|
<p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
|
|
</article><!-- /.blog-post -->
|
|
|
|
<nav class="blog-pagination" aria-label="Pagination">
|
|
<a class="btn btn-outline-primary" href="#">أقدم الوظائف</a>
|
|
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">أحدث المشاركات</a>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="p-4 mb-3 bg-light rounded">
|
|
<h4 class="font-italic">حول</h4>
|
|
<p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<h4 class="font-italic">أرشيف</h4>
|
|
<ol class="list-unstyled mb-0">
|
|
<li><a href="#">مارس 2014</a></li>
|
|
<li><a href="#">شباط 2014</a></li>
|
|
<li><a href="#">يناير 2014</a></li>
|
|
<li><a href="#">ديسمبر 2013</a></li>
|
|
<li><a href="#">نوفمبر 2013</a></li>
|
|
<li><a href="#">أكتوبر 2013</a></li>
|
|
<li><a href="#">سبتمبر 2013</a></li>
|
|
<li><a href="#">اغسطس 2013</a></li>
|
|
<li><a href="#">يوليو 2013</a></li>
|
|
<li><a href="#">يونيو 2013</a></li>
|
|
<li><a href="#">مايو 2013</a></li>
|
|
<li><a href="#">ابريل 2013</a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<h4 class="font-italic">في مكان آخر</h4>
|
|
<ol class="list-unstyled">
|
|
<li><a href="#">GitHub</a></li>
|
|
<li><a href="#">Twitter</a></li>
|
|
<li><a href="#">Facebook</a></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /.row -->
|
|
|
|
</main><!-- /.container -->
|
|
|
|
<footer class="blog-footer">
|
|
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/"> Bootstrap </a> بواسطة <a href="https://twitter.com/mdo">mdo </a>.</p>
|
|
<p>
|
|
<a href="#">عد إلى الأعلى</a>
|
|
</p>
|
|
</footer>
|