اسلاید شماره 4 Bootstarp

1. ‫وب‬ ‫بر‬ ‫مبتنی‬ ‫نویسی‬ ‫برنامه‬
‫سوم‬ ‫فصل‬
Bootstrap
‫خدا‬ ‫نام‬ ‫به‬
1

2. 2

3. Bootstrap‫چیست؟‬
3
Bootstrap‫یک‬‫چارچوب‬(free front-end framework)‫بصری‬‫زیبا‬‫و‬‫قدرتمند‬
‫می‬‫باشد‬‫که‬‫برای‬‫توسعه‬‫و‬‫آسانتر‬‫صفحات‬‫وب‬‫استفاده‬‫می‬‫شود‬.‫این‬‫چارچو‬‫ب‬
‫دارای‬‫الگوهای‬‫طراحی‬‫بر‬‫اساس‬HTML‫و‬CSS‫است‬‫که‬‫امکان‬‫ایجاد‬‫دکمه‬،‫ها‬
،‫منوها‬‫جدول‬‫ها‬‫و‬...‫را‬‫می‬‫دهد‬.‫این‬‫چارچوب‬‫همچنین‬‫توانایی‬‫ایجاد‬‫یک‬‫طرح‬
‫کلی‬‫واکنشگرا‬(Responsive Layout)‫را‬‫نیز‬‫می‬‫دهد‬.

4. Bootstrap 4
4
Bootstrap 4‫جدیدترین‬‫ورژن‬‫از‬‫این‬‫فریم‬‫ورک‬‫است‬‫که‬‫قابلیت‬‫های‬‫جدیدی‬
‫به‬‫آن‬‫اضافه‬‫شده‬‫است‬.‫مزایا‬‫این‬‫چارچوب‬‫عبارتند‬‫از‬:

5. ‫از‬ ‫استفاده‬ ‫نحوه‬Bootstrap
5
‫برای‬‫استفاده‬‫از‬Bootstrap‫دو‬‫راه‬‫وجود‬‫دارد‬.
❖‫دانلود‬‫بوت‬‫استرپ‬‫از‬‫آدرس‬http://getbootstrap.com/
✓Compiled CSS and JS:‫ورژن‬‫کامپایل‬‫شده‬‫است‬.
✓Source files:‫شامل‬‫داکیومنت‬‫ها‬‫نیز‬‫می‬‫باشد‬.
❖‫استفاده‬‫از‬CDN(Content Delivery Network)

6. Bootstrap 4 CDN
6
 MaxCDN provides CDN support for Bootstrap's CSS and
JavaScript.You must also include jQuery:

7. ‫از‬ ‫استفاده‬ ‫مزیت‬CDN
7

8. ‫دانلود‬
8
‫پس‬‫از‬‫دانلود‬‫فایل‬Bootstrap‫با‬‫دو‬‫فولدر‬‫مواجه‬‫می‬‫شویم‬.‫در‬‫داخل‬‫فولد‬CSS‫فایل‬
‫های‬‫مربوط‬‫به‬CSS‫است‬‫که‬‫شامل‬‫موارد‬‫مختلف‬‫است‬.‫توجه‬‫شود‬‫که‬‫فایل‬‫های‬
min‫فایل‬‫هایی‬‫هستند‬‫که‬‫با‬‫از‬‫بین‬‫بردن‬‫فاصله‬‫ها‬‫و‬‫خطوط‬‫خالی‬‫کد‬‫حجم‬‫فا‬‫یل‬
‫کاهش‬‫یافته‬‫است‬.

9. ‫استرپ‬ ‫بوت‬ ‫های‬ ‫فایل‬
9
‫همانطور‬‫که‬‫مشاهده‬‫می‬‫شود‬‫فایل‬bootstrap.css‫شامل‬8347‫خط‬‫کد‬‫می‬‫باشد‬.
‫در‬‫حالی‬‫که‬‫فایل‬bootstrap.min.css‫شامل‬7‫خط‬‫کد‬‫که‬‫تمام‬‫کدها‬‫در‬‫خط‬6
‫فشرده‬‫شده‬‫است‬.

10. ‫استرپ‬ ‫بوت‬ ‫با‬ ‫وب‬ ‫صفحه‬ ‫اولین‬ ‫ایجاد‬
10
‫ابتدا‬‫سند‬html‫را‬‫ایجاد‬‫کنید‬.
‫سپس‬‫تگ‬‫متای‬viewport‫را‬‫به‬‫بخش‬head‫اضافه‬‫کنید‬.

11. ‫تگ‬ ‫متا‬viewport
11
‫این‬‫تگ‬‫در‬‫اکثر‬‫قالب‬‫های‬‫رسپانسیو‬‫به‬‫صورت‬‫زیر‬‫تعریف‬‫می‬‫شود‬.
‫پارامتر‬width
✓‫این‬‫پارامتر‬‫در‬‫واقع‬‫مهمترین‬‫قسمت‬‫متا‬‫تگ‬viewport‫می‬‫باشد‬.‫به‬‫مرورگر‬‫می‬‫گوید‬‫که‬‫عرض‬
‫وب‬‫سایت‬‫چقدر‬‫است‬.width=device-width‫عرض‬‫وب‬‫سایت‬‫را‬‫برابر‬‫با‬‫عرض‬‫گوشی‬‫موبایل‬‫در‬
‫نظر‬‫می‬‫گیرد‬.‫همچنین‬‫می‬‫توانید‬‫یک‬‫عدد‬‫بر‬‫حسب‬‫پیکسل‬width=320‫برای‬‫مشخص‬‫کردن‬
‫عرض‬‫صفحه‬‫بکار‬‫ببرید‬.
Initial-scale
✓‫این‬‫پارامتر‬‫میزان‬‫زوم‬‫اولیه‬‫را‬‫مشخص‬‫می‬‫کند‬‫و‬‫استفاده‬‫از‬initial-scale=1‫باعث‬‫جلوگیری‬‫از‬
‫زوم‬‫پیش‬‫فرض‬‫مرورگرها‬‫می‬‫شود‬.

12. ‫تگ‬ ‫متا‬viewport
12

13. ‫استرپ‬ ‫بوت‬ ‫با‬ ‫وب‬ ‫صفحه‬ ‫اولین‬ ‫ایجاد‬ ‫ادامه‬
13
‫فایل‬‫های‬‫جی‬‫کوئری‬‫و‬‫جاوا‬‫اسکریپت‬‫بوت‬‫استرپ‬‫را‬‫نیز‬‫با‬‫تگ‬script‫اضافه‬
‫نمائید‬.

14. ‫ایجاد‬ ‫ادامه‬‫استرپ‬ ‫بوت‬ ‫با‬ ‫وب‬ ‫صفحه‬ ‫اولین‬
14
‫در‬‫بوت‬‫استرپ‬‫دو‬‫نوع‬‫کالس‬‫کانتینر‬‫وجود‬‫دارد‬‫که‬‫عبارتند‬‫از‬:

15. ‫استرپ‬ ‫بوت‬ ‫با‬ ‫وب‬ ‫صفحه‬ ‫اولین‬ ‫ایجاد‬ ‫ادامه‬
15

16. ‫استرپ‬ ‫بوت‬ ‫با‬ ‫وب‬ ‫صفحه‬ ‫اولین‬ ‫ایجاد‬ ‫ادامه‬
16

17. ‫بندی‬ ‫شبکه‬ ‫سیستم‬Bootstrap 4 Grid System
17
‫سیستم‬‫گرید‬‫بوت‬‫استرپ‬‫اجازه‬‫ایجاد‬12‫ستون‬‫را‬‫در‬‫عرض‬‫صفحه‬‫می‬‫دهد‬.‫به‬
‫طوری‬‫که‬‫می‬‫توان‬‫این‬12‫ستون‬‫را‬‫جداگانه‬‫یا‬‫حتی‬‫برای‬‫ایجاد‬‫ستون‬‫های‬‫عریض‬‫ت‬‫ر‬
‫با‬‫هم‬‫ترکیب‬‫کرد‬.‫این‬‫سیستم‬‫شبکه‬‫بندی‬‫واکنشگرا‬‫می‬‫باشد‬‫و‬‫ترتی‬‫ب‬‫قرارگیری‬
‫آنها‬‫بسته‬‫به‬‫صفحه‬‫نمایش‬‫تغییر‬‫می‬‫کند‬.

18. ‫ها‬ ‫ستون‬ ‫کالس‬Grid Classes
18
‫سیستم‬‫شبکه‬‫بندی‬‫بوت‬‫استرپ‬‫ورژن‬4‫شامل‬5‫کالس‬‫مختلف‬‫است‬‫که‬
‫عبارتند‬‫از‬:

19. Grid Options
19

20. Basic Structure of a Bootstrap 4 Grid
20

21. 21

22. 22

23. ‫مثال‬
23
‫ایجاد‬‫سه‬‫ستون‬‫مساوی‬(Three Equal Columns)
✓‫اگر‬‫بخواهیم‬12‫ستون‬‫را‬‫به‬‫سه‬‫ستون‬‫مساوی‬‫در‬‫همه‬‫صفحات‬‫نمایش‬‫و‬‫وسیله‬‫ها‬(،‫موبایل‬‫تب‬،‫لت‬
‫و‬...)‫تبدیل‬‫نمائیم‬‫باید‬‫به‬‫صورت‬‫زیر‬‫کد‬‫نویسی‬‫کرد‬.

24. ‫مثال‬ ‫ادامه‬
24

25. ‫واکنشگرا‬ ‫های‬ ‫ستون‬ ‫ایجاد‬Responsive Columns
25
‫مثال‬‫زیر‬‫نحوه‬‫ایجاد‬‫چهار‬‫ستون‬‫برابر‬‫در‬‫صفحه‬‫نمایش‬‫تبلت‬‫ها‬‫را‬‫نشان‬‫می‬‫ده‬‫د‬‫این‬
‫ستون‬‫ها‬‫برای‬‫صفحات‬‫با‬‫پهنای‬‫بیشتر‬(extra large desktops)‫از‬‫نظر‬‫مقیاس‬
‫بزرگتر‬‫می‬‫شوند‬.‫در‬‫صفحات‬‫موبایل‬‫با‬‫عرض‬‫کمتر‬‫از‬576px‫ستون‬‫ها‬‫به‬‫طور‬
‫اتوماتیک‬‫زیر‬‫همدیگر‬‫قرار‬‫می‬‫گیرند‬.

26. ‫واکنشگرا‬ ‫برابر‬ ‫ستون‬ ‫سه‬ ‫ایجاد‬ ‫مثال‬
26

27. ‫واکنشگرا‬ ‫مساوی‬ ‫نا‬ ‫ستون‬ ‫دو‬ ‫ایجاد‬
27
 Two Unequal Responsive Columns

28. ‫واکنشگرا‬ ‫مساوی‬ ‫نا‬ ‫ستون‬ ‫دو‬ ‫ایجاد‬
28

29. Bootstrap 4 Text/Typography
29
‫تنطیمات‬‫پیش‬‫فرض‬‫بوت‬‫استرپ‬4‫به‬‫صورت‬‫زیر‬‫است‬:
 font-size of 16px,
 line-height is 1.5
 font-family is "Helvetica Neue", Helvetica,Arial, sans-serif
 all <p> elements have margin-top: 0 and margin-bottom: 1rem
(16px by default).

30. <h1> - <h6>
30

31. Display Headings
31
Display Headings‫برجسته‬‫تر‬‫کردن‬(larger font-size and lighter font-
weight)‫تیترها‬‫بکار‬‫می‬‫رود‬.‫و‬‫یکی‬‫از‬‫چهار‬‫کالس‬.display-1, .display-2,
.display-3, .display-4‫را‬‫به‬‫خود‬‫می‬‫گیرند‬.

32. <small>
32
‫در‬‫بوت‬‫استرپ‬<small>‫برای‬‫ایجاد‬‫تیتر‬‫متن‬‫ثانویه‬‫در‬‫تیتر‬‫بکار‬‫می‬‫رو‬‫د‬.

33. <mark>
33

34. Typography Classes
34
‫نمونه‬‫های‬‫دیگر‬‫از‬‫کالس‬‫هایی‬‫که‬‫در‬‫بوت‬‫استرپ‬‫می‬‫توان‬‫استفاده‬‫کرد‬.

35. ‫مثال‬
35

36. Typography Classes
36
‫نمونه‬‫های‬‫دیگر‬‫از‬‫کالس‬‫هایی‬‫که‬‫در‬‫بوت‬‫استرپ‬‫می‬‫توان‬‫استفاده‬‫کرد‬.

37. ‫مثال‬
37

38. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫ها‬ ‫رنگ‬
38
‫کالس‬‫های‬Text Colors
 .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-
danger, .text-secondary, .text-white, .text-dark and .text-light
‫کالس‬‫های‬Background Colors
 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-
dark and .bg-light

39. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫تصاویر‬ ‫اشکال‬ ‫انواع‬
39

40. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫تصاویر‬ ‫اشکال‬ ‫انواع‬
40
‫توسط‬‫کالس‬.rounded‫به‬‫تصویر‬‫خود‬‫گوشه‬‫های‬‫گرد‬‫اضافه‬‫می‬‫کنیم‬.

41. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫تصاویر‬ ‫اشکال‬ ‫انواع‬
41
‫توسط‬‫کالس‬.rounded-circle‫تصاویر‬‫شما‬‫بصورت‬‫دایره‬‫ای‬‫شکل‬‫نمایش‬‫داد‬‫ه‬
‫میشود‬.

42. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫تصاویر‬ ‫اشکال‬ ‫انواع‬
42
‫توسط‬‫کالس‬.img-thumbnail‫تصویر‬‫خود‬‫را‬‫به‬‫یک‬‫تصویر‬‫بندانگشتی‬‫ت‬‫بدیل‬
‫می‬‫کنیم‬.

43. ‫تصاویر‬ ‫ترازبندی‬Aligning Images
43
‫برای‬‫ترازبندی‬‫می‬‫توانید‬‫از‬‫کالس‬‫های‬.float-right‫و‬.float-left‫استفاده‬
‫کنید‬.

44. ‫واکنشگرا‬ ‫تصاویر‬Responsive
44
‫اگر‬‫بخواهیم‬‫تصویر‬‫حالت‬‫ریسپانسیو‬‫به‬‫خود‬‫بگیرد‬‫یعنی‬‫با‬‫تغییر‬‫ان‬‫دازه‬‫صفحه‬
‫نمایش‬‫خود‬‫را‬‫تنظیم‬‫کند‬‫از‬‫کالس‬.img-fluid‫در‬‫تگ‬<img>‫استفاده‬‫می‬
‫کنیم‬.‫با‬‫اینکار‬‫تصویر‬‫در‬‫بالک‬‫خود‬‫با‬‫عرض‬1۰۰%‫و‬‫ارتفاع‬‫خودکار‬‫یا‬auto‫در‬
‫نظر‬‫گرفته‬‫میشود‬.

45. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫ها‬ ‫دکمه‬
45
‫انواع‬‫استایل‬‫های‬‫دکمه‬‫در‬‫بوت‬‫استرپ‬

46. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫ها‬ ‫دکمه‬
46
‫کالس‬‫های‬‫دکمه‬‫با‬‫عناصر‬<a>, <button>, <input>‫نیز‬‫می‬‫توانند‬‫بکار‬
‫روند‬.

47. ‫نکته‬
47

48. Button Outline
48

49. Button Sizes
49

50. Button Groups
50
‫بوت‬‫استرپ‬‫اجازه‬‫ایجاد‬‫یک‬‫سری‬‫دکمه‬‫ها‬‫با‬‫همدیگر‬‫را‬‫می‬‫دهد‬.‫برای‬‫این‬
‫منظور‬‫کافی‬‫است‬‫در‬‫المان‬<div>‫از‬‫کالس‬.btn-group‫استفاده‬‫کنیم‬.

51. ‫نکته‬
51

52. Split Button Dropdowns
52

53. ‫صفحه‬‫بندی‬Pagination
53
‫در‬‫صورتی‬‫که‬‫وب‬‫سایتمان‬‫دارای‬‫صفحات‬‫مختلف‬‫باشد‬‫می‬‫توان‬‫از‬‫قابلیت‬‫ص‬‫فحه‬
‫بندی‬‫بوت‬‫استرپ‬‫استفاده‬‫کرد‬.‫برای‬‫این‬‫منظور‬‫می‬‫توان‬‫از‬‫کالس‬.pagination‫در‬
‫تگ‬<ul>‫استفاده‬‫کرد‬.‫سپس‬‫باید‬‫به‬‫عناصر‬‫لیست‬‫یعنی‬<li>‫ها‬‫کالس‬.page-
item‫و‬‫به‬‫لینک‬‫ها‬‫کالس‬.page-link‫را‬‫اضافه‬‫کنیم‬.

54. ‫بندی‬ ‫صفحه‬ ‫مثال‬
54

55. Active State
55
‫می‬‫توان‬‫از‬‫کالس‬.active‫برای‬‫مشخص‬‫کردن‬(hightlight)‫صفحه‬‫جاری‬
‫استفاده‬‫کرد‬.

56. Disabled State
56
‫می‬‫توان‬‫از‬‫کالس‬.disabled‫برای‬‫لینکهای‬‫غیر‬‫قابل‬‫کلیک‬‫استفاده‬‫کرد‬.

57. Dropdowns
57
‫منوی‬dropdown‫امکان‬‫انتخاب‬‫یک‬‫مقدار‬‫را‬‫از‬‫یک‬‫لیست‬‫از‬‫پیش‬‫تعیین‬‫ش‬‫ده‬
‫می‬‫دهد‬.

58. Dropdown Divider
58

59. Collapse
59
Collapsibles‫زمانی‬‫که‬‫بخواهید‬‫محتوایی‬‫را‬‫نمایش‬‫یا‬‫پنهان‬‫کنید‬‫مورد‬
‫استفاده‬‫قرار‬‫می‬‫گیرد‬.

60. ‫مثال‬
60

61. ‫نکته‬
61
‫به‬‫طور‬‫پیش‬‫فرض‬‫محتوای‬collapsible‫پنهان‬‫است‬.‫می‬‫توان‬‫با‬‫کالس‬.show
‫محتوای‬‫آن‬‫را‬‫به‬‫طور‬‫پیش‬‫فرض‬‫نمایش‬‫داد‬.

62. Nav Menus
62
‫برای‬‫ایجاد‬‫منوهای‬‫ساده‬‫افقی‬‫می‬‫توان‬‫کالس‬.nav‫را‬‫به‬‫تگ‬<ul>‫اضافه‬‫نمود‬‫و‬
‫به‬‫دنبال‬‫آن‬‫نیز‬‫کالس‬.nav-item‫را‬‫به‬‫عناصر‬‫لیست‬‫یعنی‬<li>‫ها‬‫و‬‫کالس‬
.nav-link‫را‬‫به‬‫لینک‬‫ها‬‫اضافه‬‫کرد‬.

63. ‫مثال‬
63

64. Aligned Nav
64
‫کالس‬.justify-content-center‫برای‬‫تراز‬‫بندی‬‫در‬‫مرکز‬
‫کالس‬.justify-content-end‫برای‬‫تراز‬‫بندی‬‫از‬‫سمت‬‫راست‬

65. Tabs‫و‬Pills
65

66. Navigation Bars
66

67. Basic Navbar
67
‫در‬‫بوت‬‫استرپ‬navigation‫بسته‬‫به‬‫سایز‬‫صفحه‬‫نمایش‬‫می‬‫تواند‬‫به‬‫صورت‬
extend‫یا‬collapse‫قرار‬‫بگیرد‬.
navigation bar‫استاندارد‬‫با‬‫کالس‬.navbar‫ایجاد‬‫می‬‫شود‬‫که‬‫با‬‫کالس‬‫های‬
.navbar-expand-xl|lg|md|sm‫حالت‬‫واکنش‬‫گرا‬‫به‬‫خود‬‫می‬‫گیرد‬.
‫برای‬‫اضافه‬‫کردن‬‫لینک‬‫به‬‫این‬‫نوار‬‫می‬‫توان‬‫تگ‬<ul>‫را‬‫با‬‫کالس‬
class="navbar-nav"‫به‬‫آن‬‫اضافه‬‫کرد‬‫و‬‫سپس‬‫به‬‫عناصر‬‫تگ‬<li>‫کالس‬
.nav-item‫و‬‫عناصر‬‫تگ‬<a>‫کالس‬.nav-link‫را‬‫افزود‬.

68. ‫مثال‬
68

69. Vertical Navbar
69

70. Colored Navbar
70
‫از‬‫هر‬‫کالس‬.bg-color‫برای‬‫تغییر‬‫رنگ‬‫پس‬‫زمینه‬navbar‫می‬‫توان‬‫استفاده‬
‫کرد‬(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger,
.bg-secondary, .bg-dark , .bg-light).

71. ‫مثال‬
71

72. Brand / Logo
72
‫کالس‬.navbar-brand‫برای‬‫هایالیت‬‫کردن‬‫برند‬‫یا‬‫لوگو‬‫بکار‬‫می‬‫رود‬.

73. ‫نکته‬
73
‫وقتی‬‫از‬‫کالس‬.navbar-brand‫برای‬‫تصویر‬‫استفاده‬،‫شود‬‫بوت‬‫استرپ‬4‫به‬
‫طور‬‫اتوماتیک‬‫عکس‬‫را‬‫متناسب‬‫با‬navbar‫در‬‫می‬‫آورد‬.

74. Collapsing The Navigation Bar
74

75. 75

76. Navbar With Dropdown
76

77. Navbar Forms and Buttons
77

78. Fixed Navigation Bar
78

79. ‫استرپ‬ ‫بوت‬ ‫در‬ ‫ها‬ ‫فرم‬
79
‫کنترل‬‫های‬‫فرم‬‫به‬‫طور‬‫اتوماتیک‬‫با‬‫بوت‬‫استرپ‬‫استایل‬‫خاصی‬‫می‬‫گی‬‫رند‬.
‫همچنین‬‫عناصر‬<input>, <textarea> , <select>‫با‬‫کالس‬.form-
control‫عرض‬1۰۰‫درصد‬‫دارند‬.

80. Bootstrap 4 Stacked Form
80

81. Bootstrap Inline Form
81

82. ‫مثال‬
82

83. Bootstrap 4 Form Inputs
83
https://www.w3schools.com/bootstrap4/bootstrap_forms_inputs.asp

84. Bootstrap 4 Carousel
84
‫در‬‫بوت‬‫استرپ‬‫امکان‬‫ایجاد‬‫اسالیدر‬‫را‬‫نیز‬‫فراهم‬‫می‬‫کند‬.

85. ‫ادامه‬
85

86. ‫ادامه‬
86

87. Add Captions to Slides
87

88. Bootstrap 4 Grid
88