close
آخرین مطالب
  • تبلیغ شما در اینجا
  • طراحی سایت شخصی
  • طراحی سایت فروشگاهی
  • طراحی سیستم وبلاگدهی
  • سیستم سایت ساز اسلام بلاگ
  • مگا برد - پلتفرم خرید اینترنتی قطعات موبایل مگابرد
  • loading...
    YourAds Here YourAds Here

    وبلاگ عالی برای همه

    دوستان عزیز در این وبلاگ در هر زمینه ای مطلب پیدا میکنید

    بازدید : 214
    جمعه 14 خرداد 1395 زمان : 21:46

    در قسمت اول از سری آموزش بوت استرپ در سایت آموزش برنامه نویسی در مورد تاریخچه و ایجاد اولین صفحه توسط فریمورک بوت استرپ صحبت کردیم.

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

    بوت استرپ

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

    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>

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

    منبع :

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

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

    آموزش وردپرس

    Dont even ahead swtor credits
    نظرات این مطلب

    تعداد صفحات : 8

    درباره ما
    Profile Pic
    با سلام خدمت دوستان عزیز امیدوارم که از مطالبی که در این وبلاگ منتشر میکنم راضی باشید
    لطفا نظراتتون رو بگید
    موفق باشید دوستان
    اطلاعات کاربری
    نام کاربری :
    رمز عبور :
  • فراموشی رمز عبور؟
  • خبر نامه


    معرفی وبلاگ به یک دوست


    ایمیل شما :

    ایمیل دوست شما :



    چت باکس




    captcha


    آمار سایت
  • کل مطالب : 93
  • کل نظرات : 1
  • افراد آنلاین : 1
  • تعداد اعضا : 241
  • بازدید امروز : 47
  • بازدید کننده امروز : 48
  • باردید دیروز : 20
  • بازدید کننده دیروز : 7
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 170
  • بازدید ماه : 69
  • بازدید سال : 4964
  • بازدید کلی : 357762
  • کدهای اختصاصی