Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
النقاط الرئيسية للتعلم:
1. الجدول
2. زر
في هذا الدرس ، نتعرف بشكل أساسي على جدول Bootstrap ووظائف الأزرار ، وعرض مختلف التأثيرات الغنية من خلال تعريف CSS المدمج.
واحد. ملزمة
يوفر Bootstrap بعض أنماط الطاولة الغنية للمطورين لاستخدامها.
1. التنسيق الأساسي
// تنفيذ نمط الجدول الأساسي <جدول>
ملاحظة: يمكننا عرض CSS المقابلة من خلال Firebug.
2. شكل مخطط
// دع الخطوط الموجودة في <tbody> تنتج سطرًا واحدًا تلو الآخر وتأثير خلفية أحادي اللون <جدول>
ملاحظة: يجب أن يستند تأثير الجدول إلى التنسيق الأساسي.
3. الجدول مع الحدود
// إضافة حدود إلى الجدول <الجدول>
4. تحوم الماوس
// دع الجدول تحت <tbody> يحوم الماوس لتحقيق تأثير الخلفية <جدول>
5. فئة الحالة
// يمكن ضبط نمط الخلفية لكل سطر بشكل منفصل <TR>
ملاحظة: هناك خمسة أنماط مختلفة للاختيار من بينها.
وصف النمط:
تحوم الماوس النشط فوق الصف أو الخلية
يوقع النجاح على عمل ناجح أو إيجابي
علامة المعلومات العادية المعلومات أو الإجراءات العادية
تحذير شعار تحذير أو انتباه المستخدم
يشير الخطر إلى إجراءات خطيرة أو سلبية محتملة
6. إخفاء خط
// إخفاء الخط <tr>
7. جدول استجابة
// هناك شكل مستجيب للعنصر الأصل للجدول ، أقل من 768 بكسل ، ويظهر الحدود <body>
اثنين. زر
يوفر Bootstrap الكثير من الأزرار الغنية للمطورين لاستخدامها.
1. التسميات أو العناصر التي يمكن استخدامها كأزرار
// تحويل إلى زر عادي <a href = "###"> الرابط </a> <button> زر </button> <input type = "button" value = "input">
هناك ثلاثة أشياء يجب ملاحظة:
(1). أشياء يجب ملاحظتها حول المكونات
على الرغم من أنه يمكن تطبيق فئة الأزرار على عناصر <a> و <button> ، إلا أن مكونات شريط التنقل والتنقل تدعم فقط عناصر <button>.
(2). أشياء يجب ملاحظتها عند استخدام الرابط كزر
إذا تم استخدام العنصر <a> كزر - ويتم استخدامه لإثارة وظائف معينة على الصفحة الحالية - بدلاً من ربط صفحات أخرى أو ربط أجزاء أخرى من الصفحة الحالية ، فتأكد من تعيين خاصية rob = "button" لها.
(3). عرض المتصفح
أفضل الممارسات التي تلخصها هي أنه يوصى بشدة باستخدام العنصر <utontr> كلما كان ذلك ممكنًا للحصول على تأثيرات الرسم المطابقة على كل متصفح.
بالإضافة إلى ذلك ، اكتشفنا أيضًا خطأً على المتصفح في Firefox <30 ، مما يدل على أنه يمنعنا من ضبط سمة ارتفاع الخط للأزرار التي تم إنشاؤها بناءً على عنصر <pection> ، مما يؤدي إلى عدم توافق متصفح Firefox تمامًا مع الأزرار الأخرى.
2. أنماط محددة مسبقا
// معلومات عامة <button> زر </button>
وصف النمط
BTN-Default النمط الافتراضي
نمط BTN-SUCCESS
نمط المعلومات العامة BTN-INFO
BTN-Warning تحذير
BTN-Danger نمط خطير
BTN-PRIMARY تفضيل نمط
نمط رابط BTN-Link
3. الحجم
// الحجم من الزر الكبير إلى الصغير <button> </button> <button> زر </button> <button> زر </button> <button> زر </button>
4. زر مستوى الكتلة
// block Level Line Break <Button> Button </utton> <button> زر </button>
5. حالة التنشيط
// تنشيط الزر <button> الزر </button>
6. تعطيل الحالة
// تعطيل الزر <button> زر </button>
ما سبق هو جدول Bootstrap ووظائف الأزرار التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!