HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

البرنامج التعليمي Bootstrap 3

BS HOME ابدأ BS BS Grid Basic بكالوريوس الطباعة جداول BS صور بكالوريوس BS Jumbotron بي إس ويلز تنبيهات BS أزرار BS مجموعات زر BS BS Glyphicons شارات / ملصقات BS أشرطة التقدم BS ترقيم الصفحات BS بكالوريوس بيجر مجموعات قائمة BS لوحات BS القوائم المنسدلة BS انهيار BS علامات التبويب / حبوب BS Navbar نماذج بكالوريوس مدخلات BS مدخلات BS 2 تحجيم المدخلات BS كائنات BS Media BS كاروسيل مشروط BS تلميح BS Tooltip BS Popover BS Scrollspy BS اللصقة مرشحات BS

شبكات التمهيد

نظام BS Grid BS مكدس / أفقي BS Grid Small BS شبكة متوسطة BS شبكة كبيرة أمثلة على شبكة BS

ثيمات Bootstrap

قوالب بكالوريوس موضوع BS "ببساطة أنا" موضوع BS "شركة" موضوع BS "الفرقة"

أمثلة التمهيد

أمثلة بكالوريوس اختبار BS تمارين البكالوريوس شهادة بكالوريوس

Bootstrap CSS المرجع

CSS جميع الفئات طباعة CSS أزرار CSS نماذج CSS مساعدي CSS صور CSS جداول CSS القوائم المنسدلة CSS ملاحق CSS الحروف الرسومية

Bootstrap JS المرجع

شبيبة الملحقة تنبيه JS زر JS JS Carousel طي JS JS المنسدلة شبيبة مشروط شبيبة بوبوفر شبيبة Scrollspy علامة التبويب JS JS Tooltip


جداول التمهيد

❮ سابق التالي ❯

جدول Bootstrap الأساسي

يحتوي جدول Bootstrap الأساسي على حشوة خفيفة وفواصل أفقية فقط.

يضيف الفصل .tableالتصميم الأساسي إلى الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

صفوف مخططة

يضيف الفصل .table-stripedخطوط حمار وحشي إلى طاولة:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

جدول يحد

يضيف الفصل .table-borderedحدودًا على جميع جوانب الجدول والخلايا:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

تحوم الصفوف

يضيف الفصل .table-hoverتأثير التمرير (لون الخلفية الرمادي) على صفوف الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

طاولة مكثفة

الفصل .table-condensedيجعل الجدول أكثر إحكاما عن طريق قطع حشوة الخلية إلى النصف:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

الفئات السياقية

يمكن استخدام الفئات السياقية لتلوين صفوف الجدول ( <tr>) أو خلايا الجدول ( <td>):

مثال

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

الفئات السياقية التي يمكن استخدامها هي:

فصل وصف
.active يطبق لون التمرير على صف الجدول أو خلية الجدول
.success يشير إلى عمل ناجح أو إيجابي
.info يشير إلى تغيير أو إجراء إعلامي محايد
.warning يشير إلى تحذير قد يحتاج إلى عناية
.danger يشير إلى عمل خطير أو سلبي محتمل

جداول الاستجابة

يقوم .table-responsiveالفصل بإنشاء جدول سريع الاستجابة. سيتم بعد ذلك تمرير الجدول أفقيًا على الأجهزة الصغيرة (أقل من 768 بكسل). عند المشاهدة على أي شيء يزيد عرضه عن 768 بكسل ، لا فرق:

مثال

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

اختبر نفسك مع التمارين

ممارسه الرياضه:

أضف سمة فئة لتصميم الجدول كجدول Bootstrap أساسي.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

إكمال مرجع جدول Bootstrap

للحصول على مرجع كامل لجميع فئات الجدول ، انتقل إلى مرجع جداول Bootstrap الكامل .


❮ سابق التالي ❯