ably ably برای هدایت شدن به سایت جدید اینجا کلیک کنید

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

آموزش برنامه نویسی وب، اندروید، ویندوز , اسکیوال و...
Tell: 0912 097 5516
| Email: Hello@EduOnline.ir

۳ مطلب با کلمه‌ی کلیدی «آموزش twitter bootstrap» ثبت شده است

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

بسم الله الرحمن الرحیم

آموزش طراحی قالب ریسپانسیو

بخش هشتم (طراحی سایر بخش های قالب با بوت استرپ)

نمایش لیست آموزش های Bootstrap

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

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

 ابتدا باید زیر نوار آبی رنگ یک فضای خاکستری ایجاد کنید، برای اینکار از کد زیر کمک می گیریم


 <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 silverBackground heightBreak light-gray-bg ">
            </div>
        </div>
    </div>

حال باید یک باکس سفید رنگ ایجاد کنیم.


<section class="section whiteBackground clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title">Don't Miss Out Our Offers</h1>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <button type="button" class="btn btn-info">Read More...</button>
                    <button type="button" class="btn btn-info">Read More...</button>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </section>

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

ادامه مطلب...

طراحی قالب واکنش گرا

بسم الله الرحمن الرحیم

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

بخش هفتم (طراحی سایر بخش های قالب با بوت استرپ)

نمایش لیست آموزش های Bootstrap

طراحی قالب واکنش گرا

طبیعتا تا این بخش با معماری بوت استرپ آشنا شده ایم و فهمیده ایم چطور باید از این framework استفاده کنیم. در این بخش ما قسمت های دیگر تصویر Template خود را قدم به قدم پیاده سازی کنیم.




آموزش bootstrap



ادامه مطلب...

آموزش بوت استرپ

بسم الله الرحمن الرحیم

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

بخش اول

نمایش لیست آموزش های Bootstrap

آموزش بوت استرپ


در سال های پیش مشکلاتی زیادی برای طراحی صفحات وب وجود داشت، که از بزرگترین مشکلات می توان نمایش یک سایت در مرورگرهای مختلف و همچنین در دستگاه های مختلف نام برد.
برای طراحی هر سایتی می بایست بسیاری از بخش ها که همیشه تکراری بودند، مجددا پیاده سازی می شد و یا در بهترین حالت کپی شوند، که این مشکلات خودش را داشت.
برای طراحی سایتی که بتواند در Resolution های مختلف نمایش داده شود، روش های زیادی وجود داشت که طبیعتا پیچیده بودند و زمان زیادی را باید صرف آن می کردید. در نهایت هیچگاه نمی توانستیم سایتی داشته باشیم که به زیبایی در دستگاه های مختلفی همچون Mobile, Tablet, Pc با سایز های متفاوت به خوبی نمایش داده شوند.
بهترین راه حلی که اتخاذ می شد این بود که یک سایت برای نسخه های مختلف نوشته شود مثلا 4 نسخه تولید می شد و با استفاده از کدهای Java Script نوع دستگاه کاربر تشخیص داده می شد سپس به سایت مورد نظر هدایت می شد مثلا
Mobile.Ably.ir برای دستگاه های موبایل بود که صفحه نمایش بسیار کوچکی داشتند، علاوه بر استفاده از کدهای Java Script برای تشخیص نوع دستگاه کاربر لینکی در سایت با عنوانی همچون "نسخه موبایل" قرار داده می شد تا اگر کاربر نیاز به این نسخه دارد، سایت را در این نسخه مشاهده کند.

ادامه مطلب...
up
ما را در گوگل محبوب کنید