انجمن های تخصصی علوم رایانه و هنرهای دیجیتال
  • صفحه اصلی
  • جستجو
  • لیست اعضا
  • تقویم
  • راهنما




سی جی آریا

رسانه تخصصی آموزش هنرهای دیجیتال



ورود به انجمن ثبت نام کنید
ورود
نام کاربری:
گذرواژه‌: گذرواژه‌تان را فراموش کرده‌اید؟
 

Home انجمن های تخصصی علوم رایانه و هنرهای دیجیتال رایانه برنامه نویسی | طراحی وب برنامه نویسی پی اچ پی | PHP آموزش بوت استرپ – قسمت دوم

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
حالت موضوعی
آموزش بوت استرپ – قسمت دوم
developzoom آفلاین
عضو سایت
*
ارسال‌ها: 3

موضوع‌ها: 3
تاریخ عضویت: Apr 2016
اعتبار: 0
سپاس ها 0
سپاس شده 1 بار در 1 ارسال
#1
03-06-2016، 08:37 PM
در قسمت اول از سری آموزش بوت استرپ در سایت *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* در مورد تاریخچه و ایجاد اولین صفحه توسط فریمورک بوت استرپ صحبت کردیم.
در قسمت دوم سراغ استانداردهای صفحه بندی در بوت استرپ می رویم. با ما همراه باشید.

[تصویر:  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 4,848 20-12-2016، 05:59 PM
آخرین ارسال: satar660
  آموزش بوت استرپ – قسمت اول developzoom 0 2,452 20-05-2016، 08:39 PM
آخرین ارسال: developzoom
  آموزش php 8908183 0 2,222 16-03-2016، 02:36 PM
آخرین ارسال: 8908183
  آموزش گام به گام پی اچ پی php توضیحات بیشتر در مورد دستورات شرطي if، elseif و switch Mohsen Omidvar 0 3,709 01-02-2014، 04:30 PM
آخرین ارسال: Mohsen Omidvar
  آموزش گام به گام پی اچ پی php Mohsen Omidvar 2 7,759 01-01-2014، 05:01 PM
آخرین ارسال: Mohsen Omidvar
  دانلود رایگان آموزش برنامه نویسی SQL در PHP ali_aot 0 3,712 04-10-2013، 12:15 PM
آخرین ارسال: ali_aot

  • مشاهده‌ی نسخه‌ی قابل چاپ
پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 2 مهمان
مکان تبلیغ شما
تمامی حقوق این سایت مربوط به انجمن های تخصصی علوم رایانه و هنرهای دیجیتال میباشد