آموزش نصب بوت استرپ 5 و راه اندازی اولیه آن

پیش نیاز: برای مطالعه این دوره باید با CSS و نحوه کار آن آشنایی حداقلی داشته باشید. هیچ نیازی به داشتن مهارت در CSS نیست اما باید مکانیسم عمل CSS و کلیات آن را بدانید.

پیشنهاد می کنیم دوره آموزش جامع و پروژه محور HTML و CSS از صفر تا صد را مشاهده کنید.

همچنین در صورتی که تمایل دارید بوت استرپ را بصورت ویدیویی آموزش ببینید، در دوره آموزش مقدماتی تا پیشرفته بوت استرپ شرکت کنید.

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

بوت استرپ (bootstrap) از کتابخانه هایی است که تعداد طرفداران بسیار زیادی در سراسر دنیا دارد. کمتر کسی است که در دنیای وب با نام بوت استرپ آشنایی نداشته باشد اما در صورتی که از آن خبر ندارید به صورت خلاصه می توان گفت که بوت استرپ مشهور ترین فریم ورک CSS دنیا برای ساخت صفحات واکنش گرا و mobile-first است. اگر در حوزه طراحی front-end کار کرده باشید، می دانید که طراحی صفحات واکنش پذیر به صورت دستی فرآیندی زمان بر است و امروزه کمتر کسی است که طراحی CSS را از صفر انجام بدهد. حتی برای پروژه های بسیار کوچک از کتابخانه های مینیمالی مانند Skeleton استفاده می شود که تنها چند کیلوبایت حجم دارد.

با این همه بوت استرپ می تواند در تمام پروژه های کوچک و بزرگ استفاده شود اما معمولا برای پروژه های متوسط و بزرگ کاربرد بیشتری دارد.

نصب و راه اندازی بوت استرپ

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

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

بخش CSS

در ابتدا به کدهای CSS نیاز داریم که ساده ترین راه دانلودشان، استفاده از یک CDN است:

شما می توانید این لینک را در تگ <head> از فایل HTML خود کپی کنید تا بتوانید از کلاس های CSS استفاده کنید. اگر می خواهید از قابلیت های ساده بوت استرپ استفاده کنید، همین فایل CSS کافی است و نیازی به دانلود فایل های جاوا اسکریپت نخواهید داشت اما اگر قابلیت های پیشرفته تری مانند tooltip ها را می خواهید باید از کدهای جاوا اسکریپت نیز استفاده کنید.

بخش JavaScript

برای استفاده از بخش جاوا اسکریپتی بوت استرپ چند روش مختلف دارید. ما هر چهار روش را در این بخش بررسی می کنیم. لیست زیر، لیستی از تمام کامپوننت هایی است که برای استفاده از آن ها باید بخش جاوا اسکریپتی بوت استرپ را نیز فعال کنید:

Alert هایی که به صورت خودکار حذف می شوند.
دکمه های تغییر وضعیت (از نوع checkbox/radio) مانند تم سیاه و سفید
Carousel ها (بنر های تصویری بزرگ که تصویرشان به صورت خودکار تغییر می کند)
منوی های collapse شونده (منو هایی که با کلیک روی آن ها، محتویاتشان مخفی می شود)
منوی های آبشاری خاص (نیاز به popper نیز دارند)
Navbar هنگامی که از پلاگین Collapse نیز استفاده کند (مربوط به طراحی واکنش گرا)
Toast ها
tooltip ها و popover ها (به کتابخانه popper نیاز دارند)
Scrollspy

استفاده از bundle

bundle به معنی مجموعه کد است و همانطور که حدس می زنید bundle های بوت استرپ، مجموعه ای از تمام کدهای جاوا اسکریپت مورد نیاز توسط بوت استرپ هستند تا نیازی به نصب و استفاده جداگانه آن ها نباشد. ما دو bundle در بوت استرپ داریم (bootstrap.bundle.js و نسخه فشرده آن که bootstrap.bundle.min.js است) و هر دو شامل کتابخانه popper می شوند (کتابخانه popper برای استفاده از tooltip ها است). اگر می خواهید از bundle استفاده کنید، راحت ترین کار کپی کردن لینک CDN زیر در تگ <head> از فایل HTML است:

دانلود جداگانه

در صورتی که تمایلی به استفاده از popper ندارید می توانید فقط از لینک زیر استفاده کنید:

این لینک کدهای جاوا اسکریپت لازم برای کار با بوت استرپ را به شما می دهد اما کتابخانه popper را شامل نمی شود. توجه داشته باشید که اگر بخواهید از popper نیز به صورت جداگانه استفاده کنید، حتما باید آن را قبل از دیگر فایل های جاوا اسکریپت بارگذاری کنید:

بوت استرپ به عنوان ماژول

بوت استرپ نسخه ای به شکل ESM دارد که مخفف ES Modules است. اگر با نسخه ES6 از جاوا اسکریپت آشنا باشید حتما می دانید که ES Modules یکی از قابلیت های آن برای وارد کردن ماژول ها در یک فایل است. به طور مثال:

import React from 'react';

یک مثال دیگر:

import {foo, bar} from './myLib';

با این حساب می توانید از کدهای جاوا اسکریپت بوت استرپ به شکل ماژول های جاوا اسکریپتی استفاده کنید:

import { Toast } from 'bootstrap.esm.min.js'

Array.from(document.querySelectorAll('.toast'))

.forEach(toastNode => new Toast(toastNode))

</script>

البته توجه داشته باشید که اگر از این روش جلو بروید، مرورگر های بسیار قدیمی (قبل از ES6) را پشتیبانی نخواهید کرد. نهایتا قالب کلی ما به شکل زیر خواهد بود:

<!doctype html>

<head>

<title>Hello, world!</title>

</head>

<body>

<h1>Hello, world!</h1>

<!--

-->

</body>

</html>

تمام چیز هایی که در این بخش توضیح دادم در این کد نمایش داده شده است.

نکته: از این بخش به بعد، برای افراد علاقمند نوشته شده است. من پیشنهاد می کنم یکی از روش های توضیح داده شده تا همین قسمت را انتخاب کرده و مستقیما به بخش «زبان های راست چین»‌ بروید. دیگر قسمت های این مقاله برای افرادی نوشته شده است که از پروژه های خاصی مانند webpack استفاده کرده و می خواهند با SASS استایل هایشان را بنویسند.

روش های پیاده سازی بوت استرپ در پروژه

برخی از شما پروژه هایی دارید که از قبل تعریف شده اند و ممکن است به هر دلیلی تمایلی به استفاده از CDN و امثال آن نداشته باشید و نمی خواهید چیزی به فایل HTML خود اضافه کنید. در این حالت روش های دیگری نیز وجود دارد که می توانید از آن ها استفاده کنید. به طور مثال می توانید با npm کار کنید یا سورس کد را مستقیما دانلود کنید و یا اینکه به سراغ webpack بروید.

دانلود بوت استرپ و سورس کد آن

یکی از روش های دیگر استفاده از بوت استرپ این است که آن را مستقیما دانلود کنید. برای دانلود بوت استرپ باید به این صفحه مراجعه کنید. همچنین باید بدانید که بسته دانلود شده شامل فایل های CSS و JavaScript است اما شامل کتابخانه های دلخواه مانند popper نمی شود بنابراین باید آن را به صورت دستی اضافه کنید. معمولا دو دسته از افراد بوت استرپ را دانلود می کنند؛ افرادی که از فریم ورک های خاصی مانند لاراول استفاده می کنند و باید فایل استایل ها را به صورت جداگانه داشته باشند تا به webpack بدهند و افرادی که می خواهند از قابلیت های caching استفاده کنند.

همچنین اگر بخواهید می توانید سورس کد بوت استرپ را نیز از این صفحه دانلود نمایید. بوت استرپ با Sass نوشته شده است بنابراین افرادی که می خواهند بوت استرپ را به سلیقه خودتان ویرایش کنند می توانند کدهای Sass را ویرایش کرده و سپس به CSS کامپایل کنند.

نصب با npm و yarn

شما می توانید بوت استرپ را با استفاده از package manager های مختلفی مانند npm و yarn به پروژه هایتان اضافه کنید اما یادتان باشد که با انجام این کار نیاز به DartSass و AutoPrefixer خواهید داشت. DartSass یک کامپایلر برای کدهای Sass بوده و AutoPrefixer نیز برای اضافه کردن پیشوند های برخی از دستورت CSS استفاده می شود که توسط برخی از توسعه دهندگان مرورگر ها اضافه شده اند (اطلاعات بیشتر در صفحه توسعه دهندگان موزیلا).

با این حساب اگر می خواهید از npm یا yarn یا امثال آن ها استفاده کنید حتما این دو پکیج را نیز به صورت جداگانه نصب کنید. حالا برای نصب از طریق npm از دستور زیر استفاده کنید:

npm install bootstrap@next

حالا باید در پروژه خود از یکی از دستورات زیر استفاده کنید تا بوت استرپ را در اسکریپت خود وارد کنید:

const bootstrap = require('bootstrap')

import bootstrap from 'bootstrap'

برای نصب از طریق yarn می توانید به شکل زیر عمل کنید:

yarn add bootstrap@next

برای نصب از طریق composer نیز چنین دستوری تعریف شده است:

composer require twbs/bootstrap:5.0.0-beta2

استفاده از jQuery

همانطور که می دانید در سال های قبل بوت استرپ از جی کوئری برای انجام عملیات های جاوا اسکریپتی خود استفاده می کرد اما دیگر اینطور نیست و جی کوئری کنار گذاشته شده است. البته توسعه دهندگان بوت استرپ برای کسانی که علاقه به استفاده از جی کوئری دارند نیز راهی گذاشته اند. در صورتی که جی کوئری را به شیء window اضافه کنید و attribute ای به نام data-bs-no-jquery روی <body> وجود نداشته باشد، بوت استرپ به صورت خودکار جی کوئری را تشخیص می دهد و از آن برای انتشار event هایش استفاده می کند.

استفاده از webpack

برخی از افراد از bundler هایی مانند webpack استفاده می کنند. در صورتی که می خواهید بوت استرپ را به چنین محیطی اضافه کنید این بخش را مطالعه کنید.

ابتدا باید بوت استرپ را به شکل یک ماژول npm به پروژه اضافه کنید و یا اینکه فایل را به صورت دستی در مسیر مناسب قرار بدهید. بهترین کار این است که سورس کد Sass بوت استرپ را دانلود کرده و آن را در مسیر bundling پروژه خود قرار بدهید (در ادامه روش کارش را توضیح می دهم).

در مرحله بعدی باید کد زیر را به entry point برنامه خود وارد کنید تا به پلاگین های مورد نظرتان دسترسی داشته باشید. entry point فایل اصلی پروژه شما است که در webpack نیز مشخص شده است و معمولا نام app.js یا index.js را دارد.

// مشخص کردن پلاگین هایی که به آن ها نیاز داریم

import { Tooltip, Toast, Popover } from 'bootstrap';

البته می توانید وارد کردن این پلاگین ها را به صورت تک تک نیز انجام بدهید:

import Alert from 'bootstrap/js/dist/alert';

در نظر داشته باشید که بوت استرپ در حال استفاده از کتابخانه popper است بنابراین برای اطمینان از کارکرد صحیح آن باید popper را نیز نصب کنید:

npm install @popperjs/core

در صورتی که می خواهید از سورس کد Sass استفاده نمایید باید فایل جدیدی به نام custom.scss_ را برای خودتان ایجاد کنید که حاوی استایل های شخصی خودتان است. حالا می توانید بوت استرپ را درون آن import کنید:

@import "custom";

@import "~bootstrap/scss/bootstrap";

در مرحله بعدی باید مطمئن شوید که sass-loader و postcss-loader و Autoprefixer را نصب کرده باشید چرا که بوت استرپ برای کامپایل شدن به آن ها نیاز خواهد داشت. در نهایت باید چنین قانونی را در فایل پیکربندی webpack خود نوشته باشید:

// دیگر دستورات و قوانین

{

test: /\.(scss)$/,

use: [{

// inject CSS to page

loader: 'style-loader'

}, {

// translates CSS into CommonJS modules

loader: 'css-loader'

}, {

// Run postcss actions

loader: 'postcss-loader',

options: {

// `postcssOptions` is needed for postcss 8.x;

// if you use postcss 7.x skip the key

postcssOptions: {

// postcss plugins, can be exported to postcss.config.js

plugins: function () {

return [

require('autoprefixer')

];

}

}, {

// compiles Sass to CSS

loader: 'sass-loader'

}]

}

// دیگر دستورات و قوانین

این یک روش استفاده بود اما شما می توانید به جای استفاده از Sass از کدهای کامپایل شده (CSS) نیز استفاده کنید. برای این کار باید کدهای کامپایل شده را به entry point (فایل اصلی) پروژه خود اضافه کنید:

import 'bootstrap/dist/css/bootstrap.min.css';

سپس مطمئن شوید که style-loader و css-loader در webpack شما نصب و فعال شده اند. در نهایت یک قانون ساده و به شکل زیر را در فایل پیکربندی webpack می نویسیم:

// دیگر دستورات و قوانین

module: {

rules: [

{

test: /\.css$/,

use: [

'style-loader',

'css-loader'

]

}

]

}

// دیگر دستورات و قوانین

زبان های راست چین

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

در مرحله اول باید خصوصیت "dir="rtl را روی تگ <html> خود در فایل های HTML قرار بدهید. همچنین خصوصیت "lang="fa را نیز به همین تگ اضافه کنید. در مرحله بعدی یک نسخه راست چین از بوت استرپ را به پروژه خودتان اضافه کنید:

در واقع همان مثالی که در ابتدای این مقاله برایتان توضیح دادم، برای زبان های راست چین به شکل زیر خواهد شد:

<!doctype html>

<head>

<title>متن فارسی</title>

</head>

<body>

<h1>متن فارسی دوم</h1>

<!--

-->

</body>

</html>

برای مشاهده مثال های راست چین می توانید به این صفحه مراجعه کرده و از بخش RTL (مخفف right to left) انواع و اقسام مثال های راست چین شده را مشاهده کنید. به طور مثال می توانید در این صفحه یک فرم check-out (تایید نهایی خرید) را مشاهده کنید که به صورت راست چین و زبان عربی نوشته شده است.

استایل های سراسری مهم

بوت استرپ چند استایل سراسری (global) مهم دارد که برای normalization استفاده می شوند. در دنیای CSS مفهومی به نام normalization وجود دارد که به یکسان سازی استایل ها در مرورگر های مختلف اشاره می کند. توسعه دهندگان مرورگر های مختلف مانند کروم و فایرفاکس از استایل های اولیه متفاوتی استفاده می کنند و در جزئیات تفاوت کوچکی دارند بنابرین معمولا کدهایی به نام css reset یا کدهای normalize دیده می شود که این تفاوت های کوچک را از بین می برند تا کدهای ما در تمام مرورگر ها دقیقا به یک شکل دیده شود. بوت استرپ نیز برای جلوگیری از متفاوت شدن استایل های ما در مرورگر های مختلف از چنین استایل های سراسری استفاده می کند بنابراین بهتر است آن ها را بشناسید تا سر در گم نشوید.

اولین استایل سراسری این است که بوت استرپ از HTML5 استفاده می کند بنابراین صفحات شما نیز باید به همین شکل باشد:

<!doctype html>

...

</html>

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

مسئله بعدی تگ متای viewport است. بوت استرپ به شکل mobile-first طراحی شده است؛ یعنی کدها ابتدا برای دستگاه های موبایل نوشته شده است و سپس با استفاده از media queries برای دسکتاپ ها تنظیم می شود. بنابراین برای اینکه مطمئن شویم سطح زوم برای تمام دستگاه های موبایل یکسان بوده و دچار بهم ریختگی نمی شویم باید تگ responsive meta tag را به صفحات خود اضافه کنید:

مسئله بعدی مبحث box-sizing است. حتما می دانید که box-sizing یکی از خصوصیات سایز دهی در CSS است. بوت استرپ مقدار این خصوصیت را از content-box روی border-box گذاشته است. با انجام این کار دیگر padding سایز نهایی عنصر را تغییر نمی دهد بنابراین برای طراحان راحت تر است اما ممکن است با برنامه های دیگری مانند Google Maps تداخل داشته باشد. معمولا چنین اتفاقی نمی افتد اما اگر چنین اتفاقی افتاد می توانید آن را به صورت خاص و برای بخشی خاص غیر فعال کنید:

.selector-for-some-widget {

box-sizing: content-box;

}

با انجام این کار عناصر یا ویجت هایی که با before: یا after: ساخته شوند، از کلاس selector-for-some-widget ارث بری می کنند و سایز دهی آن ها به content-box برمی گردد. در جلسه بعدی وارد مباحث عملی خواهیم شد.