01-05-1394، 10:19 ب.ظ
بسم الله الرحمن الرحیم
سلام و درود خدمت اعضای محترم
توی این تاپیک قراره کار با بوت استرپ و نحوه استفاده از قابلیت های فوق العاده ی اون رو با هم دیگه یاد بگیریم
لطفا اگه سوالی دارید توی این تاپیک مطرح نکنید و تاپیک جدا ایجاد کنید.
امیدوارم بتونم قسمتی از دانش و تجربه اندکم رو با شما دوستان به اشتراک بگذارم
بوت استرپ چیه ؟
اگه با HTML و CSS آشنا باشید می دونید هر قالبی یک سری آیتم های پایه و مشترک با بقیه ی قالب ها داره . مثلا منو ، اسلاید شو ، یا حتی دکمه ها و فیلد های متنی که خیلی هم کاربرد دارن ...
تصور کنید توی هر قالبی که میخواید طراحی کنید هر کدوم از اینها رو از پایه بخواید بسازید یا دستکاری کنید چقدر وقت می بره . خب اینجاست که بوت استرپ میاد و این مشکل رو حل میکنه .
بوت استرپ در واقع یک سری کد HTML و CSS و JavaScript هستش که توسط یک سری افراد متخصص نوشته و آماده شده تا شما وقتتون رو صرف کارای تکراری نکنید و به اجزای اصلی بپردازید .
بوت استرپ بسیار قدرتمنده و طیف وسیعی از المان های کاربردی و مورد نیاز طراحان و توسعه دهندگان وب رو فراهم کرده
اگه هنوز مفهوم بوت استرپ رو متوجه نشدید اصلا نگران نباشید!
یک مثال ساده :
فرض کنید که توی قالبتون میخواید یه دکمه داشته باشید و از ظاهر پیش فرضش زیاد خوشتون نمیاد و میخواید یکم خوشگل ترش کنید . مثلا چنین کدی رو فرض کنید توی HTML دارید :
و برای CSS هم کد زیر :
این که این کدها و دستورها چیکار میکنن مربوط به بحث ما نیست و من فرض میکنم شما از این دستورات سر در میارید و اگه هم سر در نیاوردید آموزش رو موقتا ادامه ندید و از http://w3schools.com خیلی سریع این مباحث رو یاد بگیرید و اونوقت ما رو با این آموزش همراهی کنید. :)
خب بریم سراغ توضیح کدهای بالا ، توی بخش اول ما اومدیم یک ساختار ساده از صفحه مون رو تعریف کردیم و یک دکمه رو هم تعریف کردیم و براش یک شناسه mybutton در نظر گرفتیم و توی بخش دوم هم یک سری استایل های پایه رو بهش دادیم تا ظاهرش تغییر کنه .
حالا ما میخوایم بررسی کنیم ببینیم اگه بخوایم این کار رو با بوت استرپ انجام بدید چجوریاس؟! در ادامه متوجه میشید!
نحوه نصب و استفاده از بوت استرپ :
قدم اول اینه که به سایت بوت استرپ به آدرس http://getbootstrap.com برید و روی Download کلیک کنید و توی صفحه ای که باز میشه روی Download Bootstrap کلیک کنید تا پکیج بوت استرپ دانلود بشه .
وقتی دانلود شد محتویات پکیج رو استخراج کنید توی یک پوشه به نام bootstrap .
اگه دقت کنید توی پکیج سه تا پوشه داریم :
1-Css : شامل فایل های اصلی و در واقع هسته ی بوت استرپ که دو نوع فایل داره که یکی bootstrap.css هست و اون یکی bootstrap-theme.css ، اولی فایل اصلی فریمورک بوت استرپ هست و دومی هم یک فایل تم هست برای تعویض تم بوت استرپ . که استفاده از اون اختیاریه . این دو تا فایل هر کدوم یه نسخه ی کم حجم شده هم دارن که بعد از اسمشون کلمه ی min رو می تونید ببینید : مثلا bootstrap.min.css و ما هم با همین کار داریم.
2-Js : شامل فایل اصلی بوت استرپ هست که با bootstrap.js می تونید پیداش کنید که البته ما با bootstrap.min.js کار داریم.
البته بوت استرپ برای کارکرد صحیح خودش به کتابخانه ی jQuery هم نیاز داره که در ادامه در مورد فراخوانی جی کوئری هم میگم.
3-Fonts : بوت استرپ توی نسخه های قبلی برای این که به کاربران امکان درج آیکون بده ، از یک دسته آیکون بیت مپ استفاده میکرد ولی توی نسخه ی جدید ( 3 به بعد ) از یک سری فونت آیکون به نام Glyphicons Halflings استفاده کرد که اگه بخواید توی پروژه تون آیکون استفاده کنید می تونید از این فونت آیکون استفاده کنید.
البته این امکان وجود داره که از بسته های فونت آیکون دیگه بجای این بسته استفاده بشه که یکی از اون ها Fontawesome هست که توی جلسات مربوطه به تفصیل در موردش یاد میگیریم.
با توضیح مواردی که گفتم هر سه پوشه ی بالا رو کپی کنید کنار فایل HTML خودتون و فایل HTML رو توی یک ویرایشگر کد مثل Sublime Text باز کنید و فایل هسته ی بوت استرپ رو به وسیله ی کد زیر فراخوانی کنید ، این کد رو بین تگ head قرار بدید :
خب حالا باید فایل های جاوا اسکریپت مورد نیاز رو فراخوانی کنیم ، اول از همه حتما باید جی کوئری رو فراخوانی کنید ، که با قرار دادن کد زیر در انتهای تگ body یعنی قبل از جایی که تگ body بسته میشه ، می تونیم جی کوئری رو لود کنیم :
بعد از اون باید فایل جاوا اسکریپت مربوط به بوت استرپ رو فراخوانی کنیم ، پس بعد از کد بالا کد زیر رو قرار بدید :
دقت کنید که ترتیب این دو فایل مهمه و حتما اول باید جی کوئری فراخوانی بشه و بعدش مث بالا فایل بوت استرپ فراخوانی بشه.
خب ! تا اینجا ما بوت استرپ رو نصب کردیم!
حالا بین تگ body کد زیر رو قرار بدید :
اگه صفحه رو رفرش کنید یه دکمه می بینید که استایلی نداره ! درسته . حالا برای این که ظاهرش رو تغییر بدید نیازی نیست استایل های مثال قبلی رو بنویسید ، فقط دو تا کلاس داخلی بوت استرپ رو به دکمه بدید ، یعنی :
حالا فایل رو ذخیره کنید و صفحه رو رفرش کنید ، اگه شمایل دکمه تغییر پیدا کرد ، بهتون تبریک میگم شما اولین پروژه ی بوت استرپی خودتون رو اجرا کردید ! ولی اگه تغییری احساس نکردید ، باید چک کنید ببینید مشکل از کجاست ، احتمالا مسیر فایل های بوت استرپ صحیح نیست.
توی جلسه ی آینده یه مثال دیگه رو هم اجرا می کنیم.
سلام و درود خدمت اعضای محترم
توی این تاپیک قراره کار با بوت استرپ و نحوه استفاده از قابلیت های فوق العاده ی اون رو با هم دیگه یاد بگیریم
لطفا اگه سوالی دارید توی این تاپیک مطرح نکنید و تاپیک جدا ایجاد کنید.
امیدوارم بتونم قسمتی از دانش و تجربه اندکم رو با شما دوستان به اشتراک بگذارم
بوت استرپ چیه ؟
اگه با HTML و CSS آشنا باشید می دونید هر قالبی یک سری آیتم های پایه و مشترک با بقیه ی قالب ها داره . مثلا منو ، اسلاید شو ، یا حتی دکمه ها و فیلد های متنی که خیلی هم کاربرد دارن ...
تصور کنید توی هر قالبی که میخواید طراحی کنید هر کدوم از اینها رو از پایه بخواید بسازید یا دستکاری کنید چقدر وقت می بره . خب اینجاست که بوت استرپ میاد و این مشکل رو حل میکنه .
بوت استرپ در واقع یک سری کد HTML و CSS و JavaScript هستش که توسط یک سری افراد متخصص نوشته و آماده شده تا شما وقتتون رو صرف کارای تکراری نکنید و به اجزای اصلی بپردازید .
بوت استرپ بسیار قدرتمنده و طیف وسیعی از المان های کاربردی و مورد نیاز طراحان و توسعه دهندگان وب رو فراهم کرده
اگه هنوز مفهوم بوت استرپ رو متوجه نشدید اصلا نگران نباشید!
یک مثال ساده :
فرض کنید که توی قالبتون میخواید یه دکمه داشته باشید و از ظاهر پیش فرضش زیاد خوشتون نمیاد و میخواید یکم خوشگل ترش کنید . مثلا چنین کدی رو فرض کنید توی HTML دارید :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <title>Example</title> </head> <body> <button id="mybutton"> یک دکمه ی تستی </button> </body> </html>
و برای CSS هم کد زیر :
#mybutton{
background-color: lightblue;
font-family: tahoma;
border:none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
#mybutton:hover{
background-color: blue;
color: white;
}
این که این کدها و دستورها چیکار میکنن مربوط به بحث ما نیست و من فرض میکنم شما از این دستورات سر در میارید و اگه هم سر در نیاوردید آموزش رو موقتا ادامه ندید و از http://w3schools.com خیلی سریع این مباحث رو یاد بگیرید و اونوقت ما رو با این آموزش همراهی کنید. :)
خب بریم سراغ توضیح کدهای بالا ، توی بخش اول ما اومدیم یک ساختار ساده از صفحه مون رو تعریف کردیم و یک دکمه رو هم تعریف کردیم و براش یک شناسه mybutton در نظر گرفتیم و توی بخش دوم هم یک سری استایل های پایه رو بهش دادیم تا ظاهرش تغییر کنه .
حالا ما میخوایم بررسی کنیم ببینیم اگه بخوایم این کار رو با بوت استرپ انجام بدید چجوریاس؟! در ادامه متوجه میشید!
نحوه نصب و استفاده از بوت استرپ :
قدم اول اینه که به سایت بوت استرپ به آدرس http://getbootstrap.com برید و روی Download کلیک کنید و توی صفحه ای که باز میشه روی Download Bootstrap کلیک کنید تا پکیج بوت استرپ دانلود بشه .
وقتی دانلود شد محتویات پکیج رو استخراج کنید توی یک پوشه به نام bootstrap .
اگه دقت کنید توی پکیج سه تا پوشه داریم :
1-Css : شامل فایل های اصلی و در واقع هسته ی بوت استرپ که دو نوع فایل داره که یکی bootstrap.css هست و اون یکی bootstrap-theme.css ، اولی فایل اصلی فریمورک بوت استرپ هست و دومی هم یک فایل تم هست برای تعویض تم بوت استرپ . که استفاده از اون اختیاریه . این دو تا فایل هر کدوم یه نسخه ی کم حجم شده هم دارن که بعد از اسمشون کلمه ی min رو می تونید ببینید : مثلا bootstrap.min.css و ما هم با همین کار داریم.
2-Js : شامل فایل اصلی بوت استرپ هست که با bootstrap.js می تونید پیداش کنید که البته ما با bootstrap.min.js کار داریم.
البته بوت استرپ برای کارکرد صحیح خودش به کتابخانه ی jQuery هم نیاز داره که در ادامه در مورد فراخوانی جی کوئری هم میگم.
3-Fonts : بوت استرپ توی نسخه های قبلی برای این که به کاربران امکان درج آیکون بده ، از یک دسته آیکون بیت مپ استفاده میکرد ولی توی نسخه ی جدید ( 3 به بعد ) از یک سری فونت آیکون به نام Glyphicons Halflings استفاده کرد که اگه بخواید توی پروژه تون آیکون استفاده کنید می تونید از این فونت آیکون استفاده کنید.
البته این امکان وجود داره که از بسته های فونت آیکون دیگه بجای این بسته استفاده بشه که یکی از اون ها Fontawesome هست که توی جلسات مربوطه به تفصیل در موردش یاد میگیریم.
با توضیح مواردی که گفتم هر سه پوشه ی بالا رو کپی کنید کنار فایل HTML خودتون و فایل HTML رو توی یک ویرایشگر کد مثل Sublime Text باز کنید و فایل هسته ی بوت استرپ رو به وسیله ی کد زیر فراخوانی کنید ، این کد رو بین تگ head قرار بدید :
<link href="css/bootstrap.min.css" rel="stylesheet">
خب حالا باید فایل های جاوا اسکریپت مورد نیاز رو فراخوانی کنیم ، اول از همه حتما باید جی کوئری رو فراخوانی کنید ، که با قرار دادن کد زیر در انتهای تگ body یعنی قبل از جایی که تگ body بسته میشه ، می تونیم جی کوئری رو لود کنیم :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
بعد از اون باید فایل جاوا اسکریپت مربوط به بوت استرپ رو فراخوانی کنیم ، پس بعد از کد بالا کد زیر رو قرار بدید :
<script src="js/bootstrap.min.js"></script>
دقت کنید که ترتیب این دو فایل مهمه و حتما اول باید جی کوئری فراخوانی بشه و بعدش مث بالا فایل بوت استرپ فراخوانی بشه.
خب ! تا اینجا ما بوت استرپ رو نصب کردیم!
حالا بین تگ body کد زیر رو قرار بدید :
<button>دکمه ی تست</button>
اگه صفحه رو رفرش کنید یه دکمه می بینید که استایلی نداره ! درسته . حالا برای این که ظاهرش رو تغییر بدید نیازی نیست استایل های مثال قبلی رو بنویسید ، فقط دو تا کلاس داخلی بوت استرپ رو به دکمه بدید ، یعنی :
<button class="btn btn-primary">دکمه ی تست</button>
حالا فایل رو ذخیره کنید و صفحه رو رفرش کنید ، اگه شمایل دکمه تغییر پیدا کرد ، بهتون تبریک میگم شما اولین پروژه ی بوت استرپی خودتون رو اجرا کردید ! ولی اگه تغییری احساس نکردید ، باید چک کنید ببینید مشکل از کجاست ، احتمالا مسیر فایل های بوت استرپ صحیح نیست.
توی جلسه ی آینده یه مثال دیگه رو هم اجرا می کنیم.