menu

ابزار های توسعه دهنده ی مدرن وب

twitter Bootstrap

چهارشنبه 17 شهریور 1395

Twitter Bootstrap، یکی از معروف ترین فریم ورک های front-end هست که توی وب سایت های خیلی خیلی زیادی ازش استفاده شده و اینقدر درباره اش صحبت شده که گفتن چیز جدید و یا حتی بازگو کردن همان مطالب قدیمی هم سخته. ولی از اونجایی که قراره ما توی این کتاب، ابزارهایی را که یه توسعه دهنده ی مدرن وب ازشون استفاده میکنه را معرفی کنیم، واقعا ظالمانه است که از Bootstrap حرفی نزنم.

البته ذکر این نکته هم واجبه که Twitter Bootstrap اینقدر امکانات و کامپوننت های مختلفی در اختیار آدم قرار میده، که توضیح کامل این فریم ورک خودش یه کتاب جدا می طلبه؛ پس اینجا من قراره فقط به معرفیش بپردازم و کمی البته باهاش کار کنم و بررسی موشکافانه ی اون را به عهده ی خود شما میزاریم

بریم سراغ این بوت استراپ

اول از همه بیاین یه سری به وب سایتش بزنیم، اینجا

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

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

پس ما میریم سراغ آخرین نسخه ی پایدار اون، یعنی نسخه ی 3.3.7

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

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

Bootstrap ) دانلود نسخه ی کامپایل شده و فشرده شده

Source) دانلود داکیومنت هاش به همراه کد های سورس اون که هنوز کامپایل نشده اند

Sass ) نسخه ای که بر اساس Sass نوشته شده

ما برای کار، روی Bootstrap کلیک میکنیم تا نسخه ی کامپایل شده و فشرده اش را دانلود کنیم و از حالت فشرده خارج میکنیم (پیشنهاد میکنم بعدا خودتون یه نگاهی به نسخه ی source code اون بندازید و داکیومنت هاش را بخونید)

بریم که کار با بوت استراپ را شروع کنیم. برای شروع یه فایل ساده ی index.html میسازیم که توش چند تا تگ h با یه تگ p باشه

<!DOCTYPE html>
<html>
<head>
	<title>Twitter Bootstrap</title>
</head>
<body>
	<h1>Header 1</h1>
	<h2>Header 2</h2>
	<h3>Header 3</h3>
	<p>Just a simple Text here!</p>
	<p>Noisy !</p>
</body>
</html>

بزارید ببینیم نتیجه ی این صفحه تا الان چه شکلی شده

الان وقت اون هست که بوت استراپ را داخل پروژه مون دخیل کنیم. بوت استراپ دو تا پوشه ی اصلی داره. پوشه ی css و پوشه ی js

داخل پوشه ی css هم چند تا فایل هست. bootstrap.css و bootstrap.min.css . این دو تا فایل اصلی هستند که یکیش نسخه ی عادی هست و یکیش نسخه ی فشرده شده. شما میتونید نسخه ی عادی را باز کنید و بخونید ببینید چیا توش هست، ولی بهتره که نسخه ی فشرده را داخل پروژه تون وارد کنید، چون که این دو تا با هم فرقی ندارن، ولی نسخه ی فشرده حجمش خیلی کمتره

یه فایل bootstrap-theme هم هست توش که یه theme هست که بر اساس بوت استراپ نوشته شده که میتونید ازش استفاده کنید. ولی چون ما فعلا یه پروژه ی خیلی ساده داریم دلیلی برای استفاده ازش وجود نداره

توی پوشه ی js هم دوتا فایل bootstrap.js و bootstrap.min.js هست که این دو هر دو تاشون یکی هستن، ولی یکی فشرده و یکی عادی. توصیه میکنم که یه نگاهی به نسخه ی عادیش بندازید، برای یادگیری خوبه ولی توی پروژه هاتون از فایل فشرده شده استفاده کنید

میریم که با این دو تا فایل را داخل فایل index.html خودمون وارد کنیم

کد زیر را داخل تگ head میزنیم

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">	
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

دقت کنید که فایل js مربوط به bootstrap را بعد از jquery بزنید (چون فایل js بوت استراپ بر اساس jquery نوشته شده)

و نتیجه اش را میبینیم

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

بهتره اول سری به قسمت css اون بزنیم. اینجا

همونطور که میبینید امکانات بسیار زیادی داره

از قسمت های Mobile First گرفته تا Typography ها

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

css های زیادی برای بهبود ظاهر فرم هاتون، دکمه هاتون، متن هاتون، جدول ها و... داره که خودتون میتونید ازش استفاده کنید

ولی برای مثال، تنها به قسمت Helpers یه سری میزنیم

ما میخواهیم از قسمت Contexual Colors استفاده کنیم و کاری کنیم که یه متن ساده توی صفحه مون رنگش به صورت هشدار باشه. یه متنی که موقع هشدار به کاربر نمایش داده میشه. همونطور که توی داکیومنتش که تصویرش را بالا میبینید گفته، کافیه کلاس text-warning را به p خودمون اضافه کنیم

<p class="text-warning">This is a warning Text</p>

به همین سادگی!

یا مثلا ما یه دکمه میخواهیم که موقعی که یه عملیات با موفقیت انجام شد به کاربر نمایش بده

همونطور که اینجا گفته کافیه به button خودمون کلاس btn btn-success را بدیم

بد نیست یه سری هم به سیستم Layout اونها بزنیم؛ اینجا

اینجا خیلی ساده بهمون میگه که برای داشتن یه سیستم ریسپانسیو با بلاک ها و اندازه های مختلف، از چه کلاس هایی استفاده کنیم و کلا این قسمت Grid برای داشتن یه وب سایت ریسپانسیو خیلی مفیده

 

علاوه بر این امکانات css که مطمئنا به زیبا شدن طراحی سایت ما کمک زیادی میکنه، بوت استراپ پلاگین های زیادی بر اساس جی کوئری و همینطور کامپوننت های بسیار زیادی را در اختیار ما میزاره

بهتره اول یه سری به کامپوننت ها بزنیم.

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

از بین لیست بلندبالای کامپوننت ها، من از Progress bar ها خیلی خوشم میاد!

پس بزارید از یه Progress bar استفاده کنیم. فرض کنید شما توی صفحه تون یه معرفی پروژه دارید و میخواید بگید که فلان پروژه، 70 درصدش تکمیل شده

خیلی راحت، شیک و مجلسی میتونید از یه Progress bar مثل کد زیر استفاده کنید

<div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
        <span class="sr-only">70% Complete</span>
    </div>
</div>

به عنوان آخرین قسمت بوت استراپ، بد نیست یه سری هم به پلاگین های جی کوئریش بزنیم؛ اینجا

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

همونطور که میبینید، پلاگین های خیلی زیاد و متنوعی هست

به عنوان مثال، یه سری به قسمت Tooltip اون میزنیم

قراره که یه متن Noisy داشته باشیم، که وقتی موس میره روش یه Tooltip نشون بده

برای این کار، همونطور که داکیومنت گفته، فقط کافیه کد زیر را بزنیم

<a href="#" class="noisy" data-toggle="tooltip" title="Some tooltip text!">Noisy!</a>
<script type="text/javascript">
    $('.noisy').tooltip();
</script>

خب معرفی بوت استراپ هم اینجا به پایان رسید

ولی یه قسمت دیگه هم باقی مونده

همونطور که دیدید، بوت استراپ css ها، کامپوننت ها و js ها و پلاگین های خیلی زیادی داره که مطمئنا توی یه پروژه شما از همه ی اونها استفاده نخواهید کرد

و اگه متوجه شده باشید، فایل های bootstrap.min.css و bootstrap.min.js دارای تمام این کامپوننت ها و ابزار هاس و همین باعث شده حجم اون بره بالا و استفاده ازش توی یه وب سایت (اگه میخواید حجم وب سایت خودتون را پایین نگه دارید) خیلی معقول نباشه

اینجاس که قسمت Customize بوت استراپ به کار میاد

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

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

و اینگونه بود که این فصل هم به پایان خود رسید