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

Bootstrap مجموعه ای از کدهای CSS از پیش نوشته شده است که به class های مختلفی متصل شده اند . به صورت ساده و کاربردی وقتی شما یک صفحه ی HTML طراحی می کنید در کنار آن یک فایل با پسوند css و به صورت معمول به نام style.css می سازید تا ظاهر این صفحه را با استفاده از کدهای css زیباتر کنید. در ضمن شما تگ های HTML را با ویژگی class و id آن ها در فایل های CSS شناسایی و ظاهر آن ها را  با css طراحی می کنید.

حال اگر به تعریف Bootstrap در بالا توجه کنید، bootstrap یک سری استایل را به class های مختلف انتساب داده است. تنها کاری که لازم است شما انجام دهید این است که این class ها را بشناسید و بدانید در چه تگ هایی از HTML  از آن ها استفاده کنید.

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

تعریف واکنش گرا بودن ( رسپانسیو بودن ) وب سایت یا همان اصطلاح Responsive Websites چیست ؟

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

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

مزایای 3 Bootstrap

آخرین نسخه Bootstrap نسخه ی 4 می باشد اما به دلیل پایداربودن نسخه 3 و جدیدبودن نسخه 4 ما از نسخه 3 استفاده می کنیم.

برخی مزایای Bootstrap 3 عبارتند از :

  • استایل های آماده و زیبا برای وب سایت شما
  • سرعت بخشی بسیار بالا به روند کد نویسی شما و طراحی ظاهر وب سایت
  • واکنش گرا یا responsive کردن وب سایت شما به راحتی

 

شروع کار با Bootstrap 3

قبل از هر چیزی در تگ <head> وب سایت خود تگ meta زیر را قرار دهید، با قرار دادن این کد اولین قدم برای واکنش گرا کردن وب سایت خود را برداشته اید:

و همچنین کد زیر را درون تگ <head> وب سایت قرار دهید تا Bootstrap به سایت شما اضافه شود:

دربالا دو فایل جاوا اسکریپت و یک فایل css اضافه کردیم. شما می توانید آن ها را با استفاده از لینک داده شده در ویژگی src آن ها دانلود کنید و در وب سایت خودتان آن ها را ذخیره کرده و به آن ها لینک دهید. اما اگر در لوکال هاست و به صورت بالا از آن ها استفاده می کنید باید حتماً به اینترنت متصل باشید.

توضیه ما به شما استفاده از کد بالا می باشد چرا که سایت های زیادی از کد های بالا استفاده می کنند و وقتی یک کاربر به سایت آن ها می رود این کد ها به صورت کش در مرورگر آن ها ذخیره می شود و هنگامی که یکی از این بازدیدکنندگان به سایت شما بیاید سایت شما سریع تر به نمایش در می آید.

ساخت اولین صفحه با Bootstrap 3

یک صفحه ی HTML ساده می سازیم و کدهای زیر را به آن اضافه می کنیم تا Bootstrap 3 به صفحه ما اضافه شود. مانند زیر:

حال 2 قطعه کد زیر را به صورت جداگانه درون تگ body قرار می دهیم و نتیجه را نمایش می دهیم.

  • کلاس container : برای ثابت بودن و در عین حال واکنش گرا بودن عرض صفحه استفاده می کنیم.
  • کلاس container-fluid : برای تمام عرض بودن صفحه استفاده می کنیم.

و نتیجه در عکس پایین مشخص است:

رسپانسیو کردن صفحات با استفاده از سیستم Grid-View در Bootstrap 3

در آموزش رسپانسیو کردن صفحات وردپرس با CSS طرح Grid را توضیح داده ایم. در این جا به اختصار توضیح می دهیم.

Grid-view طرحی است که با استفاده از آن صفحه وب سایت در هر دستگاهی به صورت 12 ستون ( به انگلیسی column ) طراحی می شود. شما می توانید در یک صفحه وب سایت  اندازه یک عکس در گوشی هوشمند را 12 ستون یعنی کل عرض صفحه در نظر بگیرد و اندازه همان عکس را برای لپ تاپ 3 ستون یعنی یک چهارم عرض صفحه در نظر بگیرید.

و تمام این کار تنها با استفاده از دو class امکان پذیر است و در کد زیر آن را می بینید:

در Bootstrap 3 از 4 کلاس برای دستگاه های مختلف استفاده شده است:

  1. col-xs : برای گوشی های هوشمند و یا دستگاه های با عرض کم تر از 768 پیکسل
  2. col-sm : برای تبلت ها و یا دستگاه های با عرض برابر یا بیش تر از 768 پیکسل
  3. col-md : برای لپ تاپ های کوچک یا دستگاه هایی با عرض برابر یا بیش تر از 992 پیکسل
  4. col-lg : برای لپ تاپ ها و دستگاه هایی که عرض برابر یا بیش تر از 1200 پیکسل دارند.

وقتی که تمام کلاس های بالا را برای تگ های مختلف ( tags ) در HTML تعریف کنید، کاربر با هر دستگاهی وارد وب سایت شما شود عرض دستگاه توسط مرورگر تشخیص داده می شود و در حیطه ی هر کدام از کلاس های بالا قرار بگیرد آن کلاس فعال می شود و اندازه ای متناسب با دستگاه کاربر به آن می دهد.

در مثال زیر برای یک تصویر از هر 4 کلاس استفاده کردیم پس نتیجه را ببینیم.

با استفاده از ابزار inspect در مرورگر Google chrome اندازه ی تصویر را در دستگاه های مختلف مشاهده می کنیم:

همان طور که می بینید چون هر ردیف در سیستم Grid-View به 12 ستون تقسیم شده است:

با استفاده از کلاس col-lg-3 که lg برای دستگاه های عریض تر از 1200 پیکسل به کار می رود، عکس بر اساس 3 استفاده شده تنها 3 ستون از 12 ستون یا یک چهارم صفحه را می گیرد.
با استفاده از کلاس col-md-4 که md برای دستگاه های عریض تر از 992 پیکسل است، عکس بر اساس 4 به کار رفته 4 ستون از صفحه یا یک سوم آن را اشغال می کند.
با استفاده از کلاس col-sm-6 که sm برای دستگاه های عریض تر از 768 پیکسل است، عکس بر اساس 6 به کار رفته 6 ستون از صفحه یا نصف آن را می گیرد.
و در آخر با کلاس col-xs-12 که xs مخصوص صفحه هایی با عرض کم تر از 768 پیکسل هست، عکس بر اساس 12 به کار رفته شده تمام 12 ستون یا کل صفحه را می گیرد.

در تمام این موارد ارتفاع یا height تصویر اتوماتیک می باشد.

تعریف کلاس مهم row

همان طور که گفتیم هر صفحه به 12 ستون در Bootstrap تقسیم شده است . این 12 ستون باید داخل یک class دیگر به اسم row قرار بگیرد تا به درستی عمل کند به خصوص در مواقعی که قصد دارید از تگ های تودرتو استفاده کنید. به تگ با کلاس row ردیف می گوییم . پس هر کلاس row باید دربردارنده ی جمعاً 12 ستون باشد، تا بتوانید یک کلاس row دیگر تعریف کنید. به مثال های زیر در مورد قرار گرفتن row ها و col ها در کنار یکدیگر و موقعیت آن ها توجه کنید:

نتیجه کد بالا را با قرار دادن درون تگ <body>  خودتان در مرورگر با تغییر سایز مرورگر امتحان کنید:

در کد بالا ابتدا یک ردیف با دو ستون به اندازه ی 8 و 4  ساخته ایم سپس درون ستون به اندازه ی 8 را به یک ردیف تقسیم کرده ایم که به دو قسمت مجزای 6 ستونه تقسیم می شود.

پس درون هر تگ حتی یک تگ <span> کوچک را نیز می توانیم با استفاده از کلاس row به 12 قسمت تقسیم کنیم.

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

  • اول محتویات col-sm-8 نمایش داده می شود
  • دوم محتویات col-sm-6 سمت چپ
  • سوم محتویات col-sm-6 سمت راست
  • و آخر col-sm-4

پس اگر در صفحه ای برای همه ی اجزای آن صفحه از هر چهار نوع کلاس ها ( col-lg , col-md , col-sm , col-xs ) استفاده کنیم در تمام دستگاه ها وب سایت واکنش گرایی خواهیم داشت . اگر از دو تا به عنوان مثال کلاس مربوط به گوشی هوشمند ( xs ) و لپ تاپ های بزرگ ( lg ) استفاده کنیم صفحه ی ما برای این دو دستگاه بهینه می شود.

 

مثال کامل از سایت واکنش گرا

وب سایتی با قالبی به شکل زیر را در نظر بگیرید:

وقتی کاربری با لپ تاپ بزرگ وارد این صفحه می شود، صفحه را به همین شکل می بیند، اما هنگامی کاربر با گوشی هوشمند وارد وب سایت می شود، منو یا Navbar به صورت کشویی درمی آید و در ردیف اول قرار می گیرد. سپس در ردیف بعدی ستون سمت چپ با عرض 12 ستون قرار می گیرد. در ردیف سوم محتوای با عرض 8 ستون در عکس بالا به صورت 12 ستون در ردیف سوم قرار می گیرد. ردیف چهارم ستون سمت چپ با عرض 12 ( یا تمام عرض ) قرار می گیرد. و در آخر footer سایت.

کد زیر را در یک فایل HTML قرار بدهید و سایز صفحه را با ابزار Inspect هر مرورگر تغییر دهید و نتیجه ا ببینید. در این کد از نکات مربوط به آموزش رسپانسیو کردن وب سایت با CSS نیز استفاده کرده ایم :

که واکنش گرا بودن آن را با تغییر سایز صفحه می بینید.

عکس صفحه :

این تمام کاری نیست که می توانید با Bootstrap 3  انجام دهید در پست های آینده بیشتر در مورد Bootstrap 3 صحبت خواهیم کرد.

امیدوارم که این آموزش برای شما مفید واقع شود .

پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .