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‬م‪.‬‬

‫وفي ‪ 0200-20-01‬قامت تويتر باصدار النسخة األولى لهذه المكتبة للمطورين والمصممين والجميل أنه تم اإلعالن عنها بتغريدة لمطور البوتستراب نفسه‪.‬‬

‫اآلن يوجد أكثر من عشرين اصدار لهذه المكتبة‪ ,‬وتمت إعادة كتابتها من البداية في اإلصدارين ‪ 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

: ‫ موزعة بالشكل التالي‬Javascript ‫ و ال‬css ‫تتألف هذه المكتبة من مجموعة الملفات منها ال‬

: ‫تعليمات تضمين المكتبات ضمن الصفحة التي تريد استخدام مكتبة البوتستراب فيها‬

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src=" /bootstrap.min.js"></script>
 1'st Bootstrap
‫ فادي نوح‬.‫ م‬: ‫إعداد‬

.‫م‬fadinoh@hotmail.com

‫ابدأ بقالبك البسيط‬

‫ الخاصة بالبوتستراب وبالتأكيد كأول كود تقوم به‬JS ‫ ويوجد فيه استدعاء لمكتبة البوتستراب الخاصة بالستايل أيضا ً مكتبة الـ‬HTML ‫ابدأ بقالبك البسيط الـ‬
): ”‫يجب أن تقوم بطباعة “أهالً بالعالم‬

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

.‫طبعا ً هنا يجب حفظ هذا الملف بنفس المجلد الذي توجد فيه ملفات المكتبة التي سبق تحميلها‬
 ‫‪1'st Bootstrap‬‬
‫إعداد ‪ :‬م‪ .‬فادي نوح‬

‫‪fadinoh@hotmail.com‬م‪.‬‬

‫أمثلة عن البوتستراب‬
‫على هذا المثال البسيط الذي كتبته سابقا ً ستتمكن من انشاء أي موقع تريد وإليك بعض األمثلة عن مواقع بسيطة تم انشاءها بكود البوتستراب البسيط هذا‬

‫المثال التالي يوضح كيفية استخدام احد عناصر البوتستراب وهي القائمة الرئيسية (الحظ كيف يتم تغير شكلها بمجرد تصغير شاشة المستعرض أي التصفح‬
‫على شاشة الجوال على سبيل المثال)‬

‫سنعرض هذا المثال بشيء من التفصيل ‪...‬‬

‫كما نالحظ فإن هذه الصفحة تحتوي على قائمة رئيسية مع عنوان الموقع وعنوان محتوى في الصفحة ونص عشوائي‪...‬‬
 1'st Bootstrap
‫ فادي نوح‬.‫ م‬: ‫إعداد‬

.‫م‬fadinoh@hotmail.com

:‫ان الكود الخاص بهذه الصفحة موضح كما في الشكل‬

<!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>
<span class="icon-bar"></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><!--/.nav-collapse -->
</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><!-- /.container -->

<!—‫استدعاء ملفات الجافا سكريبت الخاصة بالمكتبة‬

================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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>

‫) هذا المثال هو لتوضيح قوة البوتستراب‬classes( ‫لن نهتم حاليا بالتفاصيل الموجودة داخل هذا الكود وخصوصا ً اسما الصفوف‬

‫ان نفس الصفحة السابقة وعن عرضها على شاشة الجوال على سبيل المثال ( قم بتصغير شاشة المتصفح لديك بعد تشغيل الكود السابق) لتحصل على الشكل‬
) ‫التالي (الحظ كيف تحولت القائمة الرئيسية لتالئم عرض شاشة الجوال مثال‬
 ‫‪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‬في تقنية وملفات البوتستراب لنرى معا القوة والفعالية والسرعة في كتابة الكود الخاص بستايل موقعك‪.‬‬

‫هناك في البداية بعض أمور التهيئة يجب ان تقوم بها قبل ان تكتب أي كود في صفحتك وهي مهمة جدا جدا وخاصة ضمن موضوع (التالؤم مع المتصفحات)‪:‬‬

‫‪ : HTML5 doctype -0‬وهي اعتماد لغة ال ‪ HTML 5‬ضمن صفحتك وهو امر مهم اليأخده متصفح ‪ Internet Explorer‬بعين االعتبار لذلك وجب‬
‫تنفيذه‬

‫>‪<!DOCTYPE html‬‬
‫>"‪<html lang="en‬‬
‫‪...‬‬

‫>‪</html‬‬

‫‪ Mobile first -0‬الجهاز اللوحي او الموبايل هو األهم‪ :‬في اصدار بوتستراب ‪ 3‬تمت أضافة ستايالت خاصة من اجل عرض الموقع على أجهزة‬
‫الموبايل بشكل جيد وفعال على شاشة الجوال ويستطيع المستخدم من عمل ‪Zoom‬لتكبير محتوى الموقع دون ان يؤثر على قالب الصفحة‪ .‬ومن اجل‬
‫تفعيل هذه الميزة الرائعة يجب ان نضع األمر التالي ضمن ال ‪ Head‬الخاص بصفحتك‪:‬‬

‫>"‪<meta name="viewport" content="width=device-width, initial-scale=1‬‬

‫اما إذا أردنا ان نلغي هذه الميزة ونجبر الشخص على عدم القيام ب ‪ Zoom‬ويستطيع فقط عمل ‪ Scroll‬كما هو الحال في ‪Facebook mobile‬‬
‫دون تكبير الصفحة (حيث ان الموقع على شاشة الجوال سوف يتالءم افتراضيا ً معها) نقوم بإضافة األمر ‪ user-scalable=no‬إلى الوسم‬
‫السابق كما يلي‪:‬‬

‫>"‪<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no‬‬

‫‪ Normalize.css -3‬وهو من أهم الملفات التي يجب تضمينها ضمن صفحات موقعك وذلك ألنه يحتوي على اهم أوامر التهيئة الخاصة بوسوم ‪HTML‬‬
‫على سبيل المثال ان الوسم >‪ <body‬بحاجة إلى تهئية افتراضية هامة وهي ‪:‬‬

‫{ ‪.body‬‬
‫;‪margin:0‬‬
‫;‪padding:0‬‬
‫}‬

‫وكذلك جميع وسوم لغة ال‪ HTML‬بحاجة إلى هذه التهيئة ألن ال ‪ padding‬االفتراضي في متصفح ‪ firefox‬يختلف عنه في متصفح ‪ chrome‬لذلك فإن‬
‫تهيئته بالقيمة صفر هو من افضل الحلول‬

‫يمكنك مراجعة محتوى ‪ normalize.css‬من اجل فهم اكبر للفكرة ويمكنك تحميل هذا الملف من خالل الرابط انقر هنا‬

‫‪ : Containers -4‬محتوى الصفحة الرئيسي وضمنه يوجد ما يسمى نظام الشبكة الوهمية )‪ ، (grid system‬إن هذا المحتوى يحمل صفة‬
‫‪ .container‬والتي تحتوي على صفات مايسمى ‪ media‬التي من خاللها يتم تنسيق محتوى الموقع ضمن عرض معين للشاشة على سبيل المثال‬
‫ان يعرض القائمة الرئيسية بشكل افقي عند عرض شاشة ‪ 022‬بيكسل وان يقوم بعرضها بشكل عمودي عند عرض شاشة ‪ 422‬بيكسل ‪ .‬كل هذه‬
‫األوامر يتم التحكم بها من خالل التحكم بعرض هذا العنصر البسيط ‪ .container‬وسيتم الغوص في هذا الموضوع الحقا‪.‬‬

‫>‪<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‬معرفة مسبقا‬
‫ضمن المكتبة‪.‬‬

‫‪0‬‬ ‫‪0‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫‪7‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫‪02‬‬ ‫‪00‬‬ ‫‪00‬‬
‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬
‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬ ‫‪-‬‬
‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬

‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬

‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬ ‫‪.‬‬

‫‪0‬‬ ‫‪0‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫‪7‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫‪02‬‬ ‫‪00‬‬ ‫‪00‬‬

‫إن مبدأ عمل هذه الشبكة في البوتستراب موضح كما يلي‪:‬‬

‫األسطر يجب إن توضع ضمن بلوك (‪ )div‬يدعى ‪( .container‬بقياس ثابت يتوسط الشاشة) او ضمن بلوك يدعى ‪( .container-fluid‬قياس‬ ‫‪-‬‬
‫بحجم الشاشة) وذلك من اجل تأمين البلوكات وتحديد قياساتها بشكل دقيق‬
‫نستخدم هذه األسطر من اجل إنشاء شبكة كاملة على مستوى الصفحة‬ ‫‪-‬‬
‫من خالل األسطر واألعمدة نحصل على مجموعة من الخاليا وضمن هذه الخاليا نضع محتويات الصفحة الخاصة بنا بحيث ينشأ لدينا (بلوكات)‬ ‫‪-‬‬
‫إن كل سطر في هذه الصفحة يعرف كـ ‪( .row‬أي ان اسم ال‪ class‬الخاص بالسطر هو ‪) .row‬‬ ‫‪-‬‬
‫يتم تحديد مساحة البلوك من خالل تحديد عدد الخاليا المحجوزة مثال (‪ )col-md-4‬سيحجز أربع خاليا من اصل ‪ 00‬أي ‪ %3333‬من عرض الصفحة‬ ‫‪-‬‬

‫التالؤم مع الشاشة‪Media Queries :‬‬

‫تستخدم األوامر التالية كشروط للتحكم بشكل الصفحة في حال استعراض الموقع على شاشات مختلفة‬

‫‪ (tablets, 768px and up) */‬أجهزة لوحية صغيرة *‪*/ /‬‬ ‫‪sdsdsdsdsdsdsd‬‬
‫} ‪@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‬بين الشروط‪ .‬ففي مثالنا بإمكاننا إضافة شرط آخر من اجل التقييد األكبر لحجم الصفحة‬
‫وتالؤمها مع المحتوى المعروض ليصبح بالشكل‪:‬‬

‫‪@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‬‬ ‫} ‪{ ...‬‬

‫يوجد اربع حاالت يمكننا تصنيف هذه الشبكة لتالئم العمل على مختلف الشاشات تم تقسيمها كما يلي ‪:‬‬

‫األجهزة الكبيرة (‪)Desktop‬‬ ‫األجهزة المتوسطة (‪)Desktop‬‬ ‫األجهزة الصغيرة (تابلت)‬ ‫األجهزة الصغيرة جدا‬
‫( ‪) ≥1200px‬‬ ‫( ‪) ≥992px‬‬ ‫(‪) ≥768px‬‬ ‫( ‪) >768px‬‬

‫‪1170px‬‬ ‫‪970px‬‬ ‫‪750px‬‬ ‫اتوماتيكي‬ ‫عرض المحتوى‬

‫‪.col-lg-‬‬ ‫‪.col-md-‬‬ ‫‪.col-sm-‬‬ ‫‪.col-xs-‬‬ ‫اسم ال‪class‬‬

‫أذا اردت ان اليحدث هذا التسلسل (أي عند فتح الصفحة على الجوال التريد ان تترتب الخاليا تحت بعضها البعض بل تحافظ على شكلها الموجود في الشاشة‬
‫الكبيرة نقوم باستخدام ااألمر *‪ .col-xs-* .col-md-‬كما يلي‬

‫>"‪<div class="row‬‬
‫>‪<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div‬‬
‫>‪<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div‬‬
‫>‪</div‬‬

‫>‪<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --‬‬
‫>‪ --‬االعمدة تبدأ بحجم ‪ %05‬على شاشة الجوال و‪ %3333‬على الشاشة العادية—!<‬

‫>"‪<div class="row‬‬
‫>‪<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div‬‬
‫>‪<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div‬‬
‫>‪<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div‬‬
‫>‪</div‬‬

‫>‪<!-- Columns are always 50% wide, on mobile and desktop --‬‬
‫>"‪<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‬م‪.‬‬

‫اذا اردنا إضافة الديناميكية للعمل على التابلت أيضا ً يصبح األمر بالشكل التالي ‪:‬‬

‫>"‪<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 class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div‬‬
‫>‪</div‬‬
‫>"‪<div class="row‬‬
‫>‪<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div‬‬
‫>‪<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div‬‬
‫>‪<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div‬‬
‫>‪</div‬‬

‫إن استخدام مجموعة من *‪ .col-md-‬يمكنك من بناء شبكة بإمكانها ان تتالءم مع األجهزة الصغيرة (تابلت او موبايل ) بشكل طوالني وال تتوزع بشكل‬
‫عرضاني (أي تصبح الخاليا تحت بعضها البعض ) اما على أجهزة الكمبيوتر المكتبية فتصبح (عرضية) ترتيب خاليا بشكل افقي‬

‫المثال التالي يوضح هذه الفكرة‪:‬‬

‫تالحظ ترتيب الخاليا بشكل عرضاني على شاشة المتصفح للكمبيوتر الشخصي‪ ..‬وعند تصغيرها لتصبح بعرض شاشة الجوال نالحظ أن هذه الخاليا قد ترتبت‬
‫تحت بعضها البعض كما في الشكل التالي ‪:‬‬
 1'st Bootstrap
‫ فادي نوح‬.‫ م‬: ‫إعداد‬

.‫م‬fadinoh@hotmail.com

‫إن الكود الخاص بهذه الصفوف هو بالشكل التالي‬

.‫ ضمن الصفحة‬Bootstrap ‫** التنس ضم مكتبات ال‬

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
 1'st Bootstrap
‫ فادي نوح‬.‫ م‬: ‫إعداد‬

.‫م‬fadinoh@hotmail.com

)‫*** قم بتجربة هذه األكواد بنفسك لتالحظ الفرق في النتائج (وقم بتكبير وتصغير حجم المتصفح لترى الفرق‬

‫قد توجهنا مشكلة إضافية وقد تواجه العديد من المصممين وهي ان نحصل على خلية أطول من الخاليا المجاورة لها وخاصة اذا اختلف حجم المحتوى‬

:‫ كما في الشكل التالي‬.clearfix ‫نقوم بإضافة األمر‬

<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="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>

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

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

: ‫والناتج هو‬

: ‫ قابلة للتطبيق على سبيل المثال‬.col-md-offset-* ‫كما ان عمليات االزاحات في الخاليا نستخدم‬

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
 1'st Bootstrap
‫ فادي نوح‬.‫ م‬: ‫إعداد‬

.‫م‬fadinoh@hotmail.com

: ‫كما يمكنك استخدام مجموعة من الخاليا ضمن الخلية الواحدة كما يلي‬

<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>

: ‫مالحظة‬

.‫ موضوع ضمنيا ضمن مكتبة البوتستراب‬Padding ‫جميع هذه الخاليا تحتوي على‬
 ‫‪1'st Bootstrap‬‬
‫إعداد ‪ :‬م‪ .‬فادي نوح‬

‫‪fadinoh@hotmail.com‬م‪.‬‬

‫أوامر ‪ Bootstrap‬وتعديالتها على لغة ‪HTML‬‬

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

‫العناوين (‪: )Headings‬‬

‫ان األوامر >‪ <h1‬إلى >‪ <h6‬تم تحسينها في البوتستراب ليتم استخدامها بشكل مباشر كما يلي‬

‫‪<h1>h1.‬‬ ‫‪Bootstrap‬‬ ‫>‪heading</h1‬‬

‫‪<h2>h2.‬‬ ‫‪Bootstrap‬‬ ‫>‪heading</h2‬‬
‫‪<h3>h3.‬‬ ‫‪Bootstrap‬‬ ‫>‪heading</h3‬‬
‫‪<h4>h4.‬‬ ‫‪Bootstrap‬‬ ‫>‪heading</h4‬‬
‫‪<h5>h5.‬‬ ‫‪Bootstrap‬‬ ‫>‪heading</h5‬‬
‫‪<h6>h6.‬‬ ‫‪Bootstrap‬‬ ‫>‪heading</h6‬‬

‫ليكون الشكل التالي ‪:‬‬

‫محتوى الموقع ( ‪:) Body copy‬‬

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

.‫م‬fadinoh@hotmail.com

<p> ‫< و‬body> ‫ وهي مطبقة على وسم‬03405 ‫ بمقدار‬line-height ‫ مع‬14px : ‫ هي افتراضيا‬font-size ‫ان حجم الخط االفتراضي في بوتستراب‬

. 10px ‫ مقداره‬line-height ‫ب‬

<p> ‫ إلى الوسم‬.lead ‫( يتم بإضافة‬lead body) ‫إن إضافة النص الواضح‬

: ‫مؤثرات النص‬

:‫ وليس هناك عليها أي تعديل‬html‫هي نفسها في ال‬

<small> …33 </small> : Small text -0

<strong> …… </strong> :Bold -0
<em>…33</em> : Italics -3

: ‫تموضع النص‬

)... - ‫وهي تعبر عن مكان وجود النص في البلوك (يمين – يسار‬

<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‬م‪.‬‬

‫>‪<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‬‬

‫قم بتجربة الكود السابق لتحصل على النتيجة بشكل أوضح‪.‬‬

‫الجدوال ‪:‬‬

‫كما نعلم وعند بناء الجدول في لغة ال‪ html‬االعتيادية نحن بحاجة إلى اضافة تعديالت كثيرة ضمن ال ‪ css‬مثل ‪padding‬و ‪ margins‬وغيرها‬

‫في البوتستراب نحن لسنا بحاجة لمثل هذه التعديالت ألنها جاهزة في هذه المكتبة!‬

‫فقط عندما تقوم ببناء جدول قم بوضع ‪ class‬باسم ‪ .table‬كما يلي ‪:‬‬

‫>‪<table class="table"> ... </table‬‬

‫بإمكانك اضافة جداول مظللة كما يلي ‪:‬‬

‫>‪<table class="table table-striped"> ... </table‬‬

 ‫‪1'st Bootstrap‬‬
‫إعداد ‪ :‬م‪ .‬فادي نوح‬

‫‪fadinoh@hotmail.com‬م‪.‬‬

‫كما بإمكاننا إضافة حدود للجداول كما يلي ‪:‬‬

‫>‪<table class="table table-bordered"> ... </table‬‬

‫حاالت معينة ألسطر الجدول‪:‬‬

‫يمكنك استخدام صفات معينة لتعطي الوانا لسطور الجدول بحسب محتواه كما يلي‪:‬‬

‫الوظيفة‬ ‫اسم الصنف‬

‫لتحديد سطر معين ضمن الجدول في حال النقر عليه‬ ‫‪.active‬‬
‫إلعطاء حالة إيجابية لحالة السطر (لون أخضر)‬ ‫‪.success‬‬
‫إعطاء معلومة ما وعادة تكون باللون األزرق‬ ‫‪.info‬‬
‫تحذير ويكون عادة باللون البرتقالي‬ ‫‪.warning‬‬
‫خطر ويكون عادة باللون األحمر‬ ‫‪.danger‬‬

‫ويمكن توضيح هذا الجدول كما في الشكل التالي‪:‬‬

 ‫‪1'st Bootstrap‬‬
‫إعداد ‪ :‬م‪ .‬فادي نوح‬

‫‪fadinoh@hotmail.com‬م‪.‬‬

‫وتطبق هذه األصناف على الخاليا واألسطر‬

‫>‪<!-- On rows --‬‬

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

‫>‪<!-- On cells (`td` or `th`) --‬‬

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

‫الجداول الغير القابلة للتغير في الحجم‪:‬‬

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

.‫م‬fadinoh@hotmail.com

<div class="table-responsive">
<table class="table">
...
</table>
</div>

)Forms( ‫النماذج‬

‫ سنستعرض معا هذه العناصر وكيف قامت‬. ‫ وغيرها من العناصر‬checkbox ‫ و‬radio box‫كلنا يعلم ماهي النماذج وهي بالطبع مايشمل من حقول نصية و‬
.‫البوتستراب بإعادة تنسيقها لتبدو بشكل أجمل وافضل ومتكاملة مع كافة المتصفحات‬

:‫والمثال التالي يكفي لتوضيح هذه العناصر‬

<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>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group">
<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

: ‫حاالت خاصة‬

Inline form -0
: ‫يعد هذا التنسيق من أجل وضع عناصر الفورم ضمن سطر واحد كما في الشكل التالي‬

<form class="form-inline" role="form">

<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter
email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2"
placeholder="Password">
</div>
<div class="checkbox">
<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

Horizontal form -0
form ‫النموذج المعروف للفورم اصبح تنفيذه سهال لتبعد نفسك عن عمليات التنسيق الصعبة لعناصر ال‬

<form class="form-horizontal" role="form">

<div class="form-group">
<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>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3"
placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<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

Checkboxes and radios -3

<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;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&mdash;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 class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
 1'st Bootstrap
‫ فادي نوح‬.‫ م‬: ‫إعداد‬

.‫م‬fadinoh@hotmail.com

: ‫ قوائم اإلختيار‬-4
‫أيضا لقوائم اإلختيار تنسيق خاص في البوتستراب كما يلي‬

<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>

‫يجعلها تظهر كما في شكل القائمة الثاني‬multiple ‫إن خيار‬

: ‫ العناصر الغير فعالة‬-5

‫هذه العناصر تظهر وهي غير فعالة للمستخدم أي اليمكن استخدامها‬

<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<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
) ‫وهي ظهور العناصر النصية بألوان مختلفة تعبر عن حاالت معينة مثل (خطأ – قيمة صحيحة – انذار‬
........ . has-success . has-warning : ‫ معينة مثل‬classes ‫وذلك بإضافة‬

<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-lg -0
)‫ حجم متوسط (االفتراضي‬: input-md -0
‫ حجم صغير‬:input-sm -3

: ‫يتم تحديد هذه القيم في الفورم كما يلي‬

<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

: ‫مثال‬

: ‫كمثال على ذلك يمكننا ترتيب عناصر مربعات النص ضمن الشبكة الوهمية المعرفة ضمن البوتستراب‬

<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>

: ‫نموذج المساعدة‬

‫) كما في الشكل التالي‬text box( ‫كثيرا مانرى في بعض النماذج التي يقوم المستخدم بتعبئتها بعض المساعدة والتي تكون عادة تحت مربعات النص‬
:

‫توفر البوتستراب هذا النص بسهولة من خالل ال‬class="help-block"

<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

:‫األزرار‬

: ‫توفر مكاتب البوتستراب تصاميما جاهزة لالزرار بشكل جذاب وانيق كما في الشكل التالي‬

<!-- Standard button -->

<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

: ‫ تشتمل المكتبة على أربعة احجام قياسية لألزرار كما يلي‬:‫أحجام األزرار‬

.btn-lg : ‫ كبير‬-0
.btn-sm: ‫ متوسط‬-0
.btn-xs:‫ صغير‬-3
‫ افتراضي‬-4

<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‬م‪.‬‬

‫من اجل إعطاء حجم اختياري للزر نقوم بوضع الكود ‪:‬‬

‫>‪<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button‬‬

‫الصور‪:‬‬
‫ان التعامل مع الصور في البوتسراب يهدف أيضا التكامل مع كافة المتصفحات وقياسات الشاشات من موبايل حتى شاشة عرض كبيرة‬

‫من أجل تفعيل ميزة القياس التلقائي للصورة بحسب حجم الشاشة نقوم باستخدام األمر ‪: img-responsive‬‬

‫>"‪<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
:‫ إليك تفاصيل هذه األشرطة‬، ‫هناك عدة الوان الشرطة المالحظات تظهر للمستخدم اثناء قيامه بتفاعل ما على الصفحة‬

<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>

)Quick Floats( ‫ االزاحة السريعة‬-0

‫وتستخدم من أجل نقل البلوك إلى يمين المحتوى او يساره‬

<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(); }

.navbar-left or .navbar-right ‫ وانما تستخدم األصناف التالية‬nav-bar ‫ التستخدم هذه الميزة في القائمة الرئيسية‬: ‫مالحظة‬

:‫ إظهار واخفاء العناصر‬-3

<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‬‬