Bootsrap نظرة عن كثب

درس جديد في سلسة نظرة عن كثب نتحدث فيه هذه المرة عن الـ Bootstrap ماهو البوتسراب ؟ فيم نستعمله وكيف نستعمله ؟ كل هذا وأكثر سنتطرق إليه في هذه التدوينة المباركة ان شاء الله .

ما هو الـ Bootsrap ؟ 

الـ Bootsrap  هو إطار عمل يستعمل في تصميم المواقع يعتمد أساسا على أكواد Html ,Css و Javascript قام بتطويره فريق عمل موقع تويتر وكان الهدف منه هو مساعدة االمبرمجين في تطوير تطوير تطبيقات ويب الفردية  وكان ذلك مطلع سنة 2011 إلا أنه سرعان ما انتشر بين المصممين حتى صار الإعتماد عليه من طرف المصمم شبه كلي ، ولا يكاد يخلو تصميم الآن من الـ bootsrap.

 لماذا Bootsrap ؟ 

ببساطة لأنه سهل الإستخدام ويمكن لأي مصمم مواقع مبتدأ أن يستعمله ويفهمه ، بالإضافة لأنه من المشاريع المفتوحة المصدر وهذا ما ساعد على انتشاره وتطوره بهذه السرعة حيث أنه يعتبر من أشهر المشاريع على موقع GitHub ويحظى بمتابعة كبيرة جدا . 

 كيف أستعمل Bootsrap ؟ 

هناك طريقتان لاستعمال bootsrap الأولى عن طريق تحميله من هنا  getbootstrap.com ووضعه في مجلة المشروع الذي نعطيها اسم مثلا Project أي سيكون له المسار التالي Project/bootsrtap/.. 

<link rel="stylesheet" href="//Project/bootstrap/3.0.3/css/bootstrap.min.css">

<script src="//Project/bootstrap/3.0.3/js/bootstrap.min.js"></script>

والطريقة الثانية هي استخدام إطار العامل بوتسرات مباشرة من الموقع وهذا قد لا يكون حلا جيدا خاصة عندما تكون سرعة الأنترنت ضعيفة فيكون فتح الموقع الذي قمنا بتصميمه بطئ جدا ، كما ان اي مشكل في موقع bootstrap سيؤدي إلى مشاكل في الموقع .

لذا انصح باستعمال الطريقة الاولى والتي تعتمد على تحميل البوتسراب وارفاقه بمجلد المشروع حتى يكون الموقع سهل التحميل وخفيف. 

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

مثال توضيحي 
في هذا المثال نريد ان نحصل على على هذه النتيجة 

فلا من كتابة هذا الكود للحصول على هذه النتيجة 

<button type="button" class="button">Primary</button>
.button {

    width:150px;
    height:50px;
    color:white;
    background:#33BAED;
    border: 1px solid #13A0D7; }

ولكن باستعمال bootsrap يكفي أن تضع التالي فقط 

طبعا الـclass : btn btn-primary 
معرف مسبقا في مكتبة البوتسراب والتي تحتوي على عدد كبير من الكلاسات المرتبة والمنظمة بشكل سلس وممنهج  فكل ماعليك فعله هو فقط تغيير اسم الكلاس للحصول على النتيجة التي ترغب فيها . 

إلى هنا نكون قد انتهينا من هذا المقال اتمنى ان تستفيدوا منه ولا تنسوا مشاركته مع اصدقائكم المصميمن والذين يريدون دخول عالم تصيم المواق . 

سلام :) 

<button type="button" class="btn btn-primary">Primary</button>

طبعا الـ class : btn btn-primary 

معرف مسبقا في مكتبة البوتسراب والتي تحتوي على عدد كبير من الكلاسات المرتبة والمنظمة بشكل سلس وممنهج  فكل ماعليك فعله هو فقط تغيير اسم الكلاس للحصول على النتيجة التي ترغب فيها . 


تحميل الـ Bootsrap
يمكنك تحميله من الموقع الرسمي له . 



إلى هنا نكون قد انتهينا من هذا المقال اتمنى ان تستفيدوا منه ولا تنسوا مشاركته مع اصدقائكم المصميمن والذين يريدون دخول عالم تصميم المواقع . 
سلام :)