در این مطلب، ویدئو 85 – افزودن بوت استرپ و نوک کوه یخ بوت استرپ – سری آموزش پایتون و جنگو 3.2 با زیرنویس فارسی را برای دانلود قرار داده ام. شما میتوانید با پرداخت 15 هزار تومان ، این ویدیو به علاوه تمامی فیلم های سایت را دانلود کنید.اکثر فیلم های سایت به زبان انگلیسی می باشند. این ویدئو دارای زیرنویس فارسی ترجمه شده توسط هوش مصنوعی می باشد که میتوانید نمونه ای از آن را در قسمت پایانی این مطلب مشاهده کنید.
مدت زمان فیلم: 00:17:41
تصاویر این ویدئو:
قسمتی از زیرنویس این فیلم:
00:00:00,000 –> 00:00:01,439
حالا ما به جلو می رویم و
2
00:00:01,439 –> 00:00:04,019
با استفاده از بوت استرپ [موسیقی] کمی بهتر به نظر می
3
00:00:04,019 –> 00:00:06,640
4
00:00:06,640 –> 00:00:08,400
رسیم، حالا اشتباه نکنید،
5
00:00:08,400 –> 00:00:10,320
کتابخانه های جلویی زیادی وجود دارد، به
6
00:00:10,320 –> 00:00:13,200
همین دلیل است که وقتی می گویم برای پیاده سازی یکی از آن ها خیلی صبر کردم
7
00:00:13,200 –> 00:00:14,799
. یک کتابخانه front-end منظورم
8
00:00:14,799 –> 00:00:16,640
فقط چیزی است که باعث می شود
9
00:00:16,640 –> 00:00:18,240
بهتر به نظر برسد
10
00:00:18,240 –> 00:00:20,160
این فریمورک فرانت اند نامیده می شد، مطمئناً دیگر
11
00:00:20,160 –> 00:00:22,000
یک فریمورک جلویی در نظر گرفته نمی شود، در
12
00:00:22,000 –> 00:00:24,400
واقع فقط یک کتابخانه یا جعبه ابزار است
13
00:00:24,400 –> 00:00:27,680
که ممکن است برای ساختن css از آن استفاده کنید.
14
00:00:27,680 –> 00:00:30,960
بهتر به نظر برسید تا به طور کلی
15
00:00:30,960 –> 00:00:33,920
زیبایی شناسی بهتری برای برنامه خود ارائه دهید، بنابراین
16
00:00:33,920 –> 00:00:36,480
ادامه دهید و به بوت استرپ خود
17
00:00:36,480 –> 00:00:39,200
بروید و به اسناد بروید و اگر قبلاً این کار را انجام نداده اید، می توانید
18
00:00:39,200 –> 00:00:41,760
به پایین به الگوی استارت بروید،
19
00:00:41,760 –> 00:00:45,039
بنابراین ما واقعاً چه کار می
20
00:00:45,039 –> 00:00:47,760
کنیم. در اینجا می خواهید css بوت
21
00:00:47,760 –> 00:00:50,320
استرپ و بسته بوت استرپ را
22
00:00:50,320 –> 00:00:52,800
انتخاب کنید و گزینه های دیگری نیز برای آن وجود دارد و ما می توانیم
23
00:00:52,800 –> 00:00:55,360
متا تگ های مورد نیاز را نیز اضافه
24
00:00:55,360 –> 00:00:57,360
کنیم تا همیشه بتوانیم آن را کپی کرده و
25
00:00:57,360 –> 00:00:59,800
در قالب های خود در base.html بیاوریم
26
00:00:59,800 –> 00:01:01,600
27
00:01:01,600 –> 00:01:03,680
و بله برخی از اینها را شما ممکن است قبلا
28
00:01:03,680 –> 00:01:06,960
برخی از شما لزوماً این کار را نخواهید داشت، بنابراین
29
00:01:06,960 –> 00:01:08,080
من میروم و
30
00:01:08,080 –> 00:01:10,640
متا تگهای مورد نیاز
31
00:01:10,640 –> 00:01:13,600
و سپس bootstrap css را کپی میکنم و
32
00:01:13,600 –> 00:01:15,600
css بوت استرپ را
33
00:01:15,600 –> 00:01:18,240
بالاتر از موارد hdmx قرار میدهم،
34
00:01:18,240 –> 00:01:21,040
زیرا این سبکهای سفارشی من در اینجا است
35
00:01:21,040 –> 00:01:22,560
. البته من می
36
00:01:22,560 –> 00:01:24,400
خواهم جاوا اسکریپت را به پایین بیاورم و
37
00:01:24,400 –> 00:01:25,680
38
00:01:25,680 –> 00:01:27,600
اکنون می توانیم آن را بالای شنونده رویداد خود
39
00:01:27,600 –> 00:01:30,079
در اینجا قرار دهیم تا
40
00:01:30,079 –> 00:01:32,640
از زمانی که می خواهیم
41
00:01:32,640 –> 00:01:34,400
بوت استرپ واقعاً بارگیری شود، مطمئن باشیم
42
00:01:34,400 –> 00:01:36,960
تا پس از انجام این کار صفحه ما قبلاً
43
00:01:36,960 –> 00:01:39,200
متفاوت به نظر برسد. در حال حاضر بخشی از
44
00:01:39,200 –> 00:01:41,040
دلیلی که فرم ما متفاوت به نظر می رسد به
45
00:01:41,040 –> 00:01:42,880
دلیل کلاس هایی است که من به
46
00:01:42,880 –> 00:01:44,799
طور هدفمند در حال حاضر پیاده سازی کرده ام،
47
00:01:44,799 –> 00:01:45,600
48
00:01:45,600 –> 00:01:47,759
بنابراین اکنون فقط می خواهیم این ظاهر را
49
00:01:47,759 –> 00:01:50,560
حتی بهتر کنیم و در کل
50
00:01:50,560 –> 00:01:52,399
نحوه انجام این کار نسبتاً ساده است
51
00:01:52,399 –> 00:01:54,399
اول از همه ما دیگر به این نیاز نداریم.
52
00:01:54,399 –> 00:01:57,119
سلام دنیا، ما مطمئناً دیگر نیازی به
53
00:01:57,119 –> 00:01:59,520
پیوند به css نداریم،
54
00:01:59,520 –> 00:02:01,759
اکنون چیزی شبیه به این داریم،
55
00:02:01,759 –> 00:02:03,439
بنابراین ورود به مستندات بوت استرپ
56
00:02:03,439 –> 00:02:05,119
واقعاً به
57
00:02:05,119 –> 00:02:05,920
شما
58
00:02:05,920 –> 00:02:08,000
در مورد بسیاری از این موارد و موارد
59
00:02:08,000 –> 00:02:09,280
دیگر کمک خواهد کرد. g که به شما کمک می کند
60
00:02:09,280 –> 00:02:12,720
این است که فقط وارد نمونه های
61
00:02:12,720 –> 00:02:15,599
آنها شوید، آنها تعداد زیادی دارند و من آموزش
62
00:02:15,599 –> 00:02:17,760
هایی برای پوشش بوت استرپ
63
00:02:17,760 –> 00:02:19,840
دارم.
64
00:02:19,840 –> 00:02:22,160
65
00:02:22,160 –> 00:02:24,879
66
00:02:24,879 –> 00:02:26,720
شک دارم که میدانید ادامه دهید و
67
00:02:26,720 –> 00:02:29,440
هر عنصری را بررسی کنید و آن
68
00:02:29,440 –> 00:02:31,280
را برطرف کنید، اما اولین کاری که میخواهم انجام دهم این
69
00:02:31,280 –> 00:02:34,080
است که یک نوار ناوبری اضافه
70
00:02:34,080 –> 00:02:36,239
کنم تا نوار ناوبری خود فقط
71
00:02:36,239 –> 00:02:38,879
شامل شود و من آن را پایه و پایه مینامم
72
00:02:38,879 –> 00:02:42,080
و navbar.html
73
00:02:42,080 –> 00:02:43,519
خوب است و من این را در هر
74
00:02:43,519 –> 00:02:46,239
صفحه می خواهم و بنابراین در این مورد من
75
00:02:46,239 –> 00:02:47,680
در واقع چیزی برای
76
00:02:47,680 –> 00:02:50,480
نوار ناوبری ندارم، بنابراین بیایید ادامه دهیم و پایه را انجام دهیم
77
00:02:50,480 –> 00:02:53,120
و یک فایل جدید ایجاد کنیم و آن را نوار ناوبری صدا کنیم
78
00:02:53,120 –> 00:02:55,440
نه نوار ناوبری من ادامه میدهم و
79
00:02:55,440 –> 00:02:58,400
آن را در پایه تغییر میدهم،
80
00:02:58,560 –> 00:03:00,400
بنابراین این قرار است نوار ناوبری ما باشد
81
00:03:00,400 –> 00:03:01,840
82
00:03:01,840 –> 00:03:03,360
و دوباره به مستندات بوت استرپ
83
00:03:03,360 –> 00:03:04,640
84
00:03:04,640 –> 00:03:06,239
میرویم و فقط میرویم و
85
00:03:06,239 –> 00:03:07,280
86
00:03:07,280 –> 00:03:09,120
وارد اجزای اینجا میشویم
87
00:03:09,120 –> 00:03:11,680
تا به پایین بروید تا نوار ناوبری به
88
00:03:11,680 –> 00:03:15,120
پایین بروید و نگاه کنید. برای نوار ناوبری اینجا یکی
89
00:03:15,120 –> 00:03:17,280
بیایید برویم سر کنید و آن را کپی کنید، آن را در
90
00:03:17,280 –> 00:03:18,879
اینجا بچسبانید، آن را ذخیره کنید
91
00:03:18,879 –> 00:03:20,879
و بیایید به صفحه خود بازگردیم،
92
00:03:20,879 –> 00:03:23,360
سلام، از قبل
93
00:03:23,360 –> 00:03:26,560
خوب به نظر می رسد، بنابراین از نظر ناوبری آنقدرها مشکل نیست
94
00:03:26,560 –> 00:03:28,879
،
95
00:03:28,879 –> 00:03:30,080
اما یکی از چیزهایی که جالب است،
96
00:03:30,080 –> 00:03:33,360
این فرم است که در اینجا ما وجود دارد. آیا یک
97
00:03:33,360 –> 00:03:35,599
فرم جستجو داشتم به یاد داشته باشید که
98
00:03:35,599 –> 00:03:37,440
خوب ما در واقع میتوانیم آن را در اینجا قرار دهیم،
99
00:03:37,440 –> 00:03:38,640
من فقط میروم و آن را جایگذاری
100
00:03:38,640 –> 00:03:40,799
میکنم، درست مانند آن که
101
00:03:40,799 –> 00:03:42,480
آن را
102
00:03:42,480 –> 00:03:44,239
در فرم جستجوی ما بچسبانید،
103
00:03:44,239 –> 00:03:47,440
درست تکراری است، اما آنجاست،
104
00:03:47,440 –> 00:03:49,120
من میخواهم خلاص شوم از این قدیمی، من
105
00:03:49,120 –> 00:03:51,360
در واقع می خواهم این قدیمی را حذف کنم
106
00:03:51,360 –> 00:03:54,239
و به آن فرم جستجو وارد شوم، بنابراین
107
00:03:54,239 –> 00:03:57,120
در فرم جستجو جستجو
108
00:03:57,120 –> 00:03:57,920
کنید بسیار خوب،
109
00:03:57,920 –> 00:04:00,159
بنابراین اینجا
110
00:04:00,159 –> 00:04:01,519
همه چیز درست است، ما چیزهای زیادی
111
00:04:01,519 –> 00:04:03,280
در اینجا داریم
112
00:04:03,280 –> 00:04:04,560
که من می روم برای اینکه ادامه دهید و این را بچسبانید
113
00:04:04,560 –> 00:04:06,319
و فقط نگاهی به برخی از
114
00:04:06,319 –> 00:04:08,319
مواردی که ممکن است بخواهم مانند این
115
00:04:08,319 –> 00:04:09,760
کلاس از
116
00:04:09,760 –> 00:04:11,200
d flex استفاده کنم
117
00:04:11,200 –> 00:04:12,959
بیندازید، ممکن است ندانید چه چیزی وجود
118
00:04:12,959 –> 00:04:13,680
دارد،
119
00:04:13,680 –> 00:04:15,360
فقط آن را در آن قرار دهید
120
00:04:15,360 –> 00:04:17,440
و سپس کلاس ورودی را
121
00:04:17,440 –> 00:04:20,799
دقیقاً در اینجا فرم کنترل کنید.
122
00:04:21,440 –> 00:04:25,759
و متن ورودی ما در اینجا ورودی ما
123
00:04:25,759 –> 00:04:28,639
و دوباره برای کنترل است
124
00:04:28,639 –> 00:04:30,800
و سپس ما آن را داریم دکمه اینجاست من
125
00:04:30,800 –> 00:04:33,680
در واقع می توانم دکمه خود را که داشتیم جایگزین کنم
126
00:04:33,680 –> 00:04:35,680
و بیایید از شر آن رفرش خلاص شویم
127
00:04:35,680 –> 00:04:38,400
هی چه می دانید
128
00:04:38,400 –> 00:04:40,479
جستجوی بسیار بهتری اکنون به نظر می رسد کشویی
129
00:04:40,479 –> 00:04:42,800
عالی به نظر نمی رسد اما این به این معنی است
130
00:04:42,800 –> 00:04:44,639
که در base.html
131
00:04:44,639 –> 00:04:46,000
من قطعاً می خواهم از شر
132
00:04:46,000 –> 00:04:49,040
آن تگ شامل خلاص شوید که دیگر وجود ندارد
133
00:04:49,040 –> 00:04:51,759
و بنابراین من واقعاً میتوانم جستجو
134
00:04:51,759 –> 00:04:54,160
کنم که میدانید از قبل تایپ کنید
135
00:04:54,160 –> 00:04:55,680
اکنون این عالی نیست زیرا
136
00:04:55,680 –> 00:04:57,199
ما این نوع ویژگی را داریم که خوب است
137
00:04:57,199 –> 00:04:59,600
و همه چیز را داریم اما در واقع اوه آن
138
00:04:59,600 –> 00:05:01,600
یک کل به من نشان نمیدهد خیلی
139
00:05:01,600 –> 00:05:03,360
از
140
00:05:03,360 –> 00:05:05,440
مقالات در مورد من،
141
00:05:05,440 –> 00:05:07,440
امم، اما این تاکوها را به من می دهد، من
142
00:05:07,440 –> 00:05:09,759
واقعاً می توانم کارهایی را که می
143
00:05:09,759 –> 00:05:13,039
خواستم انجام دهم با یک کشویی انجام دهم،
144
00:05:13,039 –> 00:05:15,039
می توانم کاملاً بهبود دهم که بعداً
145
00:05:15,039 –> 00:05:17,039
مطمئناً چیزی است که می خواهم انجام دهم.
146
00:05:17,039 –> 00:05:18,080
این کاری نیست که من انجام دهم،
147
00:05:18,080 –> 00:05:18,960
148
00:05:18,960 –> 00:05:21,120
من می خواهم
149
00:05:21,120 –> 00:05:23,199
نوار ناوبری واقعی را تغییر دهم، یک چیز دیگر در مورد
150
00:05:23,199 –> 00:05:26,080
آن، فرم جستجویی
151
00:05:26,080 –> 00:05:29,199
است که به آیتم انتخابی در اینجا وارد می شود
152
00:05:29,199 –> 00:05:32,560
و در فرم کلاس نیز کنترل داشبورد را اضافه
153
00:05:32,560 –> 00:05:33,680
می کند
154
00:05:33,680 –> 00:05:35,840
و نگاهی به آنچه اتفاق می افتد در
155
00:05:35,840 –> 00:05:39,039
حال حاضر ما باید کمی ب بهتر است
156
00:05:39,039 –> 00:05:40,479
157
00:05:40,479 –> 00:05:42,560
در این مورد، من در واقع
158
00:05:42,560 –> 00:05:45,360
دستور العمل را به عنوان دستور العمل انتخابی اولیه رها می
159
00:05:45,360 –> 00:05:46,560
کنم، بنابراین من فقط می روم و وارد اینجا می شوم
160
00:05:46,560 –> 00:05:47,919
و انتخاب را انجام می دهم
161
00:05:47,919 –> 00:05:49,759
و آنجا خوب است، بنابراین اکنون می توانم
162
00:05:49,759 –> 00:05:51,120
آن دستور العمل ها را جستجو کنم
163
00:05:51,120 –> 00:05:53,680
و در واقع می توانیم دوباره تاکوها را جستجو کنید
164
00:05:53,680 –> 00:05:56,240
و چه میدانم من tacos را دریافت کردم، گرچن
165
00:05:56,240 –> 00:05:58,080
باید برای همه این موارد وارد سیستم شوید،
166
00:05:58,080 –> 00:05:58,960
بنابراین
167
00:05:58,960 –> 00:06:01,280
بیایید این نوار جستجو را به bean تغییر
168
00:06:01,280 –> 00:06:02,759
169
00:06:02,759 –> 00:06:05,280
170
00:06:05,280 –> 00:06:07,440
171
00:06:07,440 –> 00:06:11,039
172
00:06:11,039 –> 00:06:12,560
دهیم. اینکه آن کاربر
173
00:06:12,560 –> 00:06:13,840
احراز هویت شده است،
174
00:06:13,840 –> 00:06:15,600
در غیر این صورت
175
00:06:15,600 –> 00:06:17,520
این چیزی است که آنها چیزی شبیه به آن را می بینند،
176
00:06:17,520 –> 00:06:19,039
177
00:06:19,039 –> 00:06:21,039
بنابراین نکته بعدی البته
178
00:06:21,039 –> 00:06:23,440
حوزه محتوای اصلی است و اینکه چگونه می خواهیم به
179
00:06:23,440 –> 00:06:24,800
این موضوع نزدیک شویم،
180
00:06:24,800 –> 00:06:27,039
این به ما بینشی در مورد
181
00:06:27,039 –> 00:06:30,400
برخی از ایده های کلی در مورد چگونگی ارائه می دهد.
182
00:06:30,400 –> 00:06:32,160
بوت استرپ کار می کند، بنابراین ما می خواهیم
183
00:06:32,160 –> 00:06:34,160
ادامه دهیم و کلاس div را برابر با
184
00:06:34,160 –> 00:06:36,880
کانتینر انجام دهیم،
185
00:06:37,759 –> 00:06:39,280
186
00:06:39,280 –> 00:06:41,600
بنابراین این ظرف اولیه است
187
00:06:41,600 –> 00:06:43,840
که در اطراف چیزها قرار خواهد گرفت
188
00:06:43,840 –> 00:06:46,720
اکنون می توانید از کانتینر کلاسیک یا
189
00:06:46,720 –> 00:06:49,840
مایع ظرف استفاده کنید،
190
00:06:50,400 –> 00:06:52,479
هر دوی اینها برای ما بسیار گویاست.
191
00:06:52,479 –> 00:06:53,280
192
00:06:53,280 –> 00:06:56,000
پس از انجام این کار، ما یک کلاس از ردیف را اعلام می کنیم
193
00:06:56,000 –> 00:06:57,120
194
00:06:57,120 –> 00:06:58,000
و سپس می رویم و
195
00:06:58,000 –> 00:07:00,479
یک کلاس از ستون را اعلام می کنیم،
196
00:07:00,479 –> 00:07:02,319
نگران نباشید، من هر یک از این موارد را توضیح می دهم
197
00:07:02,319 –> 00:07:03,440
198
00:07:03,440 –> 00:07:04,800
و آن را در اطراف قرار می دهیم
199
00:07:04,800 –> 00:07:07,680
بلوک جایگزین محتوای بلوک
200
00:07:07,680 –> 00:07:10,080
ما و بنابراین اگر اکنون به محتوای خود نگاه کنیم و
201
00:07:10,080 –> 00:07:12,639
آن را به روز کنیم شروع به رساندن اطلاعات ما به
202
00:07:12,639 –> 00:07:14,240
مقدار کمی درست می کند،
203
00:07:14,240 –> 00:07:16,160
بنابراین اگر کمی بزرگنمایی کنم، حداقل
204
00:07:16,160 –> 00:07:17,759
دیدن آنچه در حال رخ دادن است کمی آسان تر
205
00:07:17,759 –> 00:07:19,599
خواهد بود.
206
00:07:19,599 –> 00:07:22,080
روی صفحه نمایش من و بنابراین اگر
207
00:07:22,080 –> 00:07:23,919
این را باز کنم و آن
208
00:07:23,919 –> 00:07:26,400
را ببندم، اتفاقی در حال رخ دادن است،
209
00:07:26,400 –> 00:07:29,360
بنابراین این ستون در اینجا نشان می دهد که چگونه یک
210
00:07:29,360 –> 00:07:32,160
سطر شکسته می شود، اگر فکر می کنید یک ردیف
211
00:07:32,160 –> 00:07:35,199
مانند یک صفحه گسترده اکسل است، هر سطر
212
00:07:35,199 –> 00:07:38,080
تا 12 عدد دارد. ستونها و بنابراین ما
213
00:07:38,080 –> 00:07:41,039
میتوانیم بهطور پیشفرض از همه 12 ستون استفاده
214
00:07:41,039 –> 00:07:43,360
کنیم، اگر فقط ستون را بدون
215
00:07:43,360 –> 00:07:45,199
عدد قرار دهید، دقیقاً همان کاری است که میخواهد
216
00:07:45,199 –> 00:07:47,599
انجام دهد،
217
00:07:47,599 –> 00:07:49,919
اگر تصمیم دارید که میخواهید یک
218
00:07:49,919 –> 00:07:53,120
ستون باشد، میتوانید این کار را انجام دهید، از همه آن ستونها استفاده کنید. و به طور پیشفرض
219
00:07:53,120 –> 00:07:55,919
فقط یک ستون خواهد بود
220
00:07:55,919 –> 00:07:58,240
و زمانی که brea کنیم کاملاً واضح خواهد بود
221
00:07:58,240 –> 00:08:00,960
آن را پایین بیاورید و به
222
00:08:00,960 –> 00:08:03,039
یک ستون
223
00:08:03,039 –> 00:08:05,680
در داخل یک برنامه
224
00:08:05,680 –> 00:08:07,199
تلفن همراه نگاه کنید یا به شکلی نگاه کنید که نسخه موبایلی
225
00:08:07,199 –> 00:08:10,960
آن شبیه به آن است که خواندن آن واقعاً سخت است،
226
00:08:10,960 –> 00:08:12,560
بنابراین آنچه می خواهید
227
00:08:12,560 –> 00:08:15,360
انجام دهید این است که آن را درست باز کنید و احتمالاً در
228
00:08:15,360 –> 00:08:16,800
حال انجام است. 12 باشد
229
00:08:16,800 –> 00:08:18,400
و سپس به این ترتیب است که در واقع
230
00:08:18,400 –> 00:08:20,160
تمام طول می شود،
231
00:08:20,160 –> 00:08:21,599
بنابراین فرض کنید برای مثال شما آن را
232
00:08:21,599 –> 00:08:23,680
می خواستید نیمی از پیوند
233
00:08:23,680 –> 00:08:26,400
ستون 6، نیمی از
234
00:08:26,400 –> 00:08:27,599
آنجا است
235
00:08:27,599 –> 00:08:29,680
و بنابراین وقتی آن را تجزیه می کنم همیشه
236
00:08:29,680 –> 00:08:32,799
به سمت راست شش پایین می آید، بنابراین همیشه
237
00:08:32,799 –> 00:08:35,599
در بنابراین، مهم نیست که مرورگر چقدر بزرگ باشد،
238
00:08:35,599 –> 00:08:37,919
به همان اندازه بزرگ به نظر می رسد،
239
00:08:37,919 –> 00:08:39,519
بنابراین یک چیز دیگر به نام
240
00:08:39,519 –> 00:08:41,839
نقاط شکست وجود دارد که اگر بخواهم
241
00:08:41,839 –> 00:08:45,040
در نقطه ای شکسته و ساخت