لعلك سمعت من قبل عن اطار العمل الشهير Bootstrap الذى يستخدمه الكثير من مصممى واجهة المستخدم فى الويب فى هذه الايام سنتعرف اليوم على البوتستراب وكيفية عمله ومثال عليه.
محتوي المقال
ماهو البوتسراب ؟
كيف يعمل البوتسراب ؟
<button type="button" class="btn btn-success btn-lg">Large Success button</button>
وهى Boostrap Grid System
كيف يعمل Boostrap Grid System
- xm للموبيل
- sm للتابلت
- md للجهاز العادى
- lg للاجهزة الكبيرة
قواعد البوتستراب
- يجب ان يكون كلاسات row داخل .container للعرض الثابت للصفحة او .container-fluid للعرض الكامل
- يستخدم row لعمل مجموعة افقة من الاعمدة
- المحتوي يفضل ان يوضع داخل الاعمدة فقط
الكود الاساس لبناء البوتستراب
<div class="container"> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> </div>
شرح الكود
مثال اخر على بناء الهيدر فى دورتنا
<div class="container"> <div class="row"> <div class="col-md-12"> <header id="site-header"> <div id="site-logo"> <h2> وادى<span>التقنية </span></h2> </div><!-- #site-logo --> <nav id="site-navbar"> <ul class="list-inline"> <li><a href="#">الرئيسية</a></li> <li><a href="#">خوارزميات</a></li> <li><a href="#">دورات</a></li> <li><a href="#">مصادر التعلم</a></li> </ul> <span class="social-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-google"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> </span><!-- .social-icons --> <div class="clear"></div> </nav><!-- #site-navbar --> </header><!-- #site-header --> </div><!-- .col --> </div><!-- .row --> </div><!-- .container -->
سنتكلم سريعًا على ايقونات fontawesome
ويمكن استخدامها بهذه الطريقة
<i class="fa fa-facebook">
بعد استعداء الملف كما فعلنا فى الدرس السابق
ويتيح لنا fontawesome مجموعة كبيرة من الايقونات للاستخدام فى الموقع وهذه الايقونات تعامل مثل النص اي يمكن اعطائها لون وحجم خط وكل هذا
يمكن استخدام اي ايقونة عن طريقة معرفة الاسم الخاص بها
واستخدام الكلاس fa fa-icon-name
حيث تسبدل icon-name باسم الايقونة
ويمكنك الاطلاع على جميع ايقونات fontawesome من الموقع الرسمى من هنا
الى هنا يتنهى الدرس وشكرًا