آیا شما یک توسعه دهنده فراند اند هستید که از نوشتن پی در پی متن های CSS خسته شده اید؟ این نشانه ای برای شروع استفاده از Bootstrap است! در این مقاله مزایای استفاده از چارچوب وب و نحوه صحیح تعبیه آن در پروژه شما ارائه خواهد شد.
بوت استرپ چیست؟
شما احتمالاً با عملکرد چارچوب ها (framework) آشنا هستید. آنها به توسعه دهندگان اجازه می دهند خیلی سریعتر وب سایت بسازند زیرا نیازی به نگرانی در مورد دستورات و عملکردهای اساسی نیست.
با وجود این، عدم وجود سازگاری به دلیل استفاده گسترده از کتابخانه ها که خواستار تغییر بودند. بوت استرپ به تماس پاسخ داد!
فریم ورک منبع باز ، فرانت اند در ابتدا توسط Mark Otto و جacob Thornton برای توسعه سریعتر و آسان تر front end وب ساخته شده است.
این شامل انواع قالب های HTML و CSS مبتنی بر طراحی برای توابع و مؤلفه های مختلف از جمله ناوبری، سیستم شبکه، چرخ فلک تصویر و دکمه ها است.
در حالی که بوت استرپ باعث می شود، در زمان برنامه نویس برای مدیریت مکرر قالبها صرفه جویی شود، اما هدف اصلی آن ایجاد سایت های پاسخگو است. این اجازه می دهد تا رابط کاربری وب سایت در همه اندازه های صفحه (موبایل، تبلت، لپ تاپ و …) کار کند.
بنابراین، توسعه دهندگان نیازی به ایجاد سایت های خاص دستگاه و محدود کردن دامنه مخاطبان خود ندارند.
به دلیل محبوبیت آن، انجمن های بوت استرپ بیشتر و بیشتر ظهور می کنند.
این مکانها برای تبادل دانش و بحث در مورد آخرین تکه های چارچوب، مکانی عالی برای توسعه دهندگان و طراحان است.
3 فایل اصلی بوت استرپ
همانطور که Bootstrap از مجموعه ای از نحوها تشکیل شده است که عملکردهای خاصی را انجام می دهند، فقط این حس را می یابد که این چارچوب انواع مختلفی از پرونده ها را در خود دارد. در اینجا سه فایل اصلی وجود دارد که رابط کاربری و عملکرد یک وب سایت را مدیریت می کنند.
Bootstrap.css
Bootstrap.css یک چارچوب CSS است که چیدمان یک وب سایت را تنظیم و مدیریت می کند. در حالی که HTML محتوا و ساختار یک صفحه وب را مدیریت می کند، CSS به چیدمان سایت می پردازد. به همین دلیل، هر دو ساختار برای انجام یک عمل خاص نیاز به همزیستی دارند.
با توجه به کارکردهای آن، CSS به شما امکان می دهد تا هر تعداد صفحه وب که می خواهید، به شکل یکنواخت ایجاد کنید.
با استفاده از CSS، تنها کاری که باید انجام دهید مراجعه به صفحات وب به فایل CSS است. هرگونه تغییر لازم فقط در آن پرونده قابل انجام است.
عملکردهای CSS فقط به استایل متن محدود نمی شوند زیرا می توانند برای قالب بندی سایر جنبه های صفحه وب مانند جداول و طرح بندی تصویر استفاده شوند.
Bootstrap.js
این پرونده قسمت اصلی Bootstrap است. این شامل پرونده های جاوا اسکریپت است که مسئول تعامل وب سایت هستند.
برای صرفه جویی در وقت از نوشتن چندین باره نحوهای JavaScript ، توسعه دهندگان تمایل دارند از jQuery استفاده کنند. این یک کتابخانه جاواسکریپت با منبع باز است که به شما امکان می دهد قابلیت های مختلفی را به یک وب سایت اضافه کنید.
در اینجا چند مثال از آنچه جی کوئری می تواند انجام دهد وجود دارد:
- درخواست های Ajax مانند تفریق داده ها از یک مکان دیگر را به صورت پویا انجام دهید
- با استفاده از مجموعه افزونه های JavaScript ابزارک ایجاد کنید
- با استفاده از خصوصیات CSS انیمیشن های سفارشی ایجاد کنید
- پویایی را به محتوای وب سایت اضافه کنید
در حالی که یک بوت استرپ با خصوصیات CSS و عناصر HTML می تواند عملکرد خوبی داشته باشد، برای ایجاد یک طراحی پاسخگو به jQuery نیاز دارد. در غیر این صورت، شما فقط می توانید از قسمت های ساده و استاتیک CSS استفاده کنید.
به اطلاعات بیشتری نیاز دارید؟ برای کسب اطلاعات بیشتر می توانید مقاله جی کوئری را ببینید.
Glyphicons
آیکن ها بخشی جدایی ناپذیر از قسمت ظاهر یک وب سایت هستند. آنها غالباً با اقدامات و داده های مشخصی در رابط کاربر مرتبط هستند. بوت استرپ برای تحقق آن نیاز، از Glyphicons استفاده می کند.
بوت استرپ شامل یک مجموعه Glyphicons Halflings است که برای استفاده رایگان باز شده است. نسخه رایگان دارای ظاهری استاندارد است و برای عملکردهای اساسی کافی است.
اگر می خواهید آیکن شیک تری پیدا کنید، Glyphicons مجموعه های حرفه ای متنوعی را به فروش می رساند که بدون شک تاثیر گذاری خاصی در وب سایت ها خواهند داشت.
همچنین می توانید در وب سایت های مختلف مانند Flaticon, GlyphSearch و Icons8 آیکن های اختصاصی و حرفه ای را به صورت رایگان دانلود کنید.
برخی از آیکن ها می توانند تحت تأثیر CSS قرار بگیرند تا ظاهر خود را تغییر دهند، در حالی که برخی آیکن های دیگر پیش فرض دارند. از نمادهایی استفاده کنید، که بهترین گزینه برای رفع نیاز سایت شما باشد.
نحوه استفاده از بوت استرپ
برای به دست آوردن یک تصویر بهتر از نحوه استفاده از bootstrap، به مثال زیر توجه کنید.
<html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
meta charset="utf-8"
مجموعه کاراکترهایی را که برای نوشتن وب سایت استفاده می شود بیان می کند.
meta http-equiv="X-UA-Compatible"
نسخه اینترنت اکسپلورر را که باید صفحه را ارائه دهد، تعیین می کند. با استفاده از حالت Edge ، قرار است از بالاترین حالت موجود استفاده شود.
meta name="viewport"
تضمین می کند که صفحه دارای نسبت 1: 1 با اندازه نمایی باشد.
link href="css/bootstrap.min.css" rel="stylesheet"
این بخشی است که در آن ما Bootstrap core CSS را اضافه می کنیم.
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
jQuery را از طریق Google CDN بارگیری می کند. بهتر است آن را از CDN از طریق HTTP بارگیری کنید زیرا پرونده ها برای یک سال ذخیره می شوند.
src="js/bootstrap.min.js
هسته اصلی Bootstrap جاوا اسکریپت را اضافه می کند. این نحو برای عملکرد صحیح همیشه باید زیر نحو jQuery باشد. روند اضافی می تواند از طریق URL یا بارگیری دستی گوگل انجام شود.
جمع بندی
Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد، که در این مقاله با آن آشنا شدید. همچنین ممکن است بخواهید مقاله دیگری از سایت ما را با عنوان AJAX چیست مطالعه فرمایید.