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

نام تاپیک: bootstrap چیست و چطور باید از آن استفاده کرد

  1. #1
    کاربر دائمی
    تاریخ عضویت
    خرداد 1389
    محل زندگی
    نت
    پست
    380

    bootstrap چیست و چطور باید از آن استفاده کرد

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

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

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    قسمت اول
    بوت استرپ یک فریم ورک هست که تلفیقی از جاوا اسکریپت و سی اس اس هست و به طراح کمک زیادی میکنه در طراحی صفحه وب. میتونید بوت استرپ رو از:http://twitter.github.com/bootstrap/
    دانلود کنید.
    فایل زیپ دانلودی شما داری پوشه های ایمج، جاوا و سی اس اس هست.
    فایل های جاوا و سی اس اس دارای دو ورژن مینی و معمولی هستن. ورژن های مینی واسه پروداکش هستن یعنی اینکه فضاهای خالی بین کد ها رو برداشتن تا فایل کم حجم تر بشه ما در این آموزش از ورژن مینی فایل ها استفاده میکنیم(چون نمی خوام آموزش رو پیچیده کنم).
    بعد از دانلود فایل ها رو کنار بقیه اجزای وبسایتتون بزارین و بعد به فایل های سی اس اس و جاوا اسکریپت بوت اترپ لینک بدید:
    مثال:
    <link rel="stylesheet" href="/templates/seodapop/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/templates/seodapop/css/bootstrap-responsive.min.css" type="text/css" />

    و:
      <script type="text/javascript" src="/templates/seodapop/javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/templates/seodapop/js/bootstrap.min.js"></script>


    به علاوه جهت اینکه اچ تی ام ال 5 با ای 9 سازگاری بهتری پیدا کنه این خط کد رو هم اضافه کنید:
    <!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    همینطور به این جهت که بوت استرپ ریسپانسیو هست این تکه کد رو هم نیاز دارید:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    بعد از این کار شما میتونید از فریم ورک بوت استرپ استفاده کنید.
    آخرین ویرایش به وسیله hamidre13 : دوشنبه 23 بهمن 1391 در 02:23 صبح

  3. #3
    کاربر دائمی
    تاریخ عضویت
    خرداد 1389
    محل زندگی
    نت
    پست
    380

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    بوت استرپ صفحه ی وب رو به 12 ستون تبدیل میکنه و شما میتونید هر چقدر که دلتون میخواد ردیف داشته باشید.
    بوت اسرپ دارای دو سیستم فیکس گرید و فلویید گرید هستش. اگر از فیکس گرید استفاده کنید با تغییر سایز صفحه اندازه المنت ها تغییری نمیکنه ولی اگه از فلویید گرید استفاده کنید به خاطر اینکه از درصد استفاده شده صفحتون ریسپانسیو میشه و بسته به اندازه صفحه خودش رو تغییر میده.
    من شخصا از رو فلویید استفاده میکنم چون به نظرم بهترین گزینه هستش.
    برای اضافه کردن یک ردیف فلویید به صفحه کافی هست که یک دیو با کلاس :row-fluid داشته باشیم بنابراین کدمون میشه:
    <div class="row-fluid">
    </div>

    همونطوری که قبلا گفتم در هر ردیف ما 12 ستون داریم که باید اونها رو پر کنیم ، برای استفاده از هر ردیف میتونیم یه دیو باکلاس اسپن از یک تا 12 داشته باشیم که این عدد نشان دهنده تعداد ستون هایی هست که المنت اشغال میکنه. حالا کدمون به این صورت شده:
    <div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
    </div>

    همونطور که میبیندید دو تا دیو داریم که به عنوان دو تا ستون واسمون به حساب میان. یکی با اندازه 8 ستون یکی با اندازه 4 ستون که روی هم رفته میشه 12 ستون.
    این اساس بوت استرپ هست.
    آخرین ویرایش به وسیله hamidre13 : دوشنبه 23 بهمن 1391 در 08:41 صبح

  4. #4
    کاربر دائمی
    تاریخ عضویت
    خرداد 1389
    محل زندگی
    نت
    پست
    380

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    در ادامه قسمت قبل همونطوری که گفتم باید هر ردیف شامل 12ستون باشه.خب حالا چطور میشه از ستون های کمتری استفاده کرد یا اینکه چطور میشه یک ستون رو خالی گذاشت؟
    برای این کار باید از کلاس سی اس اس offset استفاده کرد. این کلاس هم مثل کلاس اسپن از یک تا 12 شماره بندی شده و هر شماره نشانگر تعداد ستونهای خالی قبل یا بعد از المنت مورد نظرمون هست.
    مثلا اگر بخوایم یک المنت با طول سه ستون داشته باشیم که دو ستون سمت راستش هم خالی باشه کدمون میشه:
    <div class="span3 offset2">...</div>

    این به معنی یک دیو سه ستونه هست که دو ستون سمت راستش هم خالی هست.
    تا اینجای کار متوجه شدیم که مبنای کار بوت استرپ شطرنجی کردن صفحه به صورت سطر و ستون هست.
    ممکنه این سوال واستون پیش بیاد، بگید اگر من یه المنت 5 ستونی داشته باشم چطور میتونم اون رو به قسمت های کوچیکتر تقسیم کنم:
    جواب این کار ساده هست، فقط کافیه در اون المنت یک دیو دیگه با کلاس رو-فلویید ایجاد کنید و حالا یه ردیف 12 ستونه جدید دارید که میتونید به راحتی اون رو تقسیم کنید.

    <div class="row-fluid">
    <div class="span12">
    Fluid 12
    <div class="row-fluid">
    <div class="span6">
    Fluid 6
    <div class="row-fluid">
    <div class="span6">Fluid 6</div>
    <div class="span6">Fluid 6</div>
    </div>
    </div>
    <div class="span6">Fluid 6</div>
    </div>
    </div>
    </div>

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

  5. #5
    کاربر دائمی
    تاریخ عضویت
    خرداد 1389
    محل زندگی
    نت
    پست
    380

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    توسط بوت استرپ طراح میتونه مشخص کنه که چه المنت هایی برای چه دیوایس هایی نشون داده بشه پ(به راحتی).
    این کار توسط اضافه کردن کلاس های سی اس اس انجام میشه، مثلا کلاس visible-phone المنت رو فقط در حالتی که اندازه صفحه نمایش اندازه موبایل باشه نشون میده.
    واسه لیست کامل این کلاس ها و اندازه ای که اعمال میشن میتونید به آدرس:
    http://twitter.github.com/bootstrap/...tml#responsive مراجعه کنید.
    نکته: شناسایی دیوایس توسط سی اس انجام میشود و نه جاو اسکریپت به زبان ساده تر این تکنیک ها فقط بر اساس اندازه صفحه کار میکنند نه اینکه آیا واقعا کاربر اسمارت فون داره یا نه.

  6. #6
    کاربر دائمی آواتار caspianhero
    تاریخ عضویت
    شهریور 1390
    محل زندگی
    زیر سایه ی خدا
    پست
    434

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    سلام: وتشکر
    یک سئوال؟
    bootstrap چه ربطی به parallax داره یا چه فرقی داره؟؟؟


    سپاس



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

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    نقل قول نوشته شده توسط caspianhero مشاهده تاپیک
    سلام: وتشکر
    یک سئوال؟
    bootstrap چه ربطی به parallax داره یا چه فرقی داره؟؟؟


    سپاس



    parallax یک کتابخانه جی کویری هست و کلا چیز دیگه ای هست. دوست عزیز نمیتونم اینجا کامل توضیح بدم
    اینجا رو یه نگا بنداز:http://stephband.info/jparallax/

  8. #8
    کاربر دائمی
    تاریخ عضویت
    خرداد 1389
    محل زندگی
    نت
    پست
    380

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    دوستان خواهشا پست های اسپم ندید و بزارید تاپیک روی آموزش متمرکز باشه.
    در ادامه مباحث قبل، همونطور که مشاهده کردید میشه خیلی راحت یک تم ریسپانسیو درست کرد.
    بعد از درست کردن ساختار تم میتونیم از بوت استرپ برای زیبایی تم هم استفاده کنیم.
    واسه این کار کافی هست کلاس های سی اس اسی رو که در سایت بوت استرپ گفته شده به المنت هامون اضافه کنیم. میتونید این لیست کامل کلاس ها رو در اینجا ببینید.
    به طور مثال اگر میخواید عکستون گرد نشون داده بشه باید به عکستون کلاس: img-circle رو بدید و در نتیجه عکس بصورت گرد نشون داده میشه:
    مثال:
    <img src="..." class="img-rounded">
    <img src="..." class="img-circle">
    <img src="..." class="img-polaroid">

    کد های بالا به ترتیب عکس رو به صورت گرد در گوشه ها ، گرد و حاشیه دار نشون میدن.
    اگر بخواید آیکن در المنت نشون بدید کافی هست که اسم ایکن مورد نظرتون رو به عنوان کلاس به المنت مورد نظرتون بدید.
    اسم تمام آیکن های پشتیبانی شده رو میتونید از لینک بالا بگیرید. مثال:
    <i class="icon-search"></i>
    <i class="icon-search icon-white"></i>

    دو خط بالا آیکن سرچ رو نشون میدن با این تفاوت که خط دوم به جای اینکه آیکون رو به رنگ سیاه نشون بده اون رو به رنگ سفید نشون میده، بنابراین با اضافه کردن آیکن وایت به المنت مورد نظر آیکن به رنگ سفید نشون داده میشه.
    مطلب بعد مربوط به دکمه ها هست با اضافه کردن کلاس btn به المنت مورد نظرتون به راحتی یک باتن خیلی قشنگ دارید حالا میتونید کلاس های دیگه به این باتن اضافه کنید و دکمتون رو سفارشی کنید. مثال:
    <button class="btn btn-primary" type="button">Default button</button>

    لیست کامل کلاس های باتن رو از لینک بالا میتونید دریافت کنید.
    آخرین ویرایش به وسیله hamidre13 : پنج شنبه 26 بهمن 1391 در 07:00 صبح

  9. #9
    کاربر دائمی
    تاریخ عضویت
    خرداد 1389
    محل زندگی
    نت
    پست
    380

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    تا اینجا در مورد افکت های ابتدایی بوت استرپ صحبت کردیم .
    حالا به کارهای جالب بوت استرپ که تنها با اضافه کردن کلاس های سی اس اس به المنت ها انجام میشه میپردازیم.
    برای ساختن یه دراپ داون منو فقط کافی هست که از فرمت زیر پیروی کنید:
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
    ...
    </ul>
    </li>
    </ul>


    یعنی به لیست اصلی کلاس dropdown-menu و همچنین اتریبیوت های :role="menu" aria-labelledby="dLabel" رو بدید و به ایتمی که دارای ساب منوی هست کلاس dropdown-submenu بدید و به ساب منوی داخلی کلاس :dropdown-menu رو بدید و تمام حالا شما یه دراپ داون دارید بدون یه خط جاوااسکریپت.
    اگر در سایتتون نویگیشن بار دارید کافی هست کلاس nav nav-tabs رو به لیست مربوط اضافه کنید. nav-tabs منو رو به صورت تب نشون میده ولی گزینه قرص و زیر هم هست که میتونید از سایت بوت استرپ نگاه کنید.
    مثال:
    <ul class="nav nav-tabs">
    <li class="active">
    <a href="#">Home</a>
    </li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    </ul>

    اگر سوالی هست بفرمایید.
    آخرین ویرایش به وسیله hamidre13 : دوشنبه 30 بهمن 1391 در 04:56 صبح

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

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    سلام دوستان
    یکی دیگه از کارهایی که میشه به سادگی توسط بوت استرپ انجام داد مادول هست. مادول ها همون المنت هایی هستن که به نوعی پاپ آپ هستن ولی نه اینکه یه پاپ آپ باز شه بلکه صفحه سیاه میشه و المنت وسط صفحه نشون داده میشه.
    واسه ساخت مادول کافی هست از کد زیر استفاده کنیم:
    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>



    همونطور که مشاهده میکنید آدرس لینک به آی دی دیو اشاره میکنه و از این طریق هست که با هم ارتباط برقرار میکنن.

  11. #11

  12. #12

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    دوست عزیز بسیار ممنون از آموزش خوبی که گذاشتی
    امیدوارم زمان داشته باشی و ادامه بدی
    استفاده کردم

  13. #13
    کاربر تازه وارد
    تاریخ عضویت
    آذر 1392
    محل زندگی
    تهران
    پست
    30

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    ممنونم از آموزش خوبت
    من یه مشکلی دارم که نمیتونم دوتا دایو رو کنارهم قرار بدم , کلاس هر دایو را بربر span6 میزارم ولی هردو کل صفحه را میگیرند و زیر هم میافتند.
    ممنون میشم راهنمایی کنی

  14. #14
    کاربر دائمی آواتار 2undercover
    تاریخ عضویت
    تیر 1391
    محل زندگی
    خراسان رضوی
    پست
    1,471

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    سیستم گرید بندی Bootstrap از نسخه ی 3 به بعد تغییر کرده که می تونید توی سایت خودش تغییرات رو ببینید!

  15. #15
    VIP آواتار mohamad_torabi
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    تــــــهــــران
    پست
    1,131

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    دوست عزیز اقای معلی یک اموزش به صورت فیلم دارن که بیشنهاد میگنم حتما نگاه کنید

  16. #16

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    نقل قول نوشته شده توسط mohamad_torabi مشاهده تاپیک
    دوست عزیز اقای معلی یک اموزش به صورت فیلم دارن که بیشنهاد میگنم حتما نگاه کنید
    لینک لطفا بدید

  17. #17

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    آموزشها اینجاست: http://quicklearn.ir/?q=taxonomy/term/70
    البته یکی از دوستان نوشته بودن نیاز به اپدیت داره
    در اولین وقتی که پیدا کردم برمیگردم و اموزش ویرایش جدید رو میسازم

  18. #18
    کاربر تازه وارد آواتار saelozahra
    تاریخ عضویت
    بهمن 1390
    محل زندگی
    شیراز
    پست
    40

    نقل قول: bootstrap چیست و چطور باید از آن استفاده کرد

    نقل قول نوشته شده توسط hamidre13 مشاهده تاپیک
    قسمت اول
    بوت استرپ یک فریم ورک هست که تلفیقی از جاوا اسکریپت و سی اس اس هست و به طراح کمک زیادی میکنه در طراحی صفحه وب. میتونید بوت استرپ رو از:http://twitter.github.com/bootstrap/
    دانلود کنید.
    فایل زیپ دانلودی شما داری پوشه های ایمج، جاوا و سی اس اس هست.
    فایل های جاوا و سی اس اس دارای دو ورژن مینی و معمولی هستن. ورژن های مینی واسه پروداکش هستن یعنی اینکه فضاهای خالی بین کد ها رو برداشتن تا فایل کم حجم تر بشه ما در این آموزش از ورژن مینی فایل ها استفاده میکنیم(چون نمی خوام آموزش رو پیچیده کنم).
    بعد از دانلود فایل ها رو کنار بقیه اجزای وبسایتتون بزارین و بعد به فایل های سی اس اس و جاوا اسکریپت بوت اترپ لینک بدید:
    مثال:
    <link rel="stylesheet" href="/templates/seodapop/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/templates/seodapop/css/bootstrap-responsive.min.css" type="text/css" />

    و:
      <script type="text/javascript" src="/templates/seodapop/javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/templates/seodapop/js/bootstrap.min.js"></script>


    به علاوه جهت اینکه اچ تی ام ال 5 با ای 9 سازگاری بهتری پیدا کنه این خط کد رو هم اضافه کنید:
    <!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    همینطور به این جهت که بوت استرپ ریسپانسیو هست این تکه کد رو هم نیاز دارید:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    بعد از این کار شما میتونید از فریم ورک بوت استرپ استفاده کنید.
    داداش لینکه خرابه

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

  1. Linq چیست و چگونه میتوان از آن استفاده کرد ؟
    نوشته شده توسط amirepsilon در بخش دسترسی به داده ها (ADO.Net و LINQ و ...)
    پاسخ: 2
    آخرین پست: پنج شنبه 02 اردیبهشت 1395, 09:25 صبح
  2. مبتدی: sendkeys چیست و به چه شکل باید از ان استفاده کرد ؟
    نوشته شده توسط akbar3070 در بخش VB.NET
    پاسخ: 3
    آخرین پست: سه شنبه 30 آبان 1391, 19:55 عصر
  3. حرفه ای: توی این فریم ورک چطور باید از مدل استفاده کنم؟
    نوشته شده توسط idocsidocs در بخش CakePHP
    پاسخ: 12
    آخرین پست: یک شنبه 27 شهریور 1390, 15:39 عصر
  4. سوال: چطور باید از Dll استفاده کنم
    نوشته شده توسط baran_mehr در بخش C#‎‎
    پاسخ: 2
    آخرین پست: دوشنبه 14 مرداد 1387, 18:20 عصر
  5. برای گزارش گیری در جاوا باید از چی استفاده کرد ؟
    نوشته شده توسط jeus در بخش Java SE : نگارش استاندارد جاوا
    پاسخ: 1
    آخرین پست: یک شنبه 26 خرداد 1387, 09:37 صبح

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

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