نمایش نتایج 1 تا 28 از 28

نام تاپیک: تنها راه ریسپانسیو

  1. #1
    کاربر دائمی آواتار jamejam123
    تاریخ عضویت
    آبان 1390
    محل زندگی
    زنجان
    پست
    399

    تنها راه ریسپانسیو

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


    @media only screen and (max-width:570px) and (min-width:470px){

    .galery{
    height:550px;
    }


    aside{
    height:480px;
    background:url(../images/backback.jpg);
    }


    آیا تنها راه ریسپانسیو کردن استفاده از مدیا کوئری ها هستش.
    آیا طراحان وب برای ریسپانسیو کردن فقط از این روش استفاده میکنن.
    به جای این روش،روش های دیگری هم وجود دارد.
    آیا علاوه بر اینکه از مدیا کوئری ها استفاده میکنن تغیراتی هم تو کد html میدن یا نه.
    ممنون

  2. #2
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    با سلام
    خیر تنها راه رسپانسیو کردن استفاده از مدیا ها نیست و فریم ورک هایی وجود داره برای راحتی انجام اینکار
    مثل بوت استرپ http://getbootstrap.com/
    و یا فاندیشن http://foundation.zurb.com/

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

  3. #3
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    توی کد html هم باید تغییرات ایجاد کنی. باید از سیستم گرید بندی استفاده کنی. ساختار صفحه رو با گرید می سازی. این طور که من فهمیدم راحت ترین راه ریسپانسیو کردن سایت، استفاده از یک فریم ورک مثل بوت استرپ هست.
    البته اینم بگم که توی بوت استرپ از مدیا کوئری استفاده شده. یعنی در هر حال باید از مدیا کوئری استفاده کرد. منتها به این دلیل میگن استفاده از بوت استرپ ریسپانسیو کردن رو راحت تر می کنه که قبلا همه ی این مدیا کوئری ها در بوت استرپ تست شده و قابل اطمینان هست. اگه بخوایم واسه سایتمون خودمون بیایم از اول مدیا کوئری ها رو بنویسیم هم زمان بیشتری می گیره (نوشتن + تست) هم کار سخت تر میشه. ضمن اینکه فقط مدیاکوئری در ریسپانسیو کردم مطرح نیست. تغییرات دیگه ای هم باید انجام داد. خیلی از چبزهایی که لازمه توی خود فریم ورک بوت استرپ نوشته شده و کارو برای ما آسون کرده. تازه برای اولین بار که از بوت استرپ می خوای استفاده کنی خیلی هم آسون نیست چون هیچ آشنایی با گرید و ... نداری. من یه سایت طراحی کرده بودم و می خواستم ریسپانسیوش کنم. گفتن اگه بخوای خودت مدیاکوئری بنویسی و همه چیزو خودت انجام بدی حدود یه ماه طول می کشه و اگه بخوای از بوت استرپ استفاده کنی یه هفته. می بینید که تفاوت زیاده.
    آشنایی با گرید:
    http://nardebaan.ir/15207-%D8%A2%D8%...C-%D9%88%D8%A8
    آخرین ویرایش به وسیله e_a_23 : چهارشنبه 27 فروردین 1393 در 23:24 عصر

  4. #4
    کاربر دائمی آواتار jamejam123
    تاریخ عضویت
    آبان 1390
    محل زندگی
    زنجان
    پست
    399

    نقل قول: تنها راه ریسپانسیو

    تشکر فراوان از شما دوست عزیز
    مطالبی که معرفی کردین رو خوندم
    یه چند تا سوال واسم پیش اومد
    اول:
    منظور از grid بندی html چیه؟
    آیا تو grid بندی باید ساختار html رو عوض کنیم (اولویت به تگها بدیم) یا
    تو css کد هایی بنویسیم تا ساختار html عوض شه.
    منظور از grid مگه همون شبکه های توری نیست که باید تو ذهنمون نگه داریم و سایتمون شبیه اون ها شه.
    فریم ورک ها چه جوری صفحه رو گرید بندی میکنن.
    میشه از گرید بندی تو html یه مثال ساده بزنید.
    بی نهایت ممنون

  5. #5

    نقل قول: تنها راه ریسپانسیو

    به این کد های من یه نگا بندازید.
    من تازه شروع کردم ریسپانسیو کردن رو یاد بگیرم.
    خیلی ها بهم گفتن برو دنبال فریم ورک ها ولی ایتدا میخوام روش دستی رو یاد بگیرم.
    به این کد های من یه نگا بندازید.
    به نظرتون ریسپانسیو شده هستش.
    آلان تو گرید بندی باید ساختار کد های html من عوض شه یا تو css تو مدیا کوئری ها چیزی بنویسم.
    گرید بندی مگه تنها واسه فتوشاپ نیست!!!
    به جای گرید بندی چه چیزایی رو تو ریسپانسیو رعایت میکنن؟



    کد HTML:
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body{
        margin:0px;
        padding:0px;
    }
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:35px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:60px;
        text-align:right;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    header{
        margin:auto;
        width:100%;
        max-width:900px;
        background:#F96;
        height:80px;
        padding-top:30px;
    }
    h1{
        margin:0px;
        padding:0px;
        text-align:center;
        }
    h3{
        margin:0px;
        padding:0px;
        text-align:center;
    }
    #all{
        margin:auto;
        width:100%;
        max-width:900px;
        text-align:right;
        background:#FCF;
    }
    footer{
        margin:auto;
        background:#333;
        width:100%;
        max-width:900px;
        color:#FFF;
        text-align:center;
        padding:0px;
    }
    
    @media only screen and (min-width:600px) and (max-width:750px){
    }
    
    @media only screen and (min-width:450px) and (max-width:599px){
    
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:70px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:60px;
        text-align:right;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    
    }
    
    @media only screen and (min-width:370px) and (max-width:449px){
    
    
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:70px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:60px;
        text-align:right;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    }
    
    
    
    @media only screen and (min-width:200px) and (max-width:369px){
    
    h1{
        font-size:26px;
        }
    h3{
    font-size:19px;    
    }
    
    #all{
        background:#9FC;
    }
    
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:230px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:360px;
        text-align:center;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    }
    
    </style>
    </head>
    <body>
    
    <nav>
    <ul>
    
    <li> <a href="#"> خانه  </a> </li>
    <li> <a href="#">گالری  </a> </li>
    <li> <a href="#">درباره ما </a> </li>
    <li> <a href="#">تماس با ما  </a> </li>
    <li> <a href="#"> خانه  </a> </li>
    <li> <a href="#">گالری  </a> </li>
    <li> <a href="#">درباره ما </a> </li>
    <li> <a href="#">تماس با ما  </a> </li>
    
    </ul>
    </nav>
    
    <header>
    <h1>
     اینجا هدر سایت هستش
    </h1>
    <h3>این سایت  ریسپانسیو هستش</h3>
    </header>
    
    <div id="all">
    آرایه دوبعدی دارای چند سطر و چند ستون می باشد. اولین بعد آرایه بیانگر سطرها و دومین بعد آن بیانگر ستونهاست. همانطور که از شکل بالا پیداست به ترتیب از اولین سطر شروع کرده و تا انتهای ستونهای آن سطر را اندیس گذاری کرده و سپس به سطر بعد رفته و به اندیس گذاری تا آخرین ستون سطر مربوطه می پردازیم و این عمل را تا انتها برای اندیس گذاری تکرار می کنیم. سمت راست شکل هم کاملا گویاست که عناصر آرایه به چه ترتیبی در حافظه کامپیوتر قرار می گیرند. در ادامه به نحوه تعریف این نوع از آرایه و بحث پیرامون آن می پردازیم . 
    
    برنامه C++‎ بالا با استفاده از توابع و ارسال آرایه بعنوان پارامتر تابع، کوچکترین عدد آرایه را به ما نشان می دهد. برای این کار لازم است ابتدا عناصر آرایه را با یک دستور حلقه تکرار for مقدار دهی کنیم و سپس اولین عنصر را برابر با minNum بگیریم. سپس با یک حلقه for دیگر آنرا با دیگر عناصر آرایه مقایسه می کنیم، اگر مقداری کمتر از آن باشد در متغیر minNum ریخته می شود و اگر نباشد پس خود اولین عنصر از همه کوچکتر است. در دستور حلقه تکرار for دوم به این دلیل count را از 1 شروع کردیم چون در بالا عنصر با اندیس صفرم آرایه را به عنوان کوچکترین عنصر در نظر گرفتیم و دیگر احتیاجی نیست آنرا دوباره با خودش مقایسه نماییم. عبارت const که در جلوی متغیر k آمده است به کامپایلر می گوید که مقدار این متغیر ثابت است و در طول برنامه تغییری نمی کند و نوشتن هر دستوری مبنی بر تغییر مقدار آن باعث بروز خطا در برنامه خواهد شد . 
    
    </div>
    <footer>
    اینجام فوتر سایته
    </footer>
    </body>
    </html>
    

  6. #6
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط jamejam123 مشاهده تاپیک
    تشکر فراوان از شما دوست عزیز
    مطالبی که معرفی کردین رو خوندم
    یه چند تا سوال واسم پیش اومد
    اول:
    منظور از grid بندی html چیه؟
    آیا تو grid بندی باید ساختار html رو عوض کنیم (اولویت به تگها بدیم) یا
    تو css کد هایی بنویسیم تا ساختار html عوض شه.
    منظور از grid مگه همون شبکه های توری نیست که باید تو ذهنمون نگه داریم و سایتمون شبیه اون ها شه.
    فریم ورک ها چه جوری صفحه رو گرید بندی میکنن.
    میشه از گرید بندی تو html یه مثال ساده بزنید.
    بی نهایت ممنون
    ببینید فریم ورک های گرید بندی در اصل از همون مدیا کوئری ها استفاده میکنند و تغییری رو لازم نیست در داخل html و css بدید.
    مثلا او لینکی که گذاشتم رو ببینید.
    اون یک نمونه ساده از فریم ورکه گرید بندیه.
    مثلا اگر قرار هست محتوای صفحتون 75% عرض رو بگیره شما فقط کافیه بهش کلاس bit-75 رو بدبد.
    شما خودتون هم میتونید فریم ورکی رو بنویسید ولی خب وقتی هست چه نیازیه

  7. #7
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط olampiad مشاهده تاپیک
    به این کد های من یه نگا بندازید.
    من تازه شروع کردم ریسپانسیو کردن رو یاد بگیرم.
    خیلی ها بهم گفتن برو دنبال فریم ورک ها ولی ایتدا میخوام روش دستی رو یاد بگیرم.
    به این کد های من یه نگا بندازید.
    به نظرتون ریسپانسیو شده هستش.
    آلان تو گرید بندی باید ساختار کد های html من عوض شه یا تو css تو مدیا کوئری ها چیزی بنویسم.
    گرید بندی مگه تنها واسه فتوشاپ نیست!!!
    به جای گرید بندی چه چیزایی رو تو ریسپانسیو رعایت میکنن؟



    کد HTML:
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body{
        margin:0px;
        padding:0px;
    }
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:35px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:60px;
        text-align:right;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    header{
        margin:auto;
        width:100%;
        max-width:900px;
        background:#F96;
        height:80px;
        padding-top:30px;
    }
    h1{
        margin:0px;
        padding:0px;
        text-align:center;
        }
    h3{
        margin:0px;
        padding:0px;
        text-align:center;
    }
    #all{
        margin:auto;
        width:100%;
        max-width:900px;
        text-align:right;
        background:#FCF;
    }
    footer{
        margin:auto;
        background:#333;
        width:100%;
        max-width:900px;
        color:#FFF;
        text-align:center;
        padding:0px;
    }
    
    @media only screen and (min-width:600px) and (max-width:750px){
    }
    
    @media only screen and (min-width:450px) and (max-width:599px){
    
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:70px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:60px;
        text-align:right;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    
    }
    
    @media only screen and (min-width:370px) and (max-width:449px){
    
    
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:70px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:60px;
        text-align:right;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    }
    
    
    
    @media only screen and (min-width:200px) and (max-width:369px){
    
    h1{
        font-size:26px;
        }
    h3{
    font-size:19px;    
    }
    
    #all{
        background:#9FC;
    }
    
    nav{
        margin:auto;
        max-width:900px;
        width:100%;
        height:230px;
        background:#FC0;
        border-radius:0px 0px 3px 3px;
    }
    nav ul{
        margin:0px;
        padding:0px;
        width:100%;
        list-style:none;
    }
    
    nav ul li a:link,nav ul li a:visited{
        float:right;
        background:#FF9;
        padding:4px;
        margin-top:3px;
        border-radius:4px;
        color:#600;
        max-width:360px;
        text-align:center;
        font-size:15px;
        width:100%;
        text-decoration:none;
        margin-right:3px;
        margin-left:3px;
    }
    }
    
    </style>
    </head>
    <body>
    
    <nav>
    <ul>
    
    <li> <a href="#"> خانه  </a> </li>
    <li> <a href="#">گالری  </a> </li>
    <li> <a href="#">درباره ما </a> </li>
    <li> <a href="#">تماس با ما  </a> </li>
    <li> <a href="#"> خانه  </a> </li>
    <li> <a href="#">گالری  </a> </li>
    <li> <a href="#">درباره ما </a> </li>
    <li> <a href="#">تماس با ما  </a> </li>
    
    </ul>
    </nav>
    
    <header>
    <h1>
     اینجا هدر سایت هستش
    </h1>
    <h3>این سایت  ریسپانسیو هستش</h3>
    </header>
    
    <div id="all">
    آرایه دوبعدی دارای چند سطر و چند ستون می باشد. اولین بعد آرایه بیانگر سطرها و دومین بعد آن بیانگر ستونهاست. همانطور که از شکل بالا پیداست به ترتیب از اولین سطر شروع کرده و تا انتهای ستونهای آن سطر را اندیس گذاری کرده و سپس به سطر بعد رفته و به اندیس گذاری تا آخرین ستون سطر مربوطه می پردازیم و این عمل را تا انتها برای اندیس گذاری تکرار می کنیم. سمت راست شکل هم کاملا گویاست که عناصر آرایه به چه ترتیبی در حافظه کامپیوتر قرار می گیرند. در ادامه به نحوه تعریف این نوع از آرایه و بحث پیرامون آن می پردازیم . 
    
    برنامه C++‎‎ بالا با استفاده از توابع و ارسال آرایه بعنوان پارامتر تابع، کوچکترین عدد آرایه را به ما نشان می دهد. برای این کار لازم است ابتدا عناصر آرایه را با یک دستور حلقه تکرار for مقدار دهی کنیم و سپس اولین عنصر را برابر با minNum بگیریم. سپس با یک حلقه for دیگر آنرا با دیگر عناصر آرایه مقایسه می کنیم، اگر مقداری کمتر از آن باشد در متغیر minNum ریخته می شود و اگر نباشد پس خود اولین عنصر از همه کوچکتر است. در دستور حلقه تکرار for دوم به این دلیل count را از 1 شروع کردیم چون در بالا عنصر با اندیس صفرم آرایه را به عنوان کوچکترین عنصر در نظر گرفتیم و دیگر احتیاجی نیست آنرا دوباره با خودش مقایسه نماییم. عبارت const که در جلوی متغیر k آمده است به کامپایلر می گوید که مقدار این متغیر ثابت است و در طول برنامه تغییری نمی کند و نوشتن هر دستوری مبنی بر تغییر مقدار آن باعث بروز خطا در برنامه خواهد شد . 
    
    </div>
    <footer>
    اینجام فوتر سایته
    </footer>
    </body>
    </html>
    
    ببینید به نظر من شما مفهوم رسپانسیو دیزاین رو متوجه نشدید.
    به طور خیلی ساده شما با استفاده از مدیاکوئری ها به مرورگر اعلام میکنید که در سایز x المنت y این استایل رو داشته باشه همین. دیگه این بستگی به شما داره که سایتتون رو در ابعاد استاندارد مختلف چک کنید و هرکجا که سایتتون نیاز به ویرایش داشت در همون سایز از مدیا کوئری ها استفاده کنید. درواقع مدیاها یک نوع نقطه شکست "Break point" هستند.
    ضمنا گرید بندی یک مفهومه و فقط در فتوشاپ کاربرد نداره. گرید بندی در طراحی چاپی، تایپوگرافی،طراحی تمپلیت سایت و .....
    درواقع گرید بندی یعنی مشخص کردن ساختار و نحوه چیدمان المنت ها. حالا در هر کجا که بود فتوشاپ یا سایت.
    نمیدونم تونستم منظور رو برسونم یا نه ولی پیشنهاد میکنم حتما در مورد طراحی رسپانسیو در اینترنت جست و جو کنید. (منابع انگلیسی ترجیحا)

  8. #8
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    توی html باید از ساختار گرید استفاده کنید. همونطور که توی مقاله خوندید یکی از سیستم های گرید بندی 12 تایی است. من با این سیستم براتون مثال می زنم.
    مثلا توی html جایی که می خوایم دایوی با عرض 100% داشته باشیم، درون اون دایو، یه گرید 12 تایی قرار می دیم.مثلا فرض کنید این کار رو می خوایم واسه header انجام بدیم:
    کد HTML:
    <div class="header">            <div class="col-lg-12 img-responsive">
     </div>        </div>
    وقتی از بوت استرپ استفاده می کنیم یه سری کلاس هایی هست که می تونیم به راحتی ازشون استفاده کنیم مثل همین img-responsive که در هدر ازش استفاده کردم. این کلاس در فایل استایل شیت بوت استرپ تعریف شده و ما به راحتی می تونیم توی html ازش استفاده کنیم. کاری که این کلاس انجام می ده اینه که عکس ما رو ریسپانسیو می کنه یعنی با کوچک شدن سایز مرورگر، عکس هم متناسب با سایز مرورگر کوچک می شه.
    کلاس های خیلی زیاده هست واسه انجام کارهای مختلف. پیشنهاد می کنم حتما فیلم آموزشی سایت لیندا رو دانلود کنید و کار کنید باهاش تا دستتون راه بیفته. مثال های عملی داره که خیلی مفیده.
    نکته دیگه در کدهای html که می تونم مختصر توضیح بدم واستون اینه که: فرض کنید یه دایو داریم که می خوایم تقسیمش کنیم به دو تا دایو که کنار هم قرار می گیرن. در اینجا باید جمع این دو تا دایو 12 شه:
    کد HTML:
    <div class="middle">            <div class="col-lg-12"><div class="col-lg-4 pull-right">
    <div class="ReserveForm">
    </div>                </div>
    <div class="col-lg-8">
    <div class="slider">
     </div>            </div>
    </div>        </div>
    توضیح: کلاس middle یه دایو با عرض صد در صد هست که با دادن کلاس col-lg-12 این عرض صد در صد رو واسش مشخص می کنیم.
    توی این دایو (که کلاس middle بهش داده شده) دو تا دایو می خوایم بذاریم با کلاس های ReserveForm و slider. باید جمع col های این دو تا دایو 12 شه. بنا به هر نسبتی که می خواید این دو تا دایو از نظر عرض داشته باشن،دو تا عدد بهcol هاشون بدین که جمع این دو عدد 12 شه.من به یکی 4 و به دیگری مقدار 8 رو دادم.
    برای جا به جایی دو تا دایو (جابه جایی افقی) از کلاس های push و pull استفاده می شه. البته اون مقاله ورژن پایین تر از 3 بوت استرپ رو بررسی کرده که به جای col-lg از grid استفاده کرده. مفهوم یکسان هست.
    تمام صفحتون رو باید به این صورت گریدبندی کنید.
    نمی دونم چرا کدهای html اینجا به هم می ریزه.
    آخرین ویرایش به وسیله e_a_23 : جمعه 29 فروردین 1393 در 16:43 عصر

  9. #9
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط حمید . ه مشاهده تاپیک
    ببینید فریم ورک های گرید بندی در اصل از همون مدیا کوئری ها استفاده میکنند و تغییری رو لازم نیست در داخل html و css بدید.
    مثلا او لینکی که گذاشتم رو ببینید.
    اون یک نمونه ساده از فریم ورکه گرید بندیه.
    مثلا اگر قرار هست محتوای صفحتون 75% عرض رو بگیره شما فقط کافیه بهش کلاس bit-75 رو بدبد.
    شما خودتون هم میتونید فریم ورکی رو بنویسید ولی خب وقتی هست چه نیازیه
    چرا می گید که تغییری لازم نیست روی html , css بدیم؟

  10. #10
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط e_a_23 مشاهده تاپیک
    چرا می گید که تغییری لازم نیست روی html , css بدیم؟
    به صورت کلی شما نیازی به تغییر ساختار html و css خودتون ندارید وقتی از فریم ورک استفاده میکنید
    مگر اینکه از دید شما افزودن کلاس های css به تکهای html تغییر ساختار به حساب بیاد

  11. #11
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط حمید . ه مشاهده تاپیک
    به صورت کلی شما نیازی به تغییر ساختار html و css خودتون ندارید وقتی از فریم ورک استفاده میکنید
    مگر اینکه از دید شما افزودن کلاس های css به تکهای html تغییر ساختار به حساب بیاد
    استفاده از گرید یعنی تغییر توی ساختار دیگه.

  12. #12

    نقل قول: تنها راه ریسپانسیو

    تشکر
    ببخشین دوستان من ابتدا سراغ فریم ورک ها نمرم.
    میخوام یه چیزایی رو خودم دستی یاد بگیرم
    حالا یه چند تا سوال داشتم.
    سوال اول
    شما این آموزش هارو واسه کسایی که از فریم ورک استفاده میکنه گفتین.
    مثلا کلاس های col-lg 4 و col-lg 8 تو فریم ورک بوت استرپ تعریف شده هستش.
    لذا
    این سوال رو میپرسم ولی ببخشین من نمیخوام ره صد ساله رو یه روزه برم فقط واسم یه سواله
    میخوام دستی یه فریم ورک ساده ریسپانسیو بنویسم
    چه جوری این گرید بندی هارو به اون بفهمونم
    هر گرید معمولا چه اندازه ای میشه
    ممنون

  13. #13
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط olampiad مشاهده تاپیک
    تشکر
    ببخشین دوستان من ابتدا سراغ فریم ورک ها نمرم.
    میخوام یه چیزایی رو خودم دستی یاد بگیرم
    حالا یه چند تا سوال داشتم.
    سوال اول
    شما این آموزش هارو واسه کسایی که از فریم ورک استفاده میکنه گفتین.
    مثلا کلاس های col-lg 4 و col-lg 8 تو فریم ورک بوت استرپ تعریف شده هستش.
    لذا
    این سوال رو میپرسم ولی ببخشین من نمیخوام ره صد ساله رو یه روزه برم فقط واسم یه سواله
    میخوام دستی یه فریم ورک ساده ریسپانسیو بنویسم
    چه جوری این گرید بندی هارو به اون بفهمونم
    هر گرید معمولا چه اندازه ای میشه
    ممنون
    درود
    خوشحالم که این تصمیم رو گرفتید
    این فریم ورک ها فقط و فقط از مدیا ها استفاده میکنند ولا غیر
    البته در بعضی مواقع جاوااسکریپت هم به کمک میاد اما برای گرید بندی تنها css کفایت میکنه.
    من برای شما دو پیشنهاد دارم
    ابتدا اینکه درمورد media query ها تحقیق کنید. کافیه یک جست و جوی کوچیک تو گوگل کنید که کلی مطلب براتون بیاره
    دوم اینکه بعد از اینکه با مدیاها آشنا شدید فایلهای همون فریم ورک ساده گریدبندی که معرفی کردم رو از ابتدا تا انتها مطالعه کنید و با نحوه نوشتن کدها آشنا بشید
    قدم آخر هم فریم ورک خودتون رو بسازید
    موفق باشید

  14. #14
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    کار طولانی ای هست و البته سخت. ضمن اینکه به نظر جالب هم نیست. نظر شخصی خودمه. به هر حال موفق باشید دوست عزیز :)

  15. #15
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    متاسفانه تو ایران فقط استفاده از کارهای دیگران جالبه
    اینکه کسی بخواد اصول چیزی رو یاد بگیره هیچ جذابیتی نداره

  16. #16
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    اتفاقا اصلا منظورم این نبود. متاسفانه توی ایران زود راجع به آدم ها قضاوت می شه. من کلا این کارو جذاب نمی بینم. مثلا نوشتن کدهای جی کوئری واسم جذابه ولی مدیا کوئری به نظرم یه کار تکراری هست. امیدوارم منظورمو خوب رسونده باشم. بعضی چیزها رو اتفاقا خوبه که از آمادش استفاده کنیم. حالا بگذریم که گاهی آدم ذوق داره یه کاریو خودش انجام بده مثل این دوستمون. خود من بعضی برنامه ها رو دوست دارم به جای کپی از نت خودم فکر کنم و بنویسم. خیلی لذت بیشتری داره.

  17. #17
    کاربر دائمی آواتار refugee
    تاریخ عضویت
    آذر 1390
    محل زندگی
    root@server
    پست
    646

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط e_a_23 مشاهده تاپیک
    مثلا نوشتن کدهای جی کوئری واسم جذابه ولی مدیا کوئری به نظرم یه کار تکراری هست.
    مهندس جان از شما دیگه بعیده ...

    وقتی میخواهیم قالبی رو ریسپانسیو کنیم . استفاده از مدیا کوئری ها ضروری است . اونوقت شما میگید تکراری است

    پیشنهاد میکنم یبارم که شده برید وبسایت یوتیوپ (youtube.com) سرچ کنید : how to responsive template شاید بیش از 100 تا فیلم بیاره . تو یک دونه از اون فیلم های اموزشی و مراجع معروف اینترنت بیارید گفته باشن این عمل تکراری و ناشایست است .

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

    حالا تا صبح هم بگم گاو نره ، میگید بدوش ... :|

    اگه واقعا متوجه نمیشید قالب هتل رو بدین من برات ریسپانسیو کنم ببینی .

  18. #18
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    ای بابا. منظورم این بود که درست کردن چیزی شبیه یه فریم ورک می تونه روند تکراری و خسته کننده ای داشته باشه. بازم شاید من اشتباه می کنم. بی خیال این بحث :)

  19. #19

    نقل قول: تنها راه ریسپانسیو

    ببخشین من نمیخواستم بین دوستان جر و بحث بندازم.
    من رفتم کد های css بوت استرپ رو دانلود کردم و دیدم
    کوئری هاش زیاد با کوئری هایی که ما مینویسیم فرق نمکنه.
    فقط تو استفاده از فریم ورک ها باید ساختار سایتمون طبق اونا باشه.
    ممنون

  20. #20
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط olampiad مشاهده تاپیک
    ببخشین من نمیخواستم بین دوستان جر و بحث بندازم.
    من رفتم کد های css بوت استرپ رو دانلود کردم و دیدم
    کوئری هاش زیاد با کوئری هایی که ما مینویسیم فرق نمکنه.
    فقط تو استفاده از فریم ورک ها باید ساختار سایتمون طبق اونا باشه.
    ممنون
    نه جر و بحث نبود که مذاکره و تبادل نظر بود وگرنه همه اینجا باهم دوست و همکار هستیم

  21. #21
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط danial.saeedi مشاهده تاپیک
    تنها را همین نیست.می تونی از جکوری برای ریسپانسیو کردن صفحه استفاده کنی.به این کد نگاه کن:

    $(window).resize(function(){
    if ($(window).width() &lt;= 800){
    // do something here
    }
    });



    پلاگین های زیادی برای ریسپانسیو کردن صفحه وجود دارد.اما استاندارد اینه که از کوئری CSS3 استفاده کنی.
    همه دنبال اینن که از حجم صفحه کم کنند بعد شما میخوای جاوااسکریپت کار کنی !

  22. #22
    کاربر دائمی آواتار qartalonline
    تاریخ عضویت
    فروردین 1391
    محل زندگی
    تبریز
    پست
    1,191

    نقل قول: تنها راه ریسپانسیو

    برای ریسپانسیو کردن، راههای مختلفی وجود داره مثل استفاده از مدیا کوئری ها در css یا استفاده از جی کوئری و جاوا اسکریپت.
    بهتره برای ریسپانسیو کردن از مدیا کوئری استفاده بشه البته ممکنه برخی جاها نشه با مدیا کوئری جواب گرفت در این صورت میتونید از جاوا اسکریپت کمک بگیرید.
    استفاده از فریمورک های آماده هم میتونه بهتر باشه ولی فریمورک ها هم فقط برخی از نیازهای اساسی رو پوشش میدن و برای سفارشی کردن باید کلی کد بنویسید.

  23. #23
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    نقل قول نوشته شده توسط danial.saeedi مشاهده تاپیک
    سلام دوست عزیز
    لطفا بی احترامی نکنید.اوشون سوال کردن که فقط طراحا از کوئری استفاده می کنن یا نه.بعد هم CSS محدوده.خیلی کار ها رو نمی شه با اون کرد.در ضمن من جاوااسکریپت تا حد لازم بلدم.فعلا جاگزینی برای جاوا اسکریپت نیست.

    در ضمن اگه شما بخواین حجم صفحه رو کم کنید،باید راهکار های دیگه انتخاب کنید.

    شاید شما صفحه ای ساده بسازید که توش منو هست و یک مطلب.اما سایت های بزرگ برای امنیت و ... به اون احتیاج دارن.

    بیشتر افراد فکر می کنن که HTML5 فقط تگ video و article و.... هست.اما در واقع این نیست.بلکه امکانات API ان است که این نسخه را شگفت انگیز می کند.API ها با جاوا اسکریپت و DOM نوشته می شن.یک نمونه:
    http://blog.teamtreehouse.com/buildi...r-html5-videos

    من خودم برای ریسپانسیو کردن صفحه از کوئری CSS3 استفاده می کنم.

    لطفا اگر هیچ اگاهی در این ضمینه ندارید،وارد بحث نشید.

    @حمید . ه
    ۱- بی احترامی رو شما دارید میکنید
    ۲- فهمیدیم بلدی سایت بزرگ بنویسی ( منم سایت منو دار دوست دارم و کوچیک اگه اینجوری دوست داری )
    ۳- با این حرفتون که css محدوده کاملا مخالفم
    ۴- اونقدری بلد هستم و به اصطلاح شما آگاهی دارم که بیام اینجا و درمورد مطالبی که از دستم بر میاد کمک دوستان کنم
    ۵- آقای امنیت سایتهای امنیتی جناب عالی رو تمپلیتشون امنیتشون سواره؟
    ۶- امشب از رو API هم یک صفحه مینویسم فردا برات میارم کارت صد آفرین بهم بدی
    ۷- خوش باشی

  24. #24
    کاربر دائمی
    تاریخ عضویت
    شهریور 1388
    محل زندگی
    تهران
    پست
    615

    نقل قول: تنها راه ریسپانسیو

    لطفا بی خودی شلوغ نکنید. دوست عزیز، آقای دانیال سعیدی کسی به شما بی احترامی نکرده. لطفا دیگه ادامه ندید که تاپیک منحرف نشه سر یه سوء تفاهم. ممنونم ازتون. اطلاعات همدیگه رو هم زیر سوال نبریم بهتره.

  25. #25

    نقل قول: تنها راه ریسپانسیو

    تو فریم ورک هایی که مینویسن واسه ریسپانسیو کردن
    یا خود اساتید که واسه ریسپانسیو کردن سایتشون اشتفاده میکنن.
    از چه واحدی برای اندازه دادن دایو ها استفاده میکن.
    از px استفاده میکنن یا %
    ممنون

  26. #26
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    معمولا درصد استفاده میشه

  27. #27

    نقل قول: تنها راه ریسپانسیو

    سلام
    میشه به این قالب یه نگا بندازید
    به تظرتون واسه طراحی این قالب از چه واحدی استفاده کنم؟
    http://upload7.ir/imgs/2014-04/17844265489778412710.png

  28. #28
    کاربر دائمی
    تاریخ عضویت
    تیر 1391
    محل زندگی
    سرزمین پارس
    پست
    153

    نقل قول: تنها راه ریسپانسیو

    سلام
    فرقی نمیکنه که چه قالبی رو میخواید طراحی کنید. برای رسپانسیو از درصد استفاده کنید.
    البته دو واحد دیگه به نام های em و rem هستند که از درصد مناسب ترند.
    درموردشون مطالب زیادی رو میتونید پیدا کنید.
    برای شروع از این ویدیو میتونید کمک بگیرید
    https://www.youtube.com/watch?v=1SyZrqNaamM

تاپیک های مشابه

  1. نحوه راه‌اندازی یک WebApplication بر روی یک هاست؟؟؟
    نوشته شده توسط مهدی کرامتی در بخش مقالات مرتبط با Microsoft .Net Framework
    پاسخ: 184
    آخرین پست: دوشنبه 28 مرداد 1398, 13:27 عصر
  2. نحوه راه اندازی سایت داخلی
    نوشته شده توسط ehsan_ets در بخش شبکه و Networking‌
    پاسخ: 8
    آخرین پست: چهارشنبه 25 خرداد 1390, 23:35 عصر
  3. راه اندازی یک سیستم رای گیری
    نوشته شده توسط در بخش ASP.NET Web Forms
    پاسخ: 14
    آخرین پست: سه شنبه 01 مهر 1382, 18:52 عصر
  4. مشکل در راه اندازی Asp.net
    نوشته شده توسط amuSoheil در بخش ASP.NET Web Forms
    پاسخ: 5
    آخرین پست: پنج شنبه 09 مرداد 1382, 17:13 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •