سبد خرید (0)

شروع کار با بوت استرپ

بوت استرپ چیست؟

Wiki

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

طراحی واکنش گرا در وب چیست؟

طراحی واکنش گرای وب عبارت است از ساختن وب سایت هایی که به طور اتوماتیک، خودشان را برای خوب نمایش یافتن در تمام دستگاه ها، از تلفن های کوچک گرفته تا انواع رایانه های بزرگ، تنظیم می کنند.

تاریخچه ی بوت استرپ

Wiki

بوت استرپ توسط مارک اوتو و جاکوب تورنتون در تویتر ساخته شده است و بصورت یک محصول متن باز در آگوست 2011 در گیتهاب (GitHub) منتشر شده است.

نکته: در تاریخ  ژون 2014، بوت استرپ پروژه ی شماره 1 در سایت گیتهاب بود.


چرا از بوت استرپ استفاده کنیم؟

Wiki

امتیازات بوت استرپ:

  • استفاده آسان: هر فرد با یک دانش ابتدایی از HTML و CSS می تواند شروع به استفاده از بوت استرپ نماید.
  •  واکنش گرا بودن: کدهای واکنش گرای css  بوت استرپ برای موبایل ها، تبلت ها و کامپیوترها تنظیم شده اند.
  •  پاسخگرا بودن به موبایل: در بوت استرپ 3، استایل های پاسخگرا به موبایل، قسمتی از هسته ی این فریم ورک را تشکیل می دهند.
  • سازگاری با مرورگرها: بوت استرپ سازگار با تمام مرورگرهای مدرن می باشد(کروم، فایرفاکس، اینترنت اکسپلورر و سافاری و اپرا).

بوت استرپ را از کجا دریافت  کنیم؟

Wiki

دو راه برای شروع استفاده از بوت استرپ بر روی سایت ها وجود دارد:

1. شما می توانید بوتسترپ را از سایت getbootstrap.com دانلود کنید.

2. شما می توانید بوت استرپ را به وسیله ی یک CDN اضافه کنید.


1- دانلود کردن بوت استرپ

در صورتی که می خواهید بوت استرپ را دانلود کرده و آن را در هاست خود ذخیره کنید، می توانید به سایت getbootstrap.com بروید و دستورالعمل های نوشته شده در آنجا را انجام دهید.


2- اضافه کردن بوت استرپ از یک CDN

اگر نمی خواهید بوت استرپ را دانلود کنید و آن را در هاست خود ذخیره کنید، می توانید آن را از یک CDN(شبکه ی تحویل محتوا) اضافه کنید.

سایت MaxCDN، از فایل های سی اس اس و جاوااسکریپت بوت استرپ و همچنین از جی کوئری، پشتیبانی می کند.

MaxCDN:

<!-- اضافه کردن آخرین فایل سی اس اس -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- کتابخانه ی جی کوئری -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- فایل جاوا اسکریپت بوت استرپ -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Note

یک امتیاز در استفاده از CDN برای بوت استرپ:

اکثر کاربرهای اینترنت، وقتی که به سایت های دیگر سر می زنند، بوت استرپ در مرورگر آنها دانلود می شود، پس اگر این کاربران از سایت شما نیز بازدید کنند (که از بوت استرپ استفاده می کند)، نیازی ندارند که دوباره بوت استرپ را دانلود کنند و این باعث افزایش سرعت بارگذاری سایت شما می شود. 


ایجاد اولین صفحه ی وب با  استفاده از بوت استرپ

Wiki

1.اضافه کردن اعلان doctype

بوت استرپ از عناصر HTML و CSS استفاده می کند و این دستورات، نیاز دارند تا از اعلان doctype استفاده کنیم. 

سعی کنید همیشه اعلان  doctype را در ابتدای صفحه اضافه کنید، و همچنین خصوصیت lang و charset را تنظیم کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2.بوت استرپ 3، واکنش گرا به موبایل می باشد:

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

برای اینکه مطمئن شوید که زوم کردن در دستگاه های لمسی، به خوبی کار می کند، تگ متای زیر را در داخل عنصر <head> قرار دهید:

<meta name="viewport" content="width=device-width, initial-scale=1">

دستور width=device-width بررسی می کند که عرض صفحه وب شما برابر با عرض  دستگاه های مختلف قرار گیرد. 

دستور initial-scale=1 به هنگام لود شدن صفحه توسط مرورگر وب، میزان زوم اولیه را مشخص می کند. 

3. ظرف ها(containers) را اضافه کنید:

در بوت استرپ، برای بسته بندی کردن محتوای سایت، باید از یک container استفاده کنید. برای انجام این کار، دو کلاس وجود دارند:

1. کلاس container. :   این کلاس یک ظرف واکنش گرا با عرض ثابت را ایجاد می کند.  به عبارت دیگر، با استفاده از این کلاس شما می توانید یک سایت با عرض ثابت داشته باشید. به طوری که از سمت چپ و راست کمی فاصله داشته باشد.

2. کلاس container-fluid. :   این کلاس یک ظرف با عرض کامل ایجاد می کند. به عبارت دیگر، با استفاده از این کلاس سایت شما کل عرض صفحه را می پوشاند. و سایت شما  از کناره ها هیچ فاصله ای نخواهد داشت. 

نکته: ظرف ها نمی توانند تو در تو باشند، به عبارت دیگر، نمی توانید یک ظرف را در یک ظرف دیگر قرار دهید.


ایجاد دو صفحه ی ساده، با بوت استرپ 

Wiki

مثال زیر، کدهای یک صفحه ی بوتسترپ را نشان می دهد(با استفاده از یک ظرف واکنش گرا با عرض ثابت):

مثال (شروع کار با بوت استرپ)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>مثال بوتسترپ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>اولین صفحه بوتسترپ من</h1>
  <p>این یک متن است</p>
</div>

</body>
</html>

خودتان امتحان کنید »

مثال زیر، کدهای یک صفحه ی ساده بوت استرپ را نشان می دهد(با استفاده از یک ظرف با عرض کامل):

مثال (شروع کار با بوت استرپ)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>مثال بوتسترپ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>اولین صفحه ی بوتسترپ من</h1>
  <p>این یک متن است</p>
</div>

</body>
</html>
</div>

خودتان امتحان کنید »

دیدگاه‌ها  

0 # سیما 1396-08-08 23:16
سلام خیلی ممنون از آموزش هاتون . دستتون درد نکنه و اجرتون با خدا.
من مشکلم اینه که بوت استرپ رو دانلود کردم ولی توش فایل jquery.min.js نیست. چیکار کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1396-08-08 23:49
سلام. ممنون از شما.
داخل بسته ی بوت استرپ،به احتمال زیاد جی کوئری رو به صورت CDN مورد استفاده قرار داده اند. یعنی به طور اتوماتیک از اینترنت دانلود می شه. در مقاله ی بالا، لطفا مبحث " اضافه کردن بوت استرپ از یک CDN" رو مطالعه کنید.
اگه می خواهید خودتون جی کوئری رو اضافه کنید، به سایت رسمی جی کوئری بروید و اون رو دانلود کنید و در کدهای خود طبق آموزش بالا اضافه کنید. https://jquery.com/download/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # محدثه نوروزی 1396-02-20 15:55
سلام، در مثال های بالا چرا به فایل CSS لینک دادید؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-02-21 08:52
سلام، اگر یکبار دیگر مطلب بالا را با دقت مطالعه فرمایید، متوجه خواهید شد که برای استفاده از Bootstrap در سایت تان باید فایل های زیر را به صفحات لینک کنید:
1- bootstrap.min.css
2- jquery.min.js
3- bootstrap.min.j s
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # salar5075 1395-12-19 11:58
سلام.خسته نباشید.
میخواستم بدونم، وقتی که یه قالب سایت با قابلیت ریسپانسیو میخریم، بازم نیاز هست برای اعمال تغییرات جزئی( مثل اضافه کردن یک ستون توی سایز اصلی سایت) آیا بازم نیاز هست که بوت استرپ رو بلد باشیم؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-12-19 16:04
سلام.
بعضی از قالب ها، از پلاگین های مخصوصی برای ارائه ی بوت استرپ به این قالب استفاده می کنند. مثلا قالب های شرکت جوملارت از پلاگین یا همان فریم ورک T3 در قالب های خود استفاده می کنه. و شرکت smartaddons هم از یک پلاگین مخصوص به خودش استفاده می کند. بنابراین برای ایجاد تغییرات در قالب، باید علاوه بر بوت استرپ، پلاگین یا فریم ورک مخصوص این قالب رو هم بلد باشید و کار به همین سادگی نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # beh naz 1395-10-23 14:54
با سلام
من درمورد استفاده از بوت استرپ در فریمورک codeIgniter سوال داشتم
در اینجا میشه مطرح کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-23 16:13
سلام. متاسفانه بنده با فریم ورک codeIgniter آشنایی ندارم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # zh 1395-08-18 21:24
با سلام و خسته نباشید و تبریک بابت سایت بسیارخوبتون.کان ال تلگرام ندارید که اموزش ها رو اونجا دنبال کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-08-19 11:17
سلام کانال تلگرام هم داریم. اما آموزش متنی بوت استرپ فقط در سایت ارائه میشه.
http://telegram.me/ba1clickbeyamooz
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # آزی 1395-08-16 12:03
سلام چرا من هر هر دستوری رو که اجرا میکنم چپ به راسته؟ متن ها لیست ها عکس ها همه چپ به راسته. چیکار کنم که صفحه م راست به چپ ایجاد بشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-08-16 16:29
سلام . چون که شما فایل راست چین کننده ی بوتسترپ (بوت استرپ) رو به کدهای خودتون اضافه نکرده اید. برای انجام این کار می تونید فایل قرار گرفته در آدرس زیر رو دانلود کرده و به کدهای خودتون لینک کنید:
http://beyamooz.com/try_it_yourself/bootstrap/bootstrap-rtl.min_.css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # sina 1394-07-30 12:01
سلام.
ظاهرا بوتسترپ دارای ورژن هست، اگه ورژن جدیدی در سایتش بگذاره، این سی اس اس راست چین شما با آن جواب خواهد داد یا شما هم نیاز دارید که نسخه راست چین به روز کنید؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-07-30 17:59
سلام . بله ما هم نیاز داریم نسخه ی راست چین رو بروز کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # alidanial7 1394-05-21 09:27
سلام
تفاوت بین container و container-fluid رو میشه بیشتر توضیح بدین؟
فرقشون چیه دقیق؟
یا بهتر بپرسم
استفاده هر کدوم تو چه محلی هست؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-05-21 10:04
سلام
container-fluid تمام طول صفحه نمایش رایانه را می پوشاند. اما container باعث می شود که سایت از سمت چپ و راست مقداری فاصله داشته باشد بعنوان مثال مثل سایت بیاموز.
این بستگی به شما داره که بخواهید سایتتون چطوری باشه. اگر دوست دارید سایتتون تمام طول صفحه را اشغال کند از container-fluid استفاده کنید. وگرنه از container استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # saye kian 1394-04-27 13:02
ببخشید این یعنی چی width=device-wi dth ؟
مگه عرض صفحه همیشه با عرض device برابر نیست
مگه عرض صفحه همیشه 100% نیست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-27 13:59
بوتسترپ برای هر صفحه ی نمایشی، یک عرض در نظر گرفته است. مثلا وقتی که سایت مورد نظر در یک لپتاپ معمولی می خواهد نمایش پیدا کند، عرض آن برابر با 1170 پیکسل می شود. این یعنی بوتسترپ چک می کند که اگر مثلا شما از یک وسیله ای استفاده می کنید که عرض صفحه ی نمایش آن 1366 پیکسل است، عرض سایت را 1170 پیکسل در نظر میگیرد. حالا اگر همان سایت را در یک تبلت باز کنیم، چون عرض دستگاه تغییر پیدا می کند، عرض سایت هم باید به نسبت تغییر پیدا کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amirkain 1394-04-24 13:54
شایان ذکر است که پس از دانلود کردن مجموعه بوتس ترپ می توانیم از فایل های Min یا معمولی بوتسترپ در سی اس اسش یا ... استفاده کنیم
یک نکته دیگر که باید گفته شود این است که jqury را هم باید دستی دانلود کنیم چون در بوتس ترپ لینک داده شده به سایت اصلی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-24 14:53
یه نکته ی دیگری هم که باید به اون توجه داشته باشیم اینه که فایل css راست چین کننده ی بوتسترپ رو هم باید به صفحه مورد نظر اضافه کنیم تا بوتسترپ به اصطلاح فارسی شود. آدرس: http://beyamooz.com/try_it_yourself/bootstrap/bootstrap-rtl.min_.css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # khaloghli 1394-03-19 13:19
سلام mvc چیه و چه رابطه ای با bootstrap داره.
اگر داخل asp.net بخواهیم با bootstrap کار کنیم از چه راهی استفاده کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-03-19 20:10
سلام
mvc یکی از سه مدل برنامه نویسی در asp.net است.
بوتسترپ هم یک فریم ورک برای طراحی قالب های واکنش گرا است.
هر دوی اینها مقوله هایی جدا از هم هستند. در ضمن asp.net در تخصص بنده نیست، لطفا سوال خود را در بخش آموزش asp.net مطرح نمایید:
www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net-mvc
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # khaloghli 1394-03-22 13:13
متشکرم.
موفق باشی.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # khaloghli 1394-03-19 12:56
سلام.
با asp.net کار میکنم mvc چه رابطه ای با bootstrap داره؟
mvc به چه دردی میخوره!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-03-19 20:13
سلام
برای آموزش mvc به لینک زیر مراجعه فرمایید:
www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net-mvc
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # seyed mahmood 1394-03-15 14:46
با سلام
من با نرم افزار دریم ویور کار میکنم
فایل بوتسترپ رو که دانلود کردیم چجوری باید به نرم افزار اضافه اش کنیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-03-15 16:11
سلام
بعد از دانلود فایل بوتسترپ، نرم افزار دریم ویور را باز کنید و از منوی site گزینه ی new site را انتخاب کنید.
سپس در قسمت site name نام سایت خودتون را مشخص کنید و در فیلد دوم پوشه ی ریشه ی خود را برابر با آدرس پوشه ی بوتسترپ(که آن را دانلودکرده اید) قرار دهید. و بعد دکمه ی ok را فشار دهید تا تمام محتویات پوشه ی بوتسترپ را وارد کرده باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # س.الف 1394-04-23 15:55
میشه برای ویژوال استودیو هم توضیح بدین؟ ممنون از زحماتتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-04-23 16:43
با عرض معذرت، ویژوال استودیو در تخصص بنده نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # سام 1394-04-22 23:35
bs رو از یک Cdn اضافه کنیم بهتره یا دانلود؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1394-04-23 00:20
به نظرم اگر از فایل دانلود شده استفاده کنید، سرعت لود شدن بیشتر می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # حبیب الله 1394-03-09 17:33
با سلام
برای دانلود کدوم یک از تایپ های بوتستراپ رو انتخاب کنیم؟
تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1394-03-11 18:04
سلام
گزینه ی اول دانلود، از سمت چپ
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!