البرنامج التعليمي 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 Glyphicons


الحروف الرسومية

يوفر Bootstrap 260 حرفًا رمزيًا من مجموعة Glyphicons Halflings.

يمكن استخدام الحروف الرسومية في النص والأزرار وأشرطة الأدوات والتنقل والنماذج وما إلى ذلك.

فيما يلي بعض الأمثلة على الحروف الرسومية:

مغلف glyphicon:

طباعة glyphicon:

البحث في glyphicon:

تنزيل glyphicon:


صيغة Glyphicon

يتم إدخال رمز رسومي بالصيغة التالية:

<span class="glyphicon glyphicon-name"></span>

يجب استبدال جزء الاسم في بناء الجملة أعلاه بالاسم الصحيح للرمز الرسومي.


مثال Glyphicon

يوضح المثال التالي طرقًا مختلفة لاستخدام الحروف الرسومية:

مثال

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>

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

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

استخدم قيمة فئة Glyphicon لجعل عرض الامتداد كأيقونة "بحث".

<span class=""></span>


إكمال مرجع Bootstrap Glyphicon

للحصول على مرجع كامل لجميع الرموز الرسومية ، انتقل إلى مرجع Bootstrap Glyphicon الكامل .