Bootstrap-1

.‫م‬
1'st Bootstrap
‫نوح‬ ‫فادي‬ .‫م‬ : ‫إعداد‬
fadinoh@hotmail.com

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫مقدمة‬
‫تعرفت‬‫منذ‬‫فترة‬‫على‬‫مكتبة‬Twitter Bootstrap‫لبناء‬‫واجهات‬،‫االستخدام‬‫وكان‬‫الحب‬‫من‬‫الصفحة‬،‫األولى‬‫فقد‬‫وجدت‬‫فيها‬‫من‬‫الميزات‬‫ما‬‫يساعدني‬‫على‬
‫إنجاز‬‫األعمال‬‫بشكل‬‫أسرع‬‫وبمعايير‬‫عالية‬‫وبقلق‬‫أقل‬‫حيال‬‫دعم‬‫المستعرضات‬.
‫فأول‬‫يجب‬ ‫ما‬‫صفحات‬ ‫إلى‬ ‫الموقع‬ ‫تقطيع‬ ‫يسمى‬ ‫مما‬ ‫االنتهاء‬ ‫بعد‬ ‫المحترف‬ ‫المصمم‬ ‫به‬ ‫يقوم‬ ‫ان‬HTML‫المتصفحات‬ ‫أنواع‬ ‫كافة‬ ‫على‬ ‫بتجريبه‬ ‫يقوم‬ ‫ان‬ ‫هو‬
‫تجر‬ ‫بعد‬ ‫انه‬ ‫المؤكد‬ ‫من‬ ‫وطبعا‬ ... ‫العرض‬ ‫في‬ ‫مشاكل‬ ‫أي‬ ‫دون‬ ‫موقعه‬ ‫لمحتوى‬ ‫سليم‬ ‫وصول‬ ‫أكبر‬ ‫ليضمن‬‫بالظهور‬ ‫المشاكل‬ ‫ستبدأ‬ ‫متصفحات‬ ‫عدة‬ ‫على‬ ‫الموقع‬ ‫يب‬
. ‫جديد‬ ‫من‬ ‫الموقع‬ ‫تقطيع‬ ‫إعادة‬ ‫إلى‬ ‫أحيانا‬ ‫تضطر‬ ‫وقد‬ ‫بموقعك‬ ‫الخاص‬ ‫الكود‬ ‫في‬ ‫كبيرة‬ ‫فوضى‬ ‫يسبب‬ ‫ما‬ ‫وهذا‬
‫فريق‬ ‫قام‬ ‫التي‬ ‫التقنية‬ ‫هذه‬ ‫عن‬ ‫متقدما‬ ‫تفصيليا‬ ً‫ا‬‫شرح‬ ‫أيديكم‬ ‫بين‬ ‫أضع‬Twitter‫مواجه‬ ‫بعد‬ ‫الشهير‬ ‫االجتماعي‬ ‫التواصل‬ ‫موقع‬‫المزمنة‬ ‫المشاكل‬ ‫من‬ ‫العديد‬ ‫ة‬
‫ال‬ ‫مصمم‬ ‫لها‬ ‫يتعرض‬ ‫التي‬HTML‫أثناء‬‫والهاتف‬ ‫اللوحية‬ ‫كاألجهزة‬ ‫العرض‬ ‫اجهزة‬ ‫من‬ ‫وقياسات‬ ‫احجام‬ ‫وعدة‬ ‫متصفحات‬ ‫عدة‬ ‫على‬ ‫المنتج‬ ‫للموقع‬ ‫مقارنته‬
‫الكمبيوتر‬ ‫اجهزة‬ ‫وحتى‬ ‫المحمول‬‫بأنواعها‬..
‫لتشتمل‬ ‫والمكتبة‬ ‫البنية‬ ‫هذه‬ ‫بتطوير‬ ‫تويتر‬ ‫مبرمجي‬ ‫فريق‬ ‫قام‬‫على‬ ‫ايضا‬:
-‫النصوص‬ ‫ومربعات‬ ‫(كاألزرار‬ ‫الجاهزة‬ ‫العناصر‬ ‫بعض‬textbox‫أخرى‬ ‫وعناصر‬)..
-‫مؤثرات‬ ‫من‬ ‫مجموعة‬‫يسمى‬ ‫ما‬‫بمكتبة‬JQuery‫هللا‬ ‫شاء‬ ‫ان‬ ‫الكتاب‬ ‫هذا‬ ‫في‬ ‫بالتفصيل‬ ‫عرضها‬ ‫سيتم‬ ‫والتي‬
‫تاريخ‬‫البوتستراب‬
، "‫"التمهيد‬ ‫بالعربية‬ ‫الكلمة‬ ‫معنى‬‫المصدر‬ ‫المفتوحة‬ ‫المشاريع‬ ‫أشهر‬ ‫من‬ ‫انشاؤها‬ ‫وتم‬ ، ‫الشهير‬ ‫تويتر‬ ‫موقع‬ ‫في‬ ‫ومصممين‬ ‫لمطورين‬ ‫المكتبة‬ ‫هذه‬ ‫إنشاء‬ ‫أصل‬
.‫العالم‬ ‫في‬
‫عا‬ ‫تويتر‬ ‫في‬ ‫البوتستراب‬ ‫إنشاء‬ ‫تم‬‫م‬0202.‫تويتر‬ ‫شركة‬ ‫مبرمجي‬ ‫قبل‬ ‫من‬
‫بعد‬‫عدة‬‫أشهر‬‫في‬‫التطوير‬‫وانطلق‬‫المشروع‬‫بقوة‬‫على‬‫كل‬‫المستويات‬‫وبدون‬‫توجيه‬‫وبسرعة‬‫كبيرة‬‫وكانت‬‫هذه‬‫بمثابة‬‫القاعدة‬‫االساسية‬‫لبناء‬‫أساسات‬‫المكتبة‬
‫قبل‬‫إطالقها‬‫لعامة‬‫المطوريين‬.

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫وفي‬01-20-0200‫قامت‬‫تويتر‬‫باصدار‬‫النسخة‬‫األولى‬‫لهذه‬‫المكتبة‬‫للمطورين‬‫والمصممين‬‫والجميل‬‫أنه‬‫تم‬‫اإلعالن‬‫عنها‬‫بتغريدة‬‫لمطور‬‫البوتستراب‬‫نفسه‬.
‫اآلن‬‫يوجد‬‫أكثر‬‫من‬‫عشرين‬‫اصدار‬‫لهذه‬‫المكتبة‬,‫وتمت‬‫إعادة‬‫كتابتها‬‫من‬‫البداية‬‫في‬‫اإلصدارين‬V2‫و‬V3.
‫بوتستراب‬0:‫في‬‫هذا‬‫االصدار‬‫تمت‬‫اضافة‬‫الـ‬Responsive‫وجعله‬‫خيار‬‫للمطريون‬‫يقوم‬‫باضافته‬‫عند‬‫الحاجة‬.
‫بوت‬‫ستراب‬3:‫فيه‬‫تمت‬‫إعادة‬‫كتابة‬‫المكتبة‬‫مرة‬‫أخرى‬‫لجعلها‬Responsive‫بشكل‬‫إفتراضي‬,‫وعلى‬‫متصفحات‬‫الجواالت‬‫بشكل‬‫أساسي‬.

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫لماذا‬‫أستخدم‬‫البوتستراب‬
‫البوتستراب‬‫في‬‫جوهرها‬‫فقط‬“CSS”‫لكنها‬‫بنيت‬‫بمرونة‬‫والتي‬‫تقدم‬‫الكثير‬‫من‬‫القوة‬‫أكثر‬‫من‬‫الـ‬CSS‫العادية‬.
‫البساطة‬‫يمكن‬‫الحصول‬‫على‬‫مجموعة‬‫من‬‫الميزات‬‫بسهولة‬‫مثل‬‫التداخل‬‫في‬‫الكود‬,‫العمليات‬‫وتوظيف‬‫األلوان‬‫باإلضافة‬‫لذلك‬‫بنية‬‫البوتستراب‬‫المبنية‬‫على‬‫الـ‬
CSS‫بشكل‬‫أساسي‬‫عند‬‫العرض‬‫ستكون‬‫سريعة‬‫وأهم‬‫ميزات‬‫البوتستراب‬:
0.‫سهلة‬‫في‬‫التضمين‬:‫فقط‬‫ضعها‬‫في‬‫الكود‬‫الخاص‬‫بمشروعك‬‫وابدأ‬‫العمل‬‫بها‬.
0.‫التجميع‬‫لمرة‬‫واحدة‬:‫البوتستراب‬‫التحوي‬‫أي‬‫شيء‬‫إضافي‬‫على‬‫الـ‬css‫أي‬‫الصور‬‫وال‬‫ملفات‬‫جافا‬‫سكربت‬‫غير‬‫ضرورية‬‫كل‬‫ماتبقى‬‫فقط‬‫األمور‬‫البسيطة‬
‫والقوية‬‫لعمل‬‫موقعك‬‫بشكل‬‫مثالي‬.
3.‫العناصر‬‫الجاهزة‬‫الموجود‬‫في‬‫الموقع‬‫والسهلة‬ً‫ا‬‫جد‬‫في‬‫االستخدام‬‫والتعديل‬.
4.‫الجافا‬‫سكربت‬‫المطورة‬‫مع‬‫هذه‬‫المكتبة‬ً‫ا‬‫أيض‬‫يوجد‬‫فيها‬‫الكثير‬‫من‬‫الخيارات‬‫وهي‬‫سهلة‬‫في‬‫االستخدام‬‫والتطوير‬‫عليها‬.
‫الخالصة‬
‫البوتستراب‬‫أداة‬‫سهلة‬‫جميلة‬‫وتوفر‬‫الوقت‬‫والجهد‬‫ويجب‬‫أن‬‫تبدأ‬‫بالتعامل‬‫معها‬.
‫متطلبات‬‫العمل‬
‫قبل‬‫أن‬‫تبدأ‬‫أ‬‫بحاجة‬ ‫نت‬‫أ‬‫وال‬:‫إلى‬
-‫األمور‬:‫التقنية‬
o‫بلغة‬ ‫جيدة‬ ‫معرفة‬HTML
o‫معرفة‬‫بلغة‬ ‫جيدة‬CSS‫باإلصدارين‬CSS3‫و‬CSS2
o‫بلغة‬ ‫متوسطة‬ ‫معرفة‬JavaScript‫و‬‫ال‬ ‫مكتبات‬Jquery
-:‫البرامج‬
o‫برنامج‬Dreamweaver‫او‬‫لغة‬ ‫محرر‬ ‫أي‬HTML‫و‬CSS
o‫برنامج‬Photoshop
, ‫جدا‬ ‫وسهلة‬ ‫بسيطة‬ ‫بخطوات‬ ‫بالبوتستراب‬ ‫البدء‬ ‫يمكن‬‫والمتابع‬ ‫القراءة‬ ‫بإمكانك‬ , ‫المصمم‬ ‫خبرة‬ ‫بحسب‬ ‫عليها‬ ‫واإلضافة‬ ‫تطويرها‬ ‫يمكن‬ ‫خطوة‬ ‫كل‬‫من‬ ‫لتحصل‬ ‫ة‬
‫ما‬ ‫على‬ ‫البوتستراب‬‫يناسب‬.‫موقعك‬ ‫تصميم‬‫تستطيع‬ ‫المصدر‬ ‫مفتوحة‬ ‫عمليا‬ ‫انها‬ ‫أي‬‫إ‬. ‫موقعك‬ ‫يناسب‬ ‫بما‬ ‫محتوياتها‬ ‫وتعديل‬ ‫وحذف‬ ‫ضافة‬
‫م‬ ‫البوتستراب‬ ‫مكتبة‬ ‫تحميل‬ ‫هي‬ ‫للبدء‬ ‫األولى‬ ‫الخطوة‬: ‫التالي‬ ‫الرابط‬ ‫خالل‬ ‫ن‬‫هنا‬ ‫انقر‬
‫هو‬ ‫حاليا‬ ‫اصدار‬ ‫واخر‬ ‫اصدارات‬ ‫عدة‬ ‫على‬ ‫المكتبة‬ ‫هذه‬ ‫حصلت‬ ‫وقد‬V.3.1.1

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫ال‬ ‫منها‬ ‫الملفات‬ ‫مجموعة‬ ‫من‬ ‫المكتبة‬ ‫هذه‬ ‫تتألف‬css‫ال‬ ‫و‬Javascript: ‫التالي‬ ‫بالشكل‬ ‫موزعة‬
‫الصفحة‬ ‫ضمن‬ ‫المكتبات‬ ‫تضمين‬ ‫تعليمات‬‫فيها‬ ‫البوتستراب‬ ‫مكتبة‬ ‫استخدام‬ ‫تريد‬ ‫التي‬:

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

<link rel="stylesheet" href="css/bootstrap-theme.min.css">

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

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫ابدأ‬‫بقالبك‬‫البسيط‬
‫ابدأ‬‫بقالبك‬‫البسيط‬‫الـ‬HTML‫ويوجد‬‫فيه‬‫استدعاء‬‫لمكتبة‬‫البوتستراب‬‫الخاصة‬‫بالستايل‬ً‫ا‬‫أيض‬‫مكتبة‬‫الـ‬JS‫الخاصة‬‫بالبوتستراب‬‫وبالتأكيد‬‫كأول‬‫كود‬‫تقوم‬‫به‬
‫يجب‬‫أن‬‫تقوم‬‫بطباعة‬“ً‫ال‬‫أه‬‫بالعالم‬”):
ً‫ا‬‫طبع‬‫هنا‬‫يجب‬‫حفظ‬‫هذا‬‫الملف‬‫بنفس‬‫المجلد‬‫الذي‬‫توجد‬‫فيه‬‫ملفات‬‫المكتبة‬‫التي‬‫سبق‬‫تحميلها‬.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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



</head>
<body>
<h1>Hello, world!</h1>

<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫أمثلة‬‫عن‬‫البوتستراب‬
‫على‬‫هذا‬‫المثال‬‫البسيط‬‫الذي‬‫كتبته‬ً‫ا‬‫سابق‬‫ستتمكن‬‫من‬‫انشاء‬‫أي‬‫موقع‬‫تريد‬‫وإليك‬‫بعض‬‫األمثلة‬‫عن‬‫مواقع‬‫بسيطة‬‫تم‬‫انشاءها‬‫بكود‬‫البوتستراب‬‫البسيط‬‫هذا‬
‫احد‬ ‫استخدام‬ ‫كيفية‬ ‫يوضح‬ ‫التالي‬ ‫المثال‬‫التصفح‬ ‫أي‬ ‫المستعرض‬ ‫شاشة‬ ‫تصغير‬ ‫بمجرد‬ ‫شكلها‬ ‫تغير‬ ‫يتم‬ ‫كيف‬ ‫(الحظ‬ ‫الرئيسية‬ ‫القائمة‬ ‫وهي‬ ‫البوتستراب‬ ‫عناصر‬
)‫المثال‬ ‫سبيل‬ ‫على‬ ‫الجوال‬ ‫شاشة‬ ‫على‬
... ‫التفصيل‬ ‫من‬ ‫بشيء‬ ‫المثال‬ ‫هذا‬ ‫سنعرض‬
‫الموقع‬ ‫عنوان‬ ‫مع‬ ‫رئيسية‬ ‫قائمة‬ ‫على‬ ‫تحتوي‬ ‫الصفحة‬ ‫هذه‬ ‫فإن‬ ‫نالحظ‬ ‫كما‬‫الص‬ ‫في‬ ‫محتوى‬ ‫وعنوان‬...‫عشوائي‬ ‫ونص‬ ‫فحة‬

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫في‬ ‫كما‬ ‫موضح‬ ‫الصفحة‬ ‫بهذه‬ ‫الخاص‬ ‫الكود‬ ‫ان‬:‫الشكل‬
( ‫الصفوف‬ ‫اسما‬ ً‫ا‬‫وخصوص‬ ‫الكود‬ ‫هذا‬ ‫داخل‬ ‫الموجودة‬ ‫بالتفاصيل‬ ‫حاليا‬ ‫نهتم‬ ‫لن‬classes‫البوتستراب‬ ‫قوة‬ ‫لتوضيح‬ ‫هو‬ ‫المثال‬ ‫هذا‬ )
‫ع‬ ‫لتحصل‬ )‫السابق‬ ‫الكود‬ ‫تشغيل‬ ‫بعد‬ ‫لديك‬ ‫المتصفح‬ ‫شاشة‬ ‫بتصغير‬ ‫قم‬ ( ‫المثال‬ ‫سبيل‬ ‫على‬ ‫الجوال‬ ‫شاشة‬ ‫على‬ ‫عرضها‬ ‫وعن‬ ‫السابقة‬ ‫الصفحة‬ ‫نفس‬ ‫ان‬‫الشكل‬ ‫لى‬
) ‫مثال‬ ‫الجوال‬ ‫شاشة‬ ‫عرض‬ ‫لتالئم‬ ‫الرئيسية‬ ‫القائمة‬ ‫تحولت‬ ‫كيف‬ ‫(الحظ‬ ‫التالي‬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!—‫بالبوتستراب‬ ‫الخاص‬ ‫الستايل‬ ‫ملف‬ ‫استدعاء‬ -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!— ‫بالصفحة‬ ‫خاص‬ ‫إضافي‬ ‫ستايل‬ -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a
mostly barebones HTML document.</p>
</div>
</div>
<!—‫بالمكتبة‬ ‫الخاصة‬ ‫سكريبت‬ ‫الجافا‬ ‫ملفات‬ ‫استدعاء‬
================================================== -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫األندرويد‬ ‫بتطبيقات‬ ‫الخاصة‬ ‫القائمة‬ ‫أصبحت‬ ‫وكأنها‬
‫أخرى‬ ‫امثلة‬ ‫وهناك‬. ‫التفصيل‬ ‫من‬ ‫بشيء‬ ‫الكتاب‬ ‫هذا‬ ‫ضمن‬ ‫عرضها‬ ‫سيتم‬
‫دعم‬‫المتصفحات‬
‫البوتستراب‬‫بنيت‬‫لتالئم‬‫العمل‬‫على‬‫كل‬‫المتصفحات‬‫الجديدة‬ً‫ء‬‫سوا‬‫كانت‬‫المتصفحات‬‫العادية‬‫أو‬‫متصفحات‬‫الجوال‬,‫بمعنى‬‫أنه‬‫سيكون‬‫هناك‬‫فرق‬‫في‬‫ستايل‬
‫الموقع‬‫في‬‫المتصفحات‬‫القديمة‬.
‫إذا‬‫كان‬‫هناك‬‫اختالف‬‫بشكل‬‫الكود‬‫على‬‫متصفحات‬IE‫يمكنك‬‫كتابة‬‫هذا‬‫السطر‬‫في‬‫الكود‬‫الخاص‬‫بموقعك‬
<meta http-equiv="X-UA-Compatible" content="IE=edge>"
‫بهذا‬‫السطر‬‫ستحصل‬‫على‬‫تالئم‬‫في‬‫المتصفح‬‫لموقعك‬‫بشكل‬‫جيد‬‫ويبقى‬‫هناك‬‫بعض‬‫الفروقات‬‫الصغيرة‬.‫بإشارة‬ ‫الجدول‬ ‫ضمن‬ ‫موضحة‬ ‫الصغيرة‬ ‫(الفروقات‬×(

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫تخصيص‬‫الستايل‬
‫اذا‬‫كنت‬‫تريد‬‫أن‬‫تقوم‬‫بالتعديل‬‫على‬‫عناصر‬‫البوتستراب‬‫فاألمر‬‫بسيط‬ً‫ا‬‫جد‬‫فقط‬‫بإعادة‬‫الكتابة‬‫على‬‫اسم‬‫العنصر‬‫بملفك‬‫الـ‬css‫ستحصل‬‫على‬‫ستايل‬‫جديد‬‫خاص‬
‫بك‬.
ً‫ا‬‫أيض‬‫إذا‬‫لم‬‫تكن‬‫بحاجة‬‫لكل‬‫العناصر‬‫أو‬‫تريد‬‫تخصيص‬‫بعض‬‫االعدادات‬‫يمكنك‬‫اختيار‬‫العناصر‬‫التي‬‫ستتضمنها‬‫مكتبة‬‫البوتستراب‬‫وإعادة‬‫إعدادها‬‫من‬‫جديد‬‫من‬
“‫مركز‬‫تخصيص‬‫وتحميل‬”
‫هكذا‬‫تكون‬‫قد‬‫أنشأت‬‫مكتبتك‬‫الخاصة‬‫البوتستراب‬‫وبدأت‬‫بالتعامل‬‫معها‬.
‫في‬‫النهاية‬‫أود‬‫أن‬‫أقول‬‫الموضوع‬ً‫ا‬‫جد‬‫بسيط‬‫فقط‬‫ابدأ‬

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫إعدادات‬‫ال‬CSS‫في‬‫البوتستراب‬
‫بنية‬ ‫اآلن‬ ‫سنستعرض‬‫ال‬CSS.‫موقعك‬ ‫بستايل‬ ‫الخاص‬ ‫الكود‬ ‫كتابة‬ ‫في‬ ‫والسرعة‬ ‫والفعالية‬ ‫القوة‬ ‫معا‬ ‫لنرى‬ ‫البوتستراب‬ ‫وملفات‬ ‫تقنية‬ ‫في‬
‫الم‬ ‫مع‬ ‫(التالؤم‬ ‫موضوع‬ ‫ضمن‬ ‫وخاصة‬ ‫جدا‬ ‫جدا‬ ‫مهمة‬ ‫وهي‬ ‫صفحتك‬ ‫في‬ ‫كود‬ ‫أي‬ ‫تكتب‬ ‫ان‬ ‫قبل‬ ‫بها‬ ‫تقوم‬ ‫ان‬ ‫يجب‬ ‫التهيئة‬ ‫أمور‬ ‫بعض‬ ‫البداية‬ ‫في‬ ‫هناك‬:)‫تصفحات‬
0-HTML5 doctype‫ال‬ ‫لغة‬ ‫اعتماد‬ ‫وهي‬ :HTML 5‫متصفح‬ ‫اليأخده‬ ‫مهم‬ ‫امر‬ ‫وهو‬ ‫صفحتك‬ ‫ضمن‬Internet Explorer‫وجب‬ ‫لذلك‬ ‫االعتبار‬ ‫بعين‬
‫تنفيذه‬
0-Mobile first‫هو‬ ‫الموبايل‬ ‫او‬ ‫اللوحي‬ ‫الجهاز‬:‫األهم‬‫بوتستراب‬ ‫اصدار‬ ‫في‬3‫أجهزة‬ ‫على‬ ‫الموقع‬ ‫عرض‬ ‫اجل‬ ‫من‬ ‫خاصة‬ ‫ستايالت‬ ‫أضافة‬ ‫تمت‬
‫الجوال‬ ‫شاشة‬ ‫على‬ ‫وفعال‬ ‫جيد‬ ‫بشكل‬ ‫الموبايل‬‫عمل‬ ‫من‬ ‫المستخدم‬ ‫ويستطيع‬Zoom‫لتكبير‬‫قالب‬ ‫على‬ ‫يؤثر‬ ‫ان‬ ‫دون‬ ‫الموقع‬ ‫محتوى‬.‫الصفحة‬‫اجل‬ ‫ومن‬
‫ال‬ ‫ضمن‬ ‫التالي‬ ‫األمر‬ ‫نضع‬ ‫ان‬ ‫يجب‬ ‫الرائعة‬ ‫الميزة‬ ‫هذه‬ ‫تفعيل‬Head:‫بصفحتك‬ ‫الخاص‬
‫اما‬‫إذا‬‫أردنا‬‫الشخص‬ ‫ونجبر‬ ‫الميزة‬ ‫هذه‬ ‫نلغي‬ ‫ان‬‫ب‬ ‫القيام‬ ‫عدم‬ ‫على‬Zoom‫عمل‬ ‫فقط‬ ‫ويستطيع‬Scroll‫في‬ ‫الحال‬ ‫هو‬ ‫كما‬Facebook mobile
)‫معها‬ ً‫ا‬‫افتراضي‬ ‫يتالءم‬ ‫سوف‬ ‫الجوال‬ ‫شاشة‬ ‫على‬ ‫الموقع‬ ‫ان‬ ‫(حيث‬ ‫الصفحة‬ ‫تكبير‬ ‫دون‬‫األمر‬ ‫بإضافة‬ ‫نقوم‬scalable=no-user‫الوسم‬ ‫إلى‬
‫كما‬ ‫السابق‬:‫يلي‬
3-Normalize.css‫أهم‬ ‫من‬ ‫وهو‬‫ب‬ ‫الخاصة‬ ‫التهيئة‬ ‫أوامر‬ ‫اهم‬ ‫على‬ ‫يحتوي‬ ‫ألنه‬ ‫وذلك‬ ‫موقعك‬ ‫صفحات‬ ‫ضمن‬ ‫تضمينها‬ ‫يجب‬ ‫التي‬ ‫الملفات‬‫وسوم‬HTML
‫الوسم‬ ‫ان‬ ‫المثال‬ ‫سبيل‬ ‫على‬<body>: ‫وهي‬ ‫هامة‬ ‫افتراضية‬ ‫تهئية‬ ‫إلى‬ ‫بحاجة‬
‫ال‬ ‫لغة‬ ‫وسوم‬ ‫جميع‬ ‫وكذلك‬HTML‫ال‬ ‫ألن‬ ‫التهيئة‬ ‫هذه‬ ‫إلى‬ ‫بحاجة‬padding‫متصفح‬ ‫في‬ ‫االفتراضي‬firefox‫متصفح‬ ‫في‬ ‫عنه‬ ‫يختلف‬chrome‫فإن‬ ‫لذلك‬
‫الحلول‬ ‫افضل‬ ‫من‬ ‫هو‬ ‫صفر‬ ‫بالقيمة‬ ‫تهيئته‬
‫محتوى‬ ‫مراجعة‬ ‫يمكنك‬normalize.css‫هنا‬ ‫انقر‬ ‫الرابط‬ ‫خالل‬ ‫من‬ ‫الملف‬ ‫هذا‬ ‫تحميل‬ ‫ويمكنك‬ ‫للفكرة‬ ‫اكبر‬ ‫فهم‬ ‫اجل‬ ‫من‬
4-Containers:‫الوهمية‬ ‫الشبكة‬ ‫نظام‬ ‫يسمى‬ ‫ما‬ ‫يوجد‬ ‫وضمنه‬ ‫الرئيسي‬ ‫الصفحة‬ ‫محتوى‬(grid system)‫صفة‬ ‫يحمل‬ ‫المحتوى‬ ‫هذا‬ ‫إن‬ ،
.container‫مايسمى‬ ‫صفات‬ ‫على‬ ‫تحتوي‬ ‫والتي‬media‫المثال‬ ‫سبيل‬ ‫على‬ ‫للشاشة‬ ‫معين‬ ‫عرض‬ ‫ضمن‬ ‫الموقع‬ ‫محتوى‬ ‫تنسيق‬ ‫يتم‬ ‫خاللها‬ ‫من‬ ‫التي‬
‫ع‬ ‫افقي‬ ‫بشكل‬ ‫الرئيسية‬ ‫القائمة‬ ‫يعرض‬ ‫ان‬‫شاشة‬ ‫عرض‬ ‫ند‬022‫شاشة‬ ‫عرض‬ ‫عند‬ ‫عمودي‬ ‫بشكل‬ ‫بعرضها‬ ‫يقوم‬ ‫وان‬ ‫بيكسل‬422‫هذه‬ ‫كل‬ . ‫بيكسل‬
‫بعرض‬ ‫التحكم‬ ‫خالل‬ ‫من‬ ‫بها‬ ‫التحكم‬ ‫يتم‬ ‫األوامر‬‫البسيط‬ ‫العنصر‬ ‫هذا‬.container.‫الحقا‬ ‫الموضوع‬ ‫هذا‬ ‫في‬ ‫الغوص‬ ‫وسيتم‬
<!DOCTYPE html>
<html lang="en">
...
</html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
.body {
margin:0;
padding:0;
}
<div class="container"> ... </div>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫ك‬ ‫على‬ ‫تعمل‬ ‫ويب‬ ‫بصفحة‬ ‫للبدء‬ ‫جاهزين‬ ‫اصبحنا‬ ‫السابقة‬ ‫الخمسة‬ ‫الخطوات‬ ‫بهذه‬.‫مشاكل‬ ‫أي‬ ‫دون‬ ‫المتصفحات‬ ‫افة‬
: ‫وهو‬ ‫البوتستراب‬ ‫مكتبة‬ ‫مع‬ ‫مرفق‬ ‫مهم‬ ‫ملف‬ ‫توضيح‬ ‫يجب‬ ‫للبوتستراب‬ ‫المخصص‬ ‫الكورس‬ ‫في‬ ‫البدء‬ ‫قبل‬config.json
: ‫مثال‬ ‫المصمم‬ ‫حاجة‬ ‫بحسب‬ ‫تهيئتها‬ ‫اجل‬ ‫من‬ ‫افتراضية‬ ‫تعد‬ ‫مهمة‬ ‫متحوالت‬ ‫على‬ ‫يحتوي‬ ‫الملف‬ ‫هذا‬
@btn-default-color": "#333 "
‫الموقع‬ ‫في‬ ‫المستخدم‬ ‫للزر‬ ‫االفتراضي‬ ‫اللون‬ ‫تحديد‬ ‫اجل‬ ‫من‬ ‫متحول‬ ‫وهو‬
.‫الكورس‬ ‫ضمن‬ ‫هللا‬ ‫شاء‬ ‫ان‬ ‫سردها‬ ‫سيتم‬ ‫كثيرة‬ ‫متحوالت‬ ‫وهناك‬

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
Grid System
‫الويب‬ ‫لصفحة‬ ‫الجدولة‬ ‫او‬ ‫الشبكة‬ ‫نظام‬
‫الوي‬ ‫صفحة‬ ‫اعتبار‬ ‫على‬ ‫الوهمية‬ ‫الشبكة‬ ‫مبدأ‬ ‫على‬ ‫البوتستراب‬ ‫تقوم‬ ‫الموقع‬ ‫تنسيق‬ ‫ضمان‬ ‫اجل‬ ‫من‬‫األسطر‬ ‫هذه‬ ‫واألعمدة‬ ‫األسطر‬ ‫من‬ ‫مجموعة‬ ‫الى‬ ‫مقسمة‬ ‫ب‬
.‫عام‬ ‫بشكل‬ ‫الصفحة‬ ‫ببنية‬ ‫للتحكم‬ ‫بلوكات‬ ‫بمجموعها‬ ‫تمثل‬ ‫واألعمدة‬
‫إلى‬ ‫الحالة‬ ‫بهذه‬ ‫الصفحة‬ ‫تقسم‬00‫على‬ ‫االعمدة‬ ‫هذه‬ ‫وتحتوي‬ ‫الشاشة‬ ‫حجم‬ ‫تناقص‬ ‫او‬ ‫زيادة‬ ‫مع‬ ‫ديناميكي‬ ‫بشكل‬ ‫حجمها‬ ‫ويتزايد‬ ‫عمود‬classes‫مسبقا‬ ‫معرفة‬
‫المكتب‬ ‫ضمن‬.‫ة‬
000002107654300
------------
------------
. . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . .
000002107654300
‫هذه‬ ‫عمل‬ ‫مبدأ‬ ‫إن‬:‫يلي‬ ‫كما‬ ‫موضح‬ ‫البوتستراب‬ ‫في‬ ‫الشبكة‬
-( ‫بلوك‬ ‫ضمن‬ ‫توضع‬ ‫إن‬ ‫يجب‬ ‫األسطر‬div‫يدعى‬ ).container‫يدعى‬ ‫بلوك‬ ‫ضمن‬ ‫او‬ )‫الشاشة‬ ‫يتوسط‬ ‫ثابت‬ ‫(بقياس‬.container-fluid‫(قياس‬
‫دقيق‬ ‫بشكل‬ ‫قياساتها‬ ‫وتحديد‬ ‫البلوكات‬ ‫تأمين‬ ‫اجل‬ ‫من‬ ‫وذلك‬ )‫الشاشة‬ ‫بحجم‬
-‫كام‬ ‫شبكة‬ ‫إنشاء‬ ‫اجل‬ ‫من‬ ‫األسطر‬ ‫هذه‬ ‫نستخدم‬‫الصفحة‬ ‫مستوى‬ ‫على‬ ‫لة‬
-)‫(بلوكات‬ ‫لدينا‬ ‫ينشأ‬ ‫بحيث‬ ‫بنا‬ ‫الخاصة‬ ‫الصفحة‬ ‫محتويات‬ ‫نضع‬ ‫الخاليا‬ ‫هذه‬ ‫وضمن‬ ‫الخاليا‬ ‫من‬ ‫مجموعة‬ ‫على‬ ‫نحصل‬ ‫واألعمدة‬ ‫األسطر‬ ‫خالل‬ ‫من‬
-‫كـ‬ ‫يعرف‬ ‫الصفحة‬ ‫هذه‬ ‫في‬ ‫سطر‬ ‫كل‬ ‫إن‬.row‫ال‬ ‫اسم‬ ‫ان‬ ‫(أي‬class‫هو‬ ‫بالسطر‬ ‫الخاص‬.row)
-‫خالل‬ ‫من‬ ‫البلوك‬ ‫مساحة‬ ‫تحديد‬ ‫يتم‬( ‫مثال‬ ‫المحجوزة‬ ‫الخاليا‬ ‫عدد‬ ‫تحديد‬col-md-4‫خاليا‬ ‫أربع‬ ‫سيحجز‬ )‫اصل‬ ‫من‬00‫أي‬3333%‫الصفحة‬ ‫عرض‬ ‫من‬
:‫الشاشة‬ ‫مع‬ ‫التالؤم‬Media Queries
‫مختلفة‬ ‫شاشات‬ ‫على‬ ‫الموقع‬ ‫استعراض‬ ‫حال‬ ‫في‬ ‫الصفحة‬ ‫بشكل‬ ‫للتحكم‬ ‫كشروط‬ ‫التالية‬ ‫األوامر‬ ‫تستخدم‬
sdsdsdsdsdsdsd*/ /* ‫صغيرة‬ ‫لوحية‬ ‫أجهزة‬ (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* ‫القياس‬ ‫متوسطة‬ ‫(أجهزة‬desktops,laptops 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* ‫كبيرة‬ ‫بقياسات‬ ‫(اجهزة‬large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫توضيحه‬ ‫يمكن‬ ‫األول‬ ‫االمر‬ ‫مثال‬ ‫محدد‬ ‫عرض‬ ‫قياس‬ ‫اجل‬ ‫من‬ ‫الصفحة‬ ‫في‬ ‫استخدامه‬ ‫يمكن‬ ‫كشرط‬ ‫يعتبر‬ ‫األمر‬ ‫هذا‬ ‫إن‬‫يلي‬ ‫كما‬:
‫بمقدار‬ ‫الشاشة‬ ‫قياس‬ ‫اصبح‬ ‫اذا‬@screen-sm-min‫ملف‬ ‫في‬ ‫المصمم‬ ‫قبل‬ ‫من‬ ‫بها‬ ‫التحكم‬ ‫يتم‬ ‫قيمة‬ ‫عن‬ ‫عبارة‬ ‫هو‬ ‫المتحول‬ ‫هذا‬ ‫إن‬ ‫حيث‬‫البارامترات‬‫الخاص‬
‫القيمة‬ ‫هذه‬ ‫بوضع‬ ‫سأقوم‬ ‫أنا‬ ‫المثال‬ ‫سبيل‬ ‫على‬ ‫بالبوتستراب‬@screen-sm-min: 570px‫من‬ ‫اقل‬ ‫الشاشة‬ ‫عرض‬ ‫أصبح‬ ‫إذا‬ ‫أي‬572‫سيتم‬ ‫فإنه‬ ‫بيكسل‬
‫ض‬ ‫للبلوكات‬ ‫معينة‬ ‫وحاالت‬ ‫معينة‬ ‫قيم‬ ‫تغيير‬.‫الصفحة‬ ‫من‬
‫أمر‬ ‫ان‬@media‫في‬ ‫جدا‬ ‫مهم‬ ‫امر‬ ‫هو‬css3‫لنقر‬ ‫خالل‬ ‫من‬ ‫جدا‬ ‫المهم‬ ‫االمر‬ ‫هذا‬ ‫على‬ ‫االطالع‬ ‫يمكنك‬ ‫الشاشة‬ ‫قياس‬ ‫غير‬ ‫الشروط‬ ‫من‬ ‫بالعديد‬ ‫التحكم‬ ‫وبإمكانك‬
‫التالي‬ ‫الرابط‬ ‫على‬‫هنا‬ ‫انقر‬
‫ا‬ ‫هذا‬ ‫ضمن‬ ‫يستخدم‬‫كتابة‬ ‫خالل‬ ‫من‬ ‫اخرى‬ ‫اضافية‬ ‫شروط‬ ‫المر‬and‫بين‬.‫الشروط‬‫الصفحة‬ ‫لحجم‬ ‫األكبر‬ ‫التقييد‬ ‫اجل‬ ‫من‬ ‫آخر‬ ‫شرط‬ ‫إضافة‬ ‫بإمكاننا‬ ‫مثالنا‬ ‫ففي‬
‫ليصبح‬ ‫المعروض‬ ‫المحتوى‬ ‫مع‬ ‫وتالؤمها‬:‫بالشكل‬
: ‫يلي‬ ‫كما‬ ‫تقسيمها‬ ‫تم‬ ‫الشاشات‬ ‫مختلف‬ ‫على‬ ‫العمل‬ ‫لتالئم‬ ‫الشبكة‬ ‫هذه‬ ‫تصنيف‬ ‫يمكننا‬ ‫حاالت‬ ‫اربع‬ ‫يوجد‬
‫جدا‬ ‫الصغيرة‬ ‫األجهزة‬
(>768px)
)‫(تابلت‬ ‫الصغيرة‬ ‫األجهزة‬
(≥768px)
( ‫المتوسطة‬ ‫األجهزة‬Desktop)
(≥992px)
‫األجهزة‬‫الكبيرة‬(Desktop)
(≥1200px)
‫المحتوى‬ ‫عرض‬‫اتوماتيكي‬750px970px1170px
‫ال‬ ‫اسم‬class-xs-.col-sm-.col-md-.col-lg-.col
‫اليحدث‬ ‫ان‬ ‫اردت‬ ‫أذا‬‫الشاشة‬ ‫في‬ ‫الموجود‬ ‫شكلها‬ ‫على‬ ‫تحافظ‬ ‫بل‬ ‫البعض‬ ‫بعضها‬ ‫تحت‬ ‫الخاليا‬ ‫تترتب‬ ‫ان‬ ‫التريد‬ ‫الجوال‬ ‫على‬ ‫الصفحة‬ ‫فتح‬ ‫عند‬ ‫(أي‬ ‫التسلسل‬ ‫هذا‬
‫ااألمر‬ ‫باستخدام‬ ‫نقوم‬ ‫الكبيرة‬.col-xs-* .col-md-*‫يلي‬ ‫كما‬
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
</div>

<!— ‫بحجم‬ ‫تبدأ‬ ‫االعمدة‬05%‫و‬ ‫الجوال‬ ‫شاشة‬ ‫على‬3333%‫العادية‬ ‫الشاشة‬ ‫على‬ -->
<div class="row">
</div>

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫ال‬ ‫على‬ ‫للعمل‬ ‫الديناميكية‬ ‫إضافة‬ ‫اردنا‬ ‫اذا‬: ‫التالي‬ ‫بالشكل‬ ‫األمر‬ ‫يصبح‬ ً‫ا‬‫أيض‬ ‫تابلت‬
‫من‬ ‫مجموعة‬ ‫استخدام‬ ‫إن‬*-md-.col‫بشكل‬ ‫تتوزع‬ ‫وال‬ ‫طوالني‬ ‫بشكل‬ ) ‫موبايل‬ ‫او‬ ‫(تابلت‬ ‫الصغيرة‬ ‫األجهزة‬ ‫مع‬ ‫تتالءم‬ ‫ان‬ ‫بإمكانها‬ ‫شبكة‬ ‫بناء‬ ‫من‬ ‫يمكنك‬
‫ف‬ ‫المكتبية‬ ‫الكمبيوتر‬ ‫أجهزة‬ ‫على‬ ‫اما‬ ) ‫البعض‬ ‫بعضها‬ ‫تحت‬ ‫الخاليا‬ ‫تصبح‬ ‫(أي‬ ‫عرضاني‬‫افقي‬ ‫بشكل‬ ‫خاليا‬ ‫ترتيب‬ )‫(عرضية‬ ‫تصبح‬
:‫الفكرة‬ ‫هذه‬ ‫يوضح‬ ‫التالي‬ ‫المثال‬
‫الخاليا‬ ‫هذه‬ ‫أن‬ ‫نالحظ‬ ‫الجوال‬ ‫شاشة‬ ‫بعرض‬ ‫لتصبح‬ ‫تصغيرها‬ ‫وعند‬ ..‫الشخصي‬ ‫للكمبيوتر‬ ‫المتصفح‬ ‫شاشة‬ ‫على‬ ‫عرضاني‬ ‫بشكل‬ ‫الخاليا‬ ‫ترتيب‬ ‫تالحظ‬‫ترتبت‬ ‫قد‬
: ‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ ‫البعض‬ ‫بعضها‬ ‫تحت‬
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫التالي‬ ‫بالشكل‬ ‫هو‬ ‫الصفوف‬ ‫بهذه‬ ‫الخاص‬ ‫الكود‬ ‫إن‬
‫ال‬ ‫مكتبات‬ ‫ضم‬ ‫التنس‬ **Bootstrap‫الصفحة‬ ‫ضمن‬.
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫األكواد‬ ‫هذه‬ ‫بتجربة‬ ‫قم‬ ***)‫الفرق‬ ‫لترى‬ ‫المتصفح‬ ‫حجم‬ ‫وتصغير‬ ‫بتكبير‬ ‫(وقم‬ ‫النتائج‬ ‫في‬ ‫الفرق‬ ‫لتالحظ‬ ‫بنفسك‬
‫وق‬ ‫إضافية‬ ‫مشكلة‬ ‫توجهنا‬ ‫قد‬‫وهي‬ ‫المصممين‬ ‫من‬ ‫العديد‬ ‫تواجه‬ ‫د‬‫المحتوى‬ ‫حجم‬ ‫اختلف‬ ‫اذا‬ ‫وخاصة‬ ‫لها‬ ‫المجاورة‬ ‫الخاليا‬ ‫من‬ ‫أطول‬ ‫خلية‬ ‫على‬ ‫نحصل‬ ‫ان‬
‫األمر‬ ‫بإضافة‬ ‫نقوم‬.clearfix‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬:
: ‫هو‬ ‫والناتج‬
‫الخاليا‬ ‫في‬ ‫االزاحات‬ ‫عمليات‬ ‫ان‬ ‫كما‬‫نستخدم‬.col-md-offset-*: ‫المثال‬ ‫سبيل‬ ‫على‬ ‫للتطبيق‬ ‫قابلة‬
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 Resize your viewport or check it out
on your phone for an example. </div>

<div class="clearfix visible-xs"></div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
</div>
<div class="row">
</div>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
: ‫يلي‬ ‫كما‬ ‫الواحدة‬ ‫الخلية‬ ‫ضمن‬ ‫الخاليا‬ ‫من‬ ‫مجموعة‬ ‫استخدام‬ ‫يمكنك‬ ‫كما‬
: ‫مالحظة‬
‫على‬ ‫تحتوي‬ ‫الخاليا‬ ‫هذه‬ ‫جميع‬Padding‫البوتستراب‬ ‫مكتبة‬ ‫ضمن‬ ‫ضمنيا‬ ‫موضوع‬.
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
Level 2: .col-md-6
</div>
Level 2: .col-md-6
</div>
</div>
</div>
</div>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫أوامر‬Bootstrap‫لغة‬ ‫على‬ ‫وتعديالتها‬HTML
‫ال‬ ‫اوامر‬ ‫اهم‬ ‫الفصل‬ ‫هذا‬ ‫في‬ ‫سنذكر‬HTML‫كل‬ ‫بداية‬ ‫في‬ ‫تعديلها‬ ‫إلى‬ ‫الحاجة‬ ‫دون‬ ‫فوري‬ ‫بشكل‬ ‫استخدمها‬ ‫اجل‬ ‫من‬ ‫بتحسينها‬ ‫البوتستراب‬ ‫قامت‬ ‫التي‬ ‫المعروفة‬
.‫للموقع‬ ‫تصميم‬
‫العناوين‬(Headings: )
‫األوامر‬ ‫ان‬<h1>‫إلى‬<h6>‫يلي‬ ‫كما‬ ‫مباشر‬ ‫بشكل‬ ‫استخدامها‬ ‫ليتم‬ ‫البوتستراب‬ ‫في‬ ‫تحسينها‬ ‫تم‬
: ‫التالي‬ ‫الشكل‬ ‫ليكون‬
( ‫الموقع‬ ‫محتوى‬Body copy):
<h1>h1. Bootstrap heading</h1>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫بوتستراب‬ ‫في‬ ‫االفتراضي‬ ‫الخط‬ ‫حجم‬ ‫ان‬size-font: ‫افتراضيا‬ ‫هي‬14px‫مع‬height-line‫بمقدار‬03405‫وسم‬ ‫على‬ ‫مطبقة‬ ‫وهي‬<body>‫و‬<p>
‫ب‬height-line‫مقداره‬10px.
‫الواضح‬ ‫النص‬ ‫إضافة‬ ‫إن‬(lead body)‫بإضافة‬ ‫يتم‬.lead‫الوسم‬ ‫إلى‬<p>
: ‫النص‬ ‫مؤثرات‬
‫ال‬ ‫في‬ ‫نفسها‬ ‫هي‬html‫أي‬ ‫عليها‬ ‫هناك‬ ‫وليس‬:‫تعديل‬
0-Small text:<small> …33 </small>
0-Bold:<strong> …… </strong>
3-Italics:<em>…33</em>
: ‫النص‬ ‫تموضع‬
‫(يمين‬ ‫البلوك‬ ‫في‬ ‫النص‬ ‫وجود‬ ‫مكان‬ ‫عن‬ ‫تعبر‬ ‫وهي‬–‫يسار‬-)...
: ‫مثال‬
: ‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ ‫ليظهر‬ ‫ما‬ ‫شخص‬ ‫او‬ ‫معين‬ ‫مكان‬ ‫عنوان‬ ‫وضع‬ ‫نريد‬
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
.‫أوضح‬ ‫بشكل‬ ‫النتيجة‬ ‫على‬ ‫لتحصل‬ ‫السابق‬ ‫الكود‬ ‫بتجربة‬ ‫قم‬
: ‫الجدوال‬
‫ال‬ ‫لغة‬ ‫في‬ ‫الجدول‬ ‫بناء‬ ‫وعند‬ ‫نعلم‬ ‫كما‬html‫ال‬ ‫ضمن‬ ‫كثيرة‬ ‫تعديالت‬ ‫اضافة‬ ‫إلى‬ ‫بحاجة‬ ‫نحن‬ ‫االعتيادية‬css‫مثل‬padding‫و‬margins‫وغيرها‬
!‫المكتبة‬ ‫هذه‬ ‫في‬ ‫جاهزة‬ ‫ألنها‬ ‫التعديالت‬ ‫هذه‬ ‫لمثل‬ ‫بحاجة‬ ‫لسنا‬ ‫نحن‬ ‫البوتستراب‬ ‫في‬
‫بوضع‬ ‫قم‬ ‫جدول‬ ‫ببناء‬ ‫تقوم‬ ‫عندما‬ ‫فقط‬class‫باسم‬.table: ‫يلي‬ ‫كما‬
: ‫يلي‬ ‫كما‬ ‫مظللة‬ ‫جداول‬ ‫اضافة‬ ‫بإمكانك‬
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890 </address>
<address> <strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a> </address>
<table class="table"> ... </table>
<table class="table table-striped"> ... </table>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫يلي‬ ‫كما‬ ‫للجداول‬ ‫حدود‬ ‫إضافة‬ ‫بإمكاننا‬ ‫كما‬:
:‫الجدول‬ ‫ألسطر‬ ‫معينة‬ ‫حاالت‬
‫الجدول‬ ‫لسطور‬ ‫الوانا‬ ‫لتعطي‬ ‫معينة‬ ‫صفات‬ ‫استخدام‬ ‫يمكنك‬:‫يلي‬ ‫كما‬ ‫محتواه‬ ‫بحسب‬
‫الصنف‬ ‫اسم‬‫الوظيفة‬
.active‫عليه‬ ‫النقر‬ ‫حال‬ ‫في‬ ‫الجدول‬ ‫ضمن‬ ‫معين‬ ‫سطر‬ ‫لتحديد‬
.success)‫أخضر‬ ‫(لون‬ ‫السطر‬ ‫لحالة‬ ‫إيجابية‬ ‫حالة‬ ‫إلعطاء‬
.info‫ما‬ ‫معلومة‬ ‫إعطاء‬‫األزرق‬ ‫باللون‬ ‫تكون‬ ‫وعادة‬
.warning‫البرتقالي‬ ‫باللون‬ ‫عادة‬ ‫ويكون‬ ‫تحذير‬
.danger‫األحمر‬ ‫باللون‬ ‫عادة‬ ‫ويكون‬ ‫خطر‬
:‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ ‫الجدول‬ ‫هذا‬ ‫توضيح‬ ‫ويمكن‬
<table class="table table-bordered"> ... </table>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫واألسطر‬ ‫الخاليا‬ ‫على‬ ‫األصناف‬ ‫هذه‬ ‫وتطبق‬
:‫الحجم‬ ‫في‬ ‫للتغير‬ ‫القابلة‬ ‫الغير‬ ‫الجداول‬
‫عليها‬ ‫ويطلق‬Responsive tables. ‫الجوال‬ ‫شاشات‬ ‫في‬ ‫الحال‬ ‫هو‬ ‫كما‬ ‫الحجم‬ ‫في‬ ‫للمتصفح‬ ‫التصغير‬ ‫عند‬ ‫ابعادها‬ ‫التتغير‬ ‫التي‬ ‫الجداول‬ ‫وهي‬‫عرض‬ ‫عند‬ ‫أي‬
‫ظهور‬ ‫مع‬ ‫ابعادها‬ ‫على‬ ‫الحفاظ‬ ‫يتم‬ ‫صغيرة‬ ‫مستعرض‬ ‫شاشة‬ ‫على‬ ‫الجداول‬ ‫هذه‬scroll bar:‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ ‫الجدول‬ ‫كامل‬ ‫لتصفح‬

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
( ‫النماذج‬Forms)
‫وه‬ ‫النماذج‬ ‫ماهي‬ ‫يعلم‬ ‫كلنا‬‫و‬ ‫نصية‬ ‫حقول‬ ‫من‬ ‫مايشمل‬ ‫بالطبع‬ ‫ي‬radio box‫و‬checkbox‫قامت‬ ‫وكيف‬ ‫العناصر‬ ‫هذه‬ ‫معا‬ ‫سنستعرض‬ . ‫العناصر‬ ‫من‬ ‫وغيرها‬
‫بإعاد‬ ‫البوتستراب‬‫ة‬‫بشكل‬ ‫لتبدو‬ ‫تنسيقها‬‫أجمل‬.‫المتصفحات‬ ‫كافة‬ ‫مع‬ ‫ومتكاملة‬ ‫وافضل‬
:‫العناصر‬ ‫هذه‬ ‫لتوضيح‬ ‫يكفي‬ ‫التالي‬ ‫والمثال‬
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter
email">
</div>
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
: ‫خاصة‬ ‫حاالت‬
0-Inline form
‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ ‫واحد‬ ‫سطر‬ ‫ضمن‬ ‫الفورم‬ ‫عناصر‬ ‫وضع‬ ‫أجل‬ ‫من‬ ‫التنسيق‬ ‫هذا‬ ‫يعد‬:
<form class="form-inline" role="form">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter
email">
</div>
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2"
</div>
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
0-Horizontal form
‫ال‬ ‫لعناصر‬ ‫الصعبة‬ ‫التنسيق‬ ‫عمليات‬ ‫عن‬ ‫نفسك‬ ‫لتبعد‬ ‫سهال‬ ‫تنفيذه‬ ‫اصبح‬ ‫للفورم‬ ‫المعروف‬ ‫النموذج‬form
<form class="form-horizontal" role="form">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3"
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
3-Checkboxes and radios
: ‫واحد‬ ‫سطر‬ ‫على‬ ‫بوكس‬ ‫راديو‬ ‫او‬ ‫اختيار‬ ‫حقول‬
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
</label>
</label>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
4-: ‫اإلختيار‬ ‫قوائم‬
‫يلي‬ ‫كما‬ ‫البوتستراب‬ ‫في‬ ‫خاص‬ ‫تنسيق‬ ‫اإلختيار‬ ‫لقوائم‬ ‫أيضا‬
‫خيار‬ ‫إن‬multiple‫الثاني‬ ‫القائمة‬ ‫شكل‬ ‫في‬ ‫كما‬ ‫تظهر‬ ‫يجعلها‬
5-: ‫فعالة‬ ‫الغير‬ ‫العناصر‬
‫للمستخدم‬ ‫فعالة‬ ‫غير‬ ‫وهي‬ ‫تظهر‬ ‫العناصر‬ ‫هذه‬‫استخدامها‬ ‫اليمكن‬ ‫أي‬
<select class="form-control">
<option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option>
</select>
<select multiple class="form-control">
<option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option>
</select>
<form role="form">
<fieldset disabled>
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
6-‫حاالت‬:‫التصحيح‬
‫مختلفة‬ ‫بألوان‬ ‫النصية‬ ‫العناصر‬ ‫ظهور‬ ‫وهي‬‫(خطأ‬ ‫مثل‬ ‫معينة‬ ‫حاالت‬ ‫عن‬ ‫تعبر‬–‫صحيحة‬ ‫قيمة‬–) ‫انذار‬
‫بإضافة‬ ‫وذلك‬classes: ‫مثل‬ ‫معينة‬. has-success . has-warning........
: ‫الفورم‬ ‫أحجام‬
: ‫أصناف‬ ‫ثالثة‬ ‫على‬ ‫تقسيمها‬ ‫وتم‬ ‫بتحديدها‬ ‫البوتستراب‬ ‫مكتبة‬ ‫قامت‬ ‫قياسات‬ ‫خالل‬ ‫من‬ ‫الفورم‬ ‫عنصر‬ ‫بحجم‬ ‫التحكم‬ ‫يمكننا‬
0-input-lg.‫النص‬ ‫لمربع‬ ‫كبير‬ ‫حجم‬ :
0-input-md)‫(االفتراضي‬ ‫متوسط‬ ‫حجم‬ :
3-input-sm‫صغير‬ ‫حجم‬ :
‫يل‬ ‫كما‬ ‫الفورم‬ ‫في‬ ‫القيم‬ ‫هذه‬ ‫تحديد‬ ‫يتم‬: ‫ي‬
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
: ‫مثال‬
: ‫البوتستراب‬ ‫ضمن‬ ‫المعرفة‬ ‫الوهمية‬ ‫الشبكة‬ ‫ضمن‬ ‫النص‬ ‫مربعات‬ ‫عناصر‬ ‫ترتيب‬ ‫يمكننا‬ ‫ذلك‬ ‫على‬ ‫كمثال‬
: ‫المساعدة‬ ‫نموذج‬
( ‫النص‬ ‫مربعات‬ ‫تحت‬ ‫عادة‬ ‫تكون‬ ‫والتي‬ ‫المساعدة‬ ‫بعض‬ ‫بتعبئتها‬ ‫المستخدم‬ ‫يقوم‬ ‫التي‬ ‫النماذج‬ ‫بعض‬ ‫في‬ ‫مانرى‬ ‫كثيرا‬text box‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ )
:
‫ال‬ ‫خالل‬ ‫من‬ ‫بسهولة‬ ‫النص‬ ‫هذا‬ ‫البوتستراب‬ ‫توفر‬class="help-block"
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
</div>
</div>
</div>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
:‫األزرار‬
‫جذ‬ ‫بشكل‬ ‫لالزرار‬ ‫جاهزة‬ ‫تصاميما‬ ‫البوتستراب‬ ‫مكاتب‬ ‫توفر‬‫الشكل‬ ‫في‬ ‫كما‬ ‫وانيق‬ ‫اب‬: ‫التالي‬
‫على‬ ‫المكتبة‬ ‫تشتمل‬ :‫األزرار‬ ‫أحجام‬‫أربعة‬: ‫يلي‬ ‫كما‬ ‫لألزرار‬ ‫قياسية‬ ‫احجام‬
0-: ‫كبير‬lg-.btn
0-: ‫متوسط‬sm-.btn
3-:‫صغير‬xs-.btn
4-‫افتراضي‬

<button type="button" class="btn btn-default">Default</button>

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

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
: ‫الكود‬ ‫بوضع‬ ‫نقوم‬ ‫للزر‬ ‫اختياري‬ ‫حجم‬ ‫إعطاء‬ ‫اجل‬ ‫من‬
:‫الصور‬
‫كبيرة‬ ‫عرض‬ ‫شاشة‬ ‫حتى‬ ‫موبايل‬ ‫من‬ ‫الشاشات‬ ‫وقياسات‬ ‫المتصفحات‬ ‫كافة‬ ‫مع‬ ‫التكامل‬ ‫أيضا‬ ‫يهدف‬ ‫البوتسراب‬ ‫في‬ ‫الصور‬ ‫مع‬ ‫التعامل‬ ‫ان‬
‫األمر‬ ‫باستخدام‬ ‫نقوم‬ ‫الشاشة‬ ‫حجم‬ ‫بحسب‬ ‫للصورة‬ ‫التلقائي‬ ‫القياس‬ ‫ميزة‬ ‫تفعيل‬ ‫أجل‬ ‫من‬img-responsive:
‫التالي‬ ‫الشكل‬ ‫في‬ ‫كما‬ ‫الزوايا‬ ‫منحنية‬ ‫مستطيلة‬ ‫او‬ ‫مستطيلة‬ ‫او‬ ‫دائرية‬ ‫صورة‬ ‫نجعلها‬ ‫ان‬ ‫يمكن‬ ‫حيث‬ ‫الصور‬ ‫اطار‬ ‫بشكل‬ ‫التحكم‬ ‫يمكننا‬ ‫انه‬ ‫كما‬:
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
‫البوتستراب‬ ‫في‬ ‫مساعدة‬ ‫أصناف‬
Helper Classes
: ‫المساعدة‬ ‫الصفوف‬ ‫هذه‬ ‫اهم‬ ‫من‬
0-: ‫المالحظات‬ ‫شريط‬
‫الشرطة‬ ‫الوان‬ ‫عدة‬ ‫هناك‬:‫األشرطة‬ ‫هذه‬ ‫تفاصيل‬ ‫إليك‬ ، ‫الصفحة‬ ‫على‬ ‫ما‬ ‫بتفاعل‬ ‫قيامه‬ ‫اثناء‬ ‫للمستخدم‬ ‫تظهر‬ ‫المالحظات‬
0-‫االزاحة‬( ‫السريعة‬Quick Floats)
‫يساره‬ ‫او‬ ‫المحتوى‬ ‫يمين‬ ‫إلى‬ ‫البلوك‬ ‫نقل‬ ‫أجل‬ ‫من‬ ‫وتستخدم‬
‫الرئيسية‬ ‫القائمة‬ ‫في‬ ‫الميزة‬ ‫هذه‬ ‫التستخدم‬ : ‫مالحظة‬bar-nav‫التالية‬ ‫األصناف‬ ‫تستخدم‬ ‫وانما‬right-.navbarorleft-.navbar
3-:‫العناصر‬ ‫واخفاء‬ ‫إظهار‬
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left { float: left !important; }
.pull-right { float: right !important; }
// Usage as mixins
.element { .pull-left(); }
.another-element { .pull-right(); }
<div class="show">...</div>
<div class="hidden">...</div>
.show { display: block !important; }
.hidden { display: none !important; visibility: hidden !important; }
.invisible { visibility: hidden; }

.‫م‬
1'st Bootstrap
fadinoh@hotmail.com
..‫السكريبتات‬ ‫استخدام‬ ‫في‬ ‫البوتستراب‬ ‫قوة‬ ‫عن‬ ‫الثاني‬ ‫الجزء‬ ‫في‬ ‫وسنتحدث‬ ‫لألمثلة‬ ‫كامل‬ ‫تحضير‬ ‫يتم‬ ‫حتى‬ ً‫ا‬‫قريب‬ ‫الثاني‬ ‫الجزء‬ ‫نشر‬ ‫سيتم‬JQuery
‫استفسار‬ ‫او‬ ‫سؤال‬ ‫ألي‬fadinoh@hotmail.com

Bootstrap-1

More Related Content

Viewers also liked (8)

Similar to Bootstrap-1 (20)

Bootstrap-1