القوائم
معظم صفحات الويب لديها نوع من القائمة.
في HTML، وغالبا ما يتم تعريف القائمة في قائمة غير مرتبة <ul> (ونصب بعد ذلك)، مثل هذا:
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> إذا كنت ترغب في إنشاء قائمة أفقية من القائمة أعلاه، إضافة .list-inline فئة ل <ul> :
<ul class="list-inline"> انها محاولة لنفسك » أو يمكنك عرض القائمة أعلاه مع Bootstraps' Tabs and Pills (أنظر أدناه).
ملاحظة: انظر المثال الأخير على هذه الصفحة لمعرفة كيفية جعل علامات التبويب وحبوب منع الحمل و toggleable / الديناميكي.
علامات التبويب
يتم إنشاء علامات تبويب مع <ul class="nav nav-tabs"> :
نصيحة: يمكنك أيضا وضع علامة على الصفحة الحالية مع <li class="active"> .
المثال التالي يخلق علامات التبويب الملاحة:
مثال
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
انها محاولة لنفسك » علامات التبويب مع قائمة منسدلة
يمكن علامات التبويب كما يعقد القوائم المنسدلة.
يضيف المثال التالي القائمة المنسدلة إلى "القائمة 1":
مثال
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
انها محاولة لنفسك » Pills
يتم إنشاء حبوب منع الحمل مع <ul class="nav nav-pills"> . أيضا علامة على الصفحة الحالية مع <li class="active"> :
مثال
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> انها محاولة لنفسك » الرأسية Pills
Pills يمكن أيضا عرض عموديا. فقط إضافة .nav-stacked الفئة:
مثال
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
انها محاولة لنفسك » الرأسية Pills في صف واحد
نص...
نص...
نص...
يضع المثال التالي القائمة حبوب منع الحمل الرأسي داخل العمود الأخير. لذلك، على شاشة كبيرة سيتم عرض القائمة إلى اليمين. ولكن على الشاشة الصغيرة، فإن المحتوى تلقائيا ضبط نفسها إلى تخطيط عمود واحد:
مثال
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> انها محاولة لنفسك » Pills مع قائمة منسدلة
Pills يمكن أن تعقد القوائم المنسدلة.
يضيف المثال التالي القائمة المنسدلة إلى "القائمة 1":
مثال
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
انها محاولة لنفسك » تركزت Tabs and Pills
إلى مركز / تبرير علامات التبويب و pills ، استخدم .nav-justified الطبقة.
لاحظ أنه على الشاشات التي تكون أصغر من 768px، مكدسة عناصر القائمة (سيبقى محتوى متوسط):
مثال
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
انها محاولة لنفسك » و toggleable / الديناميكي Tabs
الصفحة الرئيسية
أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua.
لجعل و toggleable علامات التبويب، إضافة data-toggle="tab" السمة إلى كل وصلة. ثم إضافة .tab-pane الدرجة مع معرف فريد لكل التبويب والتفاف عليها داخل <div> العنصر مع الطبقة .tab-content .
إذا كنت ترغب في علامات التبويب لتتلاشى داخل وخارج عند النقر عليها، إضافة .fade فئة ل .tab-pane :
مثال
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
انها محاولة لنفسك » و toggleable / الديناميكية Pills
وينطبق نفس رمز ل pills . فقط تغيير السمة تبديل البيانات ل data-toggle="pill" :
مثال
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
استكمال Bootstrap الإنتقال المرجعي
للإشارة كاملة من جميع الطبقات والملاحة، والذهاب إلى موقعنا على كامل التمهيد الإنتقال المرجعي .
للإشارة كاملة لجميع التبويب خيارات والأساليب والأحداث، انتقل إلى لدينا التمهيد شبيبة تبويب المرجعي .