آشنایی با فریم ورک طراحی قالب Bootstrap

فریمورک فرانت اند برازنده، قابل یادگیری و استفاده آسان، و قدرتمند برای طراحی سریع تر و آسان تر صفحات وب. ساختن یک وبسایت از پایه کار سختی است. حتی بعضی افراد که توانایی کد زدن به زبان های وب مثل JavaScript, HTML وCSS را دارند در طی ساخت یک وبسایت به مشکل بر میخورند. خوشبختانه تعدادی از توسعه دهنده ها و طراحان تویتر (Twitter) از این مشکل اطلاع دارند و فریمورکی به نام Bootstrap را راه اندازی کردند که زندگی را برای طراحان وب و توسعه دهندگان آسان تر کنند.در این مقاله نگاهی به Bootstrap میندازیم و چند تا از قابلیت های آن را امتحان میکنیم تا بفهمیم این فریمورک چطوری به کارمون سرعت میده.

استفاده کردن از Bootstrap

Bootstrap فریمورک بسیار قدرتمندی است برای توسعه دهندگان فرانت اند، و قابلیت های مختلفی همراه دارد که ما به آنها نیاز داریم برای ساخت سریع تر و آسان تر یک وبسایت کامل بدون اینکه نیاز داشته باشیم از صفر خودمان بسازیمش.
برخی از قابلیت های موجود در Bootstrap عبارتند از:
• شبکه (Grid) برای صفحه آرایی واکنش گرا (Responsive)
• CSS پایه برای فن چاپ (Typography)، دکمه ها (Buttons)، فرم ها (Forms)، جدول ها (Tables) و تصاویر.
• اجزا تشکیل دهنده محیط کاربری مانند پیمایش (Navigation)، میله پیشرفت کردن (Progress Bar)، هشدار ها (Alerts)، نوار پیمایش (Breadcrumbs) و… با سبک های ثابت و مدرن .
• plugin های jQuery برای ساختن تجربه محاوره ای (Interactive) در وبسایت .
حال ما فرض میکنیم شما Bootstrap رو دانلود کردین ( از twitter.github.com/bootstrap/index.html) و همه ی اسِت های (Assets) لازم که شامل جاوا اسکریپت (JavaScript) و CSS آماده هستند به صورت زیر؛
1 <link rel="stylesheet" href="css/bootstrap.css">
2 <script src="js/bootstrap.min.js" type="text/javascript"></script>

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

CSS اصلی: دکمه ها (Buttons)

Bootstrap سی اس اس پایه دارد که حاوی استایل هایی (styles) برای برخی از اجزای ابتدایی HTML شامل <button> است. Button یکی از اجزا معمولی است که در یک وبسایت بکار میرود و در Bootstrap استایل مربوط به آن توسط کلاس (class) به نام btn اعمال میشود؛

1 <button type="button" class="btn">Default Button</button>

نتیجه ی این مارک آپ بصورت زیر نمایش داده شده که استایل پیش فرض محسوب میشود؛

همچنین ما میتوانیم با اضافه کردن کلاس های بیشتر نقش دکمه رو تعریف کنیم؛

1 <button type="button" class="btn btn-success">Button</button>
2 <button type="button" class="btn btn-waing">Button</button>
3 <button type="button" class="btn btn-danger">Button</button>

متناسب با نقش آن هر دکمه یک رنگ متفاوتی میگیرد:

استایل Bootstrap با LESS ساخته شده. که استفاده آن را بجای CSS معمولی به شما توصیه میکنیم؛ کهبدین صورت استایل ها قابل تنظیم کردن بیشتری پیدا می کنند.
به عنوان مثال رنگ دکمه موفقیت (Success Button) به دیزاین شما زیاد نمی خورد؛ ما به راحتی میتوان متغیر هایی که در فایل variables.less موجود است را تغییر بدهیم، مثلا بدین صورت؛

1 @btnSuccessBackground: #bce895; //#62c462;
2 @btnSuccessBackgroundHighlight: #a0cd78; //#51a351;

چون بقیه آرگومان ها (Arguments) مانند سایه ها (Shadows) و گرادینت (Gradients) از قبل تنظیم شدند، استایل ها بصورت اتوماتیک هماهنگ میشوند نتیجه اش در تصویر زیر مشخص شده؛

- - , .