# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > آموزش: bootstrap چیست و چطور باید از آن استفاده کرد

## hamidre13

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

----------


## 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">

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

----------


## hamidre13

بوت استرپ صفحه ی وب رو به 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

در ادامه قسمت قبل همونطوری که گفتم باید هر ردیف شامل 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>
تا اینجای کار نحوه طراحی و پایه استفاده از فریم ورک بود در قسمت بعد میپردازم به نحوه نمایش در نمایشگز های مختلف.
اگر سوالی هست در خدمتم.
ادامه دارد..........

----------


## hamidre13

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

----------


## caspianhero

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

سپاس

----------


## hamidre13

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


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

----------


## hamidre13

دوستان خواهشا پست های اسپم ندید و بزارید تاپیک روی آموزش متمرکز باشه.
در ادامه مباحث قبل، همونطور که مشاهده کردید میشه خیلی راحت یک تم ریسپانسیو درست کرد.
بعد از درست کردن ساختار تم میتونیم از بوت استرپ برای زیبایی تم هم استفاده کنیم.
واسه این کار کافی هست کلاس های سی اس اسی رو که در سایت بوت استرپ گفته شده به المنت هامون اضافه کنیم. میتونید این لیست کامل کلاس ها رو در اینجا ببینید.  
به طور مثال اگر میخواید عکستون گرد نشون داده بشه باید به عکستون کلاس: 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

تا اینجا در مورد افکت های ابتدایی بوت استرپ صحبت کردیم . 
حالا به کارهای جالب بوت استرپ که تنها با اضافه کردن کلاس های سی اس اس به المنت ها انجام میشه میپردازیم.
برای ساختن یه دراپ داون منو فقط کافی هست که از فرمت زیر پیروی کنید:
<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

سلام دوستان
یکی دیگه از کارهایی که میشه به سادگی توسط بوت استرپ انجام داد مادول هست. مادول ها همون المنت هایی هستن که به نوعی پاپ آپ هستن ولی نه اینکه یه پاپ آپ باز شه بلکه صفحه سیاه میشه و  المنت وسط صفحه نشون داده میشه.
واسه ساخت مادول کافی هست از کد زیر استفاده کنیم:
<!-- 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>


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

----------


## padidehco

سلام دوستان
من یک مشکل دارم اونم اساسی
یک فایل خیلی کوچیک نوشتم اما نمی دونم چرا فایل های بوت استرپ اجرا نمی شه
تو این تاپیک بهتر توضیح دادم و کد ها را گذاشتم به همراه دوتا نمونه

https://barnamenevis.org/showthread.php?420932-%D9%85%D8%B4%DA%A9%D9%84-%D8%A8%D8%A7-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%85%D9%86%D9%88-%D8%A8%D8%A7-bootstrap&p=1883263&viewfull=1#post1883263

برای ورود به تاپیک اینجا کلیک کنید

----------


## shahinfarasystem

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

----------


## ho3inamini

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

----------


## 2undercover

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

----------


## mohamad_torabi

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

----------


## aminking2005

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


 لینک لطفا بدید

----------


## moalla

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

----------


## saelozahra

> قسمت اول 
> بوت استرپ یک فریم ورک هست که تلفیقی از جاوا اسکریپت و سی اس اس هست و به طراح کمک زیادی میکنه در طراحی صفحه وب. میتونید بوت استرپ رو از: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" />
> ...


 داداش لینکه خرابه

----------

