سلام مهمان گرامی ، خوش آمدید. آیا این نخستین بازدید شماست ؟ وارد شده یا عضو شوید

انجمن های تخصصی علوم رایانه و هنرهای دیجیتال


آموزش افتر افکت





آموزش بوت استرپ – قسمت دوم
زمان کنونی: 25-05-2017، 01:56 AM
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: developzoom
آخرین ارسال: developzoom
پاسخ 1
بازدید 266
محبوب کنید:

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش بوت استرپ – قسمت دوم
#1
در قسمت اول از سری آموزش بوت استرپ در سایت *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* در مورد تاریخچه و ایجاد اولین صفحه توسط فریمورک بوت استرپ صحبت کردیم.
در قسمت دوم سراغ استانداردهای صفحه بندی در بوت استرپ می رویم. با ما همراه باشید.

[تصویر:  developzoom-bootstrap.jpg]


سیستم صفحه بندی بوت استرپ

سیستم صفحه بندی بوت استرپ حداکثر ۱۲ ستون در یک صفحه را جایگذاری می کند.
اگر شما نمی خواهید از هر ۱۲ ستون به صورت جداگانه استفاده کنید می توانید با یکی کردن هر چند تا ازستون ها که می خواهید، ستون های بزرگتری داشته باشید.
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*

[تصویر:  bootstrap2.png]
این سیستم ریسپانسیو است و در سایزهای متفاوت قابلیت تغییر اندازه ستون ها و جابجایی به صورت اتوماتیک را داراست.
بوت استرپ برای این سیستم از ۴ کلاس css استفاده می کند:
xs برای موبایل
sm برای تبلت
md برای صفحات دسکتاپ در سایز معمولی
lg برای صفحات دسکتاپ در سایز بزرگ
شما برای انعطاف بیشتر می توانید از چند کلاس برای یک div استفاده کنید.
یک مثال برای بهتر متوجه شدن این سیستم برایتان میزنیم:

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35





































...

در مثال بالا ابتدا با کلاس row یک ردیف ایجاد می کنیم بعد به تعداد دلخواه در آن ستون قرار می دهیم(با کلاس “.col-*-*”).
توجه داشته باشید که اعدادی که برای اندازه ستون ها در نظر می گیرید بیشتر از ۱۲ نباید باشد(جمع اعداد).
به مثال زیر دقت کنید که نحوه ساخت سه ستون هم اندازه با این سیستم را نشان می دهد:
[تصویر:  bootstrap.jpg]
کد مثال بالا:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17






.col-sm-4





.col-sm-4





.col-sm-4



در مثال زیر نمایش دو ستون با اندازه متفاوت را خواهیم داشت:
[تصویر:  bootstrap1.jpg]
کد مثال بالا:



1
2
3
4
5
6
7
8
9
10
11
12






.col-sm-4





.col-sm-8



این آموزش برای شروع کار با سیستم صفحه بندی بوت استرپ بود در ادامه با مباحث پیشرفته تر در خدمت شما خواهیم بود.

منبع : *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  دانلود آموزش زبان برنامه نویسی PHP ali_aot 1 1,941 20-12-2016، 05:59 PM
آخرین ارسال: satar660
  آموزش بوت استرپ – قسمت اول developzoom 0 310 20-05-2016، 08:39 PM
آخرین ارسال: developzoom
  آموزش php 8908183 0 423 16-03-2016، 02:36 PM
آخرین ارسال: 8908183
  آموزش گام به گام پی اچ پی php توضیحات بیشتر در مورد دستورات شرطي if، elseif و switch Mohsen Omidvar 0 1,650 01-02-2014، 04:30 PM
آخرین ارسال: Mohsen Omidvar
  آموزش گام به گام پی اچ پی php Mohsen Omidvar 2 2,899 01-01-2014، 05:01 PM
آخرین ارسال: Mohsen Omidvar
  دانلود رایگان آموزش برنامه نویسی SQL در PHP ali_aot 0 1,857 04-10-2013، 12:15 PM
آخرین ارسال: ali_aot

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان