More Related Content
Similar to Bootstrap-1 (20)
Bootstrap-1
- 2. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
مقدمة
تعرفتمنذفترةعلىمكتبةTwitter Bootstrapلبناءواجهات،االستخداموكانالحبمنالصفحة،األولىفقدوجدتفيهامنالميزاتمايساعدنيعلى
إنجازاألعمالبشكلأسرعوبمعاييرعاليةوبقلقأقلحيالدعمالمستعرضات.
فأوليجب ماصفحات إلى الموقع تقطيع يسمى مما االنتهاء بعد المحترف المصمم به يقوم انHTMLالمتصفحات أنواع كافة على بتجريبه يقوم ان هو
تجر بعد انه المؤكد من وطبعا ... العرض في مشاكل أي دون موقعه لمحتوى سليم وصول أكبر ليضمنبالظهور المشاكل ستبدأ متصفحات عدة على الموقع يب
. جديد من الموقع تقطيع إعادة إلى أحيانا تضطر وقد بموقعك الخاص الكود في كبيرة فوضى يسبب ما وهذا
فريق قام التي التقنية هذه عن متقدما تفصيليا ًاشرح أيديكم بين أضعTwitterمواجه بعد الشهير االجتماعي التواصل موقعالمزمنة المشاكل من العديد ة
ال مصمم لها يتعرض التيHTMLأثناءوالهاتف اللوحية كاألجهزة العرض اجهزة من وقياسات احجام وعدة متصفحات عدة على المنتج للموقع مقارنته
الكمبيوتر اجهزة وحتى المحمولبأنواعها..
لتشتمل والمكتبة البنية هذه بتطوير تويتر مبرمجي فريق قامعلى ايضا:
-النصوص ومربعات (كاألزرار الجاهزة العناصر بعضtextboxأخرى وعناصر)..
-مؤثرات من مجموعةيسمى مابمكتبةJQueryهللا شاء ان الكتاب هذا في بالتفصيل عرضها سيتم والتي
تاريخالبوتستراب
، ""التمهيد بالعربية الكلمة معنىالمصدر المفتوحة المشاريع أشهر من انشاؤها وتم ، الشهير تويتر موقع في ومصممين لمطورين المكتبة هذه إنشاء أصل
.العالم في
عا تويتر في البوتستراب إنشاء تمم0202.تويتر شركة مبرمجي قبل من
بعدعدةأشهرفيالتطويروانطلقالمشروعبقوةعلىكلالمستوياتوبدونتوجيهوبسرعةكبيرةوكانتهذهبمثابةالقاعدةاالساسيةلبناءأساساتالمكتبة
قبلإطالقهالعامةالمطوريين.
- 3. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
وفي01-20-0200قامتتويترباصدارالنسخةاألولىلهذهالمكتبةللمطورينوالمصممينوالجميلأنهتماإلعالنعنهابتغريدةلمطورالبوتسترابنفسه.
اآلنيوجدأكثرمنعشريناصدارلهذهالمكتبة,وتمتإعادةكتابتهامنالبدايةفياإلصدارينV2وV3.
بوتستراب0:فيهذااالصدارتمتاضافةالـResponsiveوجعلهخيارللمطريونيقومباضافتهعندالحاجة.
بوتستراب3:فيهتمتإعادةكتابةالمكتبةمرةأخرىلجعلهاResponsiveبشكلإفتراضي,وعلىمتصفحاتالجواالتبشكلأساسي.
- 4. .م
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
- 5. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
ال منها الملفات مجموعة من المكتبة هذه تتألفcssال وJavascript: التالي بالشكل موزعة
الصفحة ضمن المكتبات تضمين تعليماتفيها البوتستراب مكتبة استخدام تريد التي:
<!-- 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>
- 6. .م
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">
<!-- 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>
- 7. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
أمثلةعنالبوتستراب
علىهذاالمثالالبسيطالذيكتبتهًاسابقستتمكنمنانشاءأيموقعتريدوإليكبعضاألمثلةعنمواقعبسيطةتمانشاءهابكودالبوتسترابالبسيطهذا
احد استخدام كيفية يوضح التالي المثالالتصفح أي المستعرض شاشة تصغير بمجرد شكلها تغير يتم كيف (الحظ الرئيسية القائمة وهي البوتستراب عناصر
)المثال سبيل على الجوال شاشة على
... التفصيل من بشيء المثال هذا سنعرض
الموقع عنوان مع رئيسية قائمة على تحتوي الصفحة هذه فإن نالحظ كماالص في محتوى وعنوان...عشوائي ونص فحة
- 8. .م
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>
<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>
- 9. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
األندرويد بتطبيقات الخاصة القائمة أصبحت وكأنها
أخرى امثلة وهناك. التفصيل من بشيء الكتاب هذا ضمن عرضها سيتم
دعمالمتصفحات
البوتستراببنيتلتالئمالعملعلىكلالمتصفحاتالجديدةًءسواكانتالمتصفحاتالعاديةأومتصفحاتالجوال,بمعنىأنهسيكونهناكفرقفيستايل
الموقعفيالمتصفحاتالقديمة.
إذاكانهناكاختالفبشكلالكودعلىمتصفحاتIEيمكنككتابةهذاالسطرفيالكودالخاصبموقعك
<meta http-equiv="X-UA-Compatible" content="IE=edge>"
بهذاالسطرستحصلعلىتالئمفيالمتصفحلموقعكبشكلجيدويبقىهناكبعضالفروقاتالصغيرة.بإشارة الجدول ضمن موضحة الصغيرة (الفروقات×(
- 10. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
تخصيصالستايل
اذاكنتتريدأنتقومبالتعديلعلىعناصرالبوتسترابفاألمربسيطًاجدفقطبإعادةالكتابةعلىاسمالعنصربملفكالـcssستحصلعلىستايلجديدخاص
بك.
ًاأيضإذالمتكنبحاجةلكلالعناصرأوتريدتخصيصبعضاالعداداتيمكنكاختيارالعناصرالتيستتضمنهامكتبةالبوتسترابوإعادةإعدادهامنجديدمن
“مركزتخصيصوتحميل”
هكذاتكونقدأنشأتمكتبتكالخاصةالبوتسترابوبدأتبالتعاملمعها.
فيالنهايةأودأنأقولالموضوعًاجدبسيطفقطابدأ
- 11. .م
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>
- 12. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
ك على تعمل ويب بصفحة للبدء جاهزين اصبحنا السابقة الخمسة الخطوات بهذه.مشاكل أي دون المتصفحات افة
: وهو البوتستراب مكتبة مع مرفق مهم ملف توضيح يجب للبوتستراب المخصص الكورس في البدء قبلconfig.json
: مثال المصمم حاجة بحسب تهيئتها اجل من افتراضية تعد مهمة متحوالت على يحتوي الملف هذا
@btn-default-color": "#333 "
الموقع في المستخدم للزر االفتراضي اللون تحديد اجل من متحول وهو
.الكورس ضمن هللا شاء ان سردها سيتم كثيرة متحوالت وهناك
- 13. .م
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) { ... }
- 14. .م
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 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>
- 15. .م
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 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>
- 16. .م
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>
- 17. .م
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="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>
<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>
- 18. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
: يلي كما الواحدة الخلية ضمن الخاليا من مجموعة استخدام يمكنك كما
: مالحظة
على تحتوي الخاليا هذه جميعPaddingالبوتستراب مكتبة ضمن ضمنيا موضوع.
<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>
- 19. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
أوامرBootstrapلغة على وتعديالتهاHTML
ال اوامر اهم الفصل هذا في سنذكرHTMLكل بداية في تعديلها إلى الحاجة دون فوري بشكل استخدمها اجل من بتحسينها البوتستراب قامت التي المعروفة
.للموقع تصميم
العناوين(Headings: )
األوامر ان<h1>إلى<h6>يلي كما مباشر بشكل استخدامها ليتم البوتستراب في تحسينها تم
: التالي الشكل ليكون
( الموقع محتوىBody copy):
<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>
- 20. .م
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>
- 21. .م
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>
- 22. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
يلي كما للجداول حدود إضافة بإمكاننا كما:
:الجدول ألسطر معينة حاالت
الجدول لسطور الوانا لتعطي معينة صفات استخدام يمكنك:يلي كما محتواه بحسب
الصنف اسمالوظيفة
.activeعليه النقر حال في الجدول ضمن معين سطر لتحديد
.success)أخضر (لون السطر لحالة إيجابية حالة إلعطاء
.infoما معلومة إعطاءاألزرق باللون تكون وعادة
.warningالبرتقالي باللون عادة ويكون تحذير
.dangerاألحمر باللون عادة ويكون خطر
:التالي الشكل في كما الجدول هذا توضيح ويمكن
<table class="table table-bordered"> ... </table>
- 23. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
واألسطر الخاليا على األصناف هذه وتطبق
:الحجم في للتغير القابلة الغير الجداول
عليها ويطلقResponsive tables. الجوال شاشات في الحال هو كما الحجم في للمتصفح التصغير عند ابعادها التتغير التي الجداول وهيعرض عند أي
ظهور مع ابعادها على الحفاظ يتم صغيرة مستعرض شاشة على الجداول هذهscroll bar:التالي الشكل في كما الجدول كامل لتصفح
<!-- 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>
- 24. .م
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>
<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>
- 25. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
: خاصة حاالت
0-Inline form
التالي الشكل في كما واحد سطر ضمن الفورم عناصر وضع أجل من التنسيق هذا يعد:
<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>
- 26. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
0-Horizontal form
ال لعناصر الصعبة التنسيق عمليات عن نفسك لتبعد سهال تنفيذه اصبح للفورم المعروف النموذج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>
- 27. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
3-Checkboxes and radios
: واحد سطر على بوكس راديو او اختيار حقول
<div class="checkbox">
<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 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>
- 28. .م
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>
<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>
- 29. .م
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>
- 30. .م
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 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>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
- 31. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
:األزرار
جذ بشكل لالزرار جاهزة تصاميما البوتستراب مكاتب توفرالشكل في كما وانيق اب: التالي
على المكتبة تشتمل :األزرار أحجامأربعة: يلي كما لألزرار قياسية احجام
0-: كبيرlg-.btn
0-: متوسطsm-.btn
3-:صغيرxs-.btn
4-افتراضي
<!-- 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>
<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>
- 32. .م
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">
- 33. .م
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; }
- 34. .م
1'st Bootstrap
نوح فادي .م : إعداد
fadinoh@hotmail.com
..السكريبتات استخدام في البوتستراب قوة عن الثاني الجزء في وسنتحدث لألمثلة كامل تحضير يتم حتى ًاقريب الثاني الجزء نشر سيتمJQuery
استفسار او سؤال أليfadinoh@hotmail.com