تبلیغات
وبلاگ الهام - آموزش بوت استرپ -قسمت دوم
 
وبلاگ الهام
 
 
جمعه 14 خرداد 1395 :: نویسنده : الهام کشاورز
در قسمت اول از سری آموزش بوت استرپ در سایت آموزش برنامه نویسی در مورد تاریخچه و ایجاد اولین صفحه توسط فریمورک بوت استرپ صحبت کردیم.

در قسمت دوم سراغ استانداردهای صفحه بندی در بوت استرپ می رویم. با ما همراه باشید.

 

بوت استرپ

 


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

 

bootstrap2

 

این سیستم ریسپانسیو است و در سایزهای متفاوت قابلیت تغییر اندازه ستون ها و جابجایی به صورت اتوماتیک را داراست.
بوت استرپ برای این سیستم از ۴ کلاس 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
<div class="row">
 
 
<div class="col-*-*">div>
 
 
div>
 
 
 
 
<div class="row">
 
 
<div class="col-*-*">div>
 
 
 
 
<div class="col-*-*">div>
 
 
 
 
<div class="col-*-*">div>
 
 
div>
 
 
 
 
<div class="row">
  ...
div>

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

بوت استرپ

کد مثال بالا:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row">
 
 
<div class="col-sm-4">.col-sm-4div>
 
 
 
 
<div class="col-sm-4">.col-sm-4div>
 
 
 
 
<div class="col-sm-4">.col-sm-4div>
 
 
div>

در مثال زیر نمایش دو ستون با اندازه متفاوت را خواهیم داشت:

بوت استرپ

کد مثال بالا:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="row">
 
 
<div class="col-sm-4">.col-sm-4div>
 
 
 
 
<div class="col-sm-8">.col-sm-8div>
 
 
div>

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

منبع : 

          آموزش برنامه نویسی

         آموزش طراحی سایت

         آموزش وردپرس





نوع مطلب :
برچسب ها :
لینک های مرتبط :


چهارشنبه 26 اردیبهشت 1397 08:18 ق.ظ
I like the helpful information you provide in your articles.
I will bookmark your weblog and check again here frequently.
I am quite certain I will learn plenty of new stuff right here!
Best of luck for the next!
جمعه 21 آبان 1395 08:26 ب.ظ
سلام خیلی وبلاگ زیبایی دارید، خیلی لذت بردم از وبلاگتون، اگه دوست داشتید خوشحال میشم باهم تبادل لینک داشته باشیم
پرتال تبادل لینک رایگان ما دارای بیش از 12000 بازدید است، به آسانی لینک خودتون را ثبت کنید و بازدید سایت خودتون و ورودی گوگل سایت یا وبلاگ خودتون را افزایش بدید
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


درباره وبلاگ


دوستان عزیز لطفا نظراتتون رو با ما در میان بگذارید

مدیر وبلاگ : الهام کشاورز
نویسندگان
جستجو

آمار وبلاگ
کل بازدید :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
تعداد نویسندگان :
تعداد کل پست ها :
آخرین بازدید :
آخرین بروز رسانی :