Bootstrap چیست و چه کاربردی دارد؟
Bootstrap ( بوت استرپ ) چیست ؟
Bootstrap ( بوت استرپ ) یکی از قدرتمند ترین و محبوب ترین فریم ورک های HTML ، CSS و Javascript برای توسعه و طراحی سایت بصورت واکنش گرا در ابزارهای نمایش وب در اندازه های مختلف از جمله موبایل، تبلت و کامپیوترهای رومیزی می باشد، که امکان طراحی صفحات وب در کمترین زمان را به شما می دهد.
تاریخچه Bootstrap :
Bootstrap ( بوت استرپ ) توسط یک طراح و یک توسعه دهنده تویتر ایجاد شده است، و تبدیل به یکی از محبوب ترین فریم ورک های طراحی سایت و پروژه های منبع باز در جهان شد.
Bootstrap در اواسط سال 2010 در تویتر ساخته شد، قبل از اینکه به یک پروژه منبع باز تبدیل شود به عنوان blueprint در تویتر استفاده می شد.
تویتر چند ماهی را برای توسعه Bootstrap توسط تمام کسانی که مهارت کافی در زمینه طراحی وب سایت بدون هیچ راهنمایی خارجی داشتند، اختصاص داد. در هفته اول توسعه، این پروژه توسط توسعه دهندگان هک شد، بنابراین تویتر توسعه دهندگان را یک سال قبل از انتشار این چهارچوب طراحی وب، استخدام نمود تا پس از رفع باگ ها، آنرا گسترش دهند که تا به امروز این فعالیت همچنان ادامه داشته است.
پس از بررسی های مختلف و رفع ایرادات، بالاخره این فریم ورک جدید در 19 آگوست سال 2011 منتشر شد. قبل از این انتشار نهایی بیش از 20 بار در نسخه های آزمایشی منتشر شده بود و حتی دوبار هم بازنویسی شده بود که حاصل آن ورژن 2 و 3 Bootstrap می باشد.
در Bootstrap ورژن 2 قابلیت های واکنش گرایی به تمام چهارچوب آن به عنوان یک شیوه اختیاری افزوده شد و در Bootstrap ورژن 3 علاوه بر ویژگی های قبلی، واکنش پذیر بودن برای موبایل هم به آن افزوده شد. و اکنون شاهد طراحی ورژن 4 این فریم ورک محبوب هستیم.
این فریم ورک طراحی سایت توسط یک تیم موسس و یک گروه کوچک که هسته ارزشمند آن محسوب می شود، حمایت و محافظت می شود.
نام تجاریBootstrap از نام تجاری Mail chimp الهام گرفته شده است. آرم بوت استرپ فقط با دو عنوان مورد تایید می باشد که یکی فقط کاراکتر B با حرف بزرگ و دیگری کلمه کامل Bootstrap می باشد که در آن فقط B با حرف بزرگ و بقیه حروف باید بصورت کوچک باشند. فونت مربوط به این لوگو Helvetica Neue و بصورت ضخیم می باشد. در ضمن نوشتن کلمه Twitter قبل از آن و یا نوشتن کاراکتر s در Bootstrap با حرف بزرگ اشتباه می باشد. همچنین رنگ آمیزی این لوگو در طیف رنگ هایی که بنفش را شامل می شوند استاندارد می باشد. فریم ورک ( چهارچوب ) Bootstrap یک پروژه منبع باز ( Open source ) می باشد که میزبانی، توسعه و نگهداری آن در GitHub صورت می گیرد.
خصوصیات و ویژگی های Bootstrap ( بوت استرپ ) :
Bootstrap برای هرکسی در هر جایی شاخته شده است:
این چهارچوب مدرن، طراحی و توسعه وب سایت را سریعتر و آسان تر می کند و برای تمام توسعه دهندگان وب با هر نوع سطح مهارتی خلق شده است. و قابل استفاده در هر نوع ابزار نمایش وب و انواع پروژه ها در اندازه های مختلف می باشد.
استفاده از زبان پیش پردازنده در Bootstrap :
در Bootstrap از css استفاده شده است، اما سورس کد آن از دو منبع محبوب پیش پردازنده های css به نام های less و sass بهره گرفته شده است. بنابراین می توانید با سهولت و سرعت بیشتری از آن استفاده نمائید.
فقط یک فریم ورک Bootstrap برای تمام دستگاه و ابزار نمایش وب :
Bootstrap به راحتی و با قدرت بالا وب سایت ها و برنامه ی تحت وب شما را با یک کد پایه و استفاده از مدیا کوئری ها، از تلفن همراه به تبلت و یا از آنها به لپ تاپ و انواع کامپیوترهای رومیزی در اندازه نمایشگرهای متنوع با مقیاس استاندارد، منطبق میکند.
امکانات و ویژگی های متنوع در Bootstrap :
با استفاده از Bootstrap شما می توانید بی شمار مستندات گسترده و خلاقانه، المان های سفارشی و مشترک html، کامپوننت های css و پلاگین های زیبای جی کوئری در اینترنت جستجو کرده و دریافت نمائید. که برخی از این امکانات و کامپوننت های آماده شامل : تایپوگرافی، منوهای اصلی سایت، منو های بازشونده، فرم ها، دکمه ها، جداول، آکاردئون، تب های بازشونده، اسلایدر می باشند.
افزایش وب سایت های طراحی شده با Bootstrap :
میلیون ها وب سایت جذاب و شگفت انگیز در سراسر وب با استفاده از فریم ورک Bootstrap طراحی شده اند. و همچنان طراحی وب سایت با فریم ورک Bootstrap روز به روز در حال افزایش چشمگیری می باشد. طراحی سایت وب کو وب هم از این تکنولوژی مستثنی نبوده و هم در وب سایت خود و هم در سایت ها ی مشتریانش از زمانی که بوت استرپ بوجود آمده است، استفاده نموده که در این میان برخی از نمونه کارهای Bootstrap ما عبارتند از : 4kia.ir ، adselect.ir ، moghaddamco.com و غیره.
مزایای استفاده از Bootstrap ( بوت استرپ ) در طراحی وب سایت :
Bootstrap دارای مجموعه ی بیشماری از ابزارهای رایگان برای طراحی وب:
یکی از بزرگترین مزیت های استفاده از Bootstrap این است که دارای مجموعه ای رایگان از ابزارها برای لایه بندی صفحات وب و ایجاد صفحات واکنش گرا می باشد. این ابزارها رایگان می باشد و آنها را می توانید براحتی از اینترنت دانلود و بدون نوشتن حتی یک خط کد جاوا اسکریپت استفاده نمائید.
استفاده از فریم ورک Bootstrap یعنی صرفه جویی در زمان :
با استفاده از بوت استرپ و بکار بردن امکانات آماده و از پیش تعریف شده در طراحی قالب ها می تواند در زمان طراحی قالب گرافیکی سایت تا حد زیادی صرفه جویی نمود.
ویژگی های بوت استرپ در طراحی سایت واکنش گرا :
با استفاده از Bootstrap می توانید به راحتی لایه های پاسخگو و انعطاف پذیر را برای انواع ابزارهای نمایشگر وب و رزولیشن های متفاوت بدون کوچکترین مشکلی طراحی نمائید.
سهولت استفاده از Bootstrap :
استفاده از Bootstrap بسیار آسان می باشد و هر کسی با کمترین دانش در زمینه وب و آشنایی مختصری با html و css می تواند از آن برای اجرای اهداف خود استفاده نماید.
سازگار با انواع مرورگرهای وب:
Bootstrap با انواع مرورگرهای مدرن وب همچون موزیلا فایرفاکس، گوگل کروم، سفری، اینترنت اکسپلورر و اپرا سازگاری کامل دارد.
نتیجه گیری در مورد استفاده فریم ورک Bootstrap ( بوت استرپ ):
هدف از بوجود آمدن Bootstrap این است که براحتی و سرعت بالا و با درگیری های کمتر بین تگ های html، css و js بتوانید قالب ها، لایه ها و صفحات وب خود را بصورت پاسخگو و طراحی سایت واکنش گرا برای انواع مرورگرها و ابزارهای نمایشگر وب با کمترین دانش ایجاد نمائید.
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
افزایش سرعت سایت با mod_pagespeed گوگل برای Apache
بازدید: 706
افزایش سرعت سایت با mod_pagespeed گوگل برای Apacheتوسعه دهندگان نرم افزاری شرکت گوگل از دو سال پیش شروع به ساخت ماژول mod_pagespeed برای آپاچی (Apache) کرده‌اند که با استفاده از آن در سرور سایت خود بدون نیاز به هیچ گونه تغییراتی در محتوای سایت خود می‌توانید سرعت سایتهای خود را تا حد زیادی افزایش دهید و همان طور که می‌دانید یکی از نکات ضروری در مورد سئو و بهینه سازی سایت‌ها نیز همین سرعت پاسخگویی سرور و بارگذاری صفحات [...]
سئوی منفی چیست و چقدر نگران کننده است؟
بازدید: 1282
سئوی منفی ( Negative SEO ) در طراحی سایت سوالات زیادی را به همراه دارد. به عنوان مثال: سئوی منفی چیست؟ آیای سئوی منفی واقعا وجود دارد؟ اگر چنین است باید نگران چه چیزی بود؟ چگونه باید متوجه شد که کسی قصد حمله سئوی منفی به سایت ما را دارد؟ برای محافظت از سایت چه کاری باید انجام داد؟ هدف از این مقاله روشن شدن مبحث سئوی منفی در طراحی وب سایت و در نتیجه کاهش ترس شما از آن می باشد.سئوی منفی چیست؟سئوی منفی زمانی اتفاق می افتد [...]
ابزارها و وب سایتهای برای تست وب سایتهای طراحی شده در موبایل
بازدید: 666
با توجه به تنوع زیاد وسایل استفاده کننده از اینترنت مثل موبایل ، تلویزیون های هوشمند ، تبلت و ... در طراحی سایت و سئو سایت سازگار با تمامی وسایل بسیار مشکل خواهد بود یکی از مهمترین مشکلات عدم دسترسی به تمام وسایل و مدل ها برای تست های واقعی است.با توجه به این چالش بزرگ شبیه سازهای بسیار مختلفی برای تست و بررسی وب سایت ها در وسایل مختلف ساخته شده است. خوشبختانه شبیه سازهای موبایل انجام این کار را [...]
بررسی ده اشتباه بزرگ در کدهای HTML که نباید مرتکب شوید
بازدید: 713
HTML ( اچ تی ام ال ) اولین ، ساده ترین ، پرکاربردترین و مهم ترین زبان برای طراحی سایت است. صفحات اینترنتی شامل اطلاعاتی است که حاوی متن ، تصویر ، ویدئو ، صوت و… می باشد . این محتوا توسط سه لایه به کاربر نمایش داده می شود . لایه محتوا همیشه وجود دارد و حاوی محتوایی می باشد که طراح سایت قصد دارد آن را به کاربر نمایش دهد . این محتوا بصورت کدهای HTML مابین دو تگ <html> قرار میگیرد [...]
محتوای تکراری در طراحی سایت چیست و انواع روش‌های رفع مشکل محتوای تکراری کدامند؟
بازدید: 687
امروزه علمی به نام سئو (seo یا Search Engine Optimization) نقشی کلیدی در موفقیت یک سایت یا وبلاگ بازی می کند، البته این علم چیزی نیست جزء رعایت یک سری موارد در جهت ایجاد محتوای استاندارد در وب و آگاهی از نحوه عملکرد موتورهای جستجوگر به عنوان رکن تعیین کننده در افزایش بازدیدها و از طرفی ایجاد محتوای مفید و کاربرپسند برای یاری رساندن به مخاطبان و در نتیجه جلب محبوبیت بیشتر برای سایت یا وبلاگ شما نزد آنان، اما آنچه که سبب می شود [...]
در راه اندازی یک وب سایت چه نکاتی را می بایست مد نظر قرار دهیم؟
بازدید: 661
قبل از طراحی سایت باید به نکات زیادی توجه کرد که در فرآیند طراحی وب سایت مورد استفاده قرار خواهند گرفت. یک برنامه و طرح یک نقشه درست برای طراحی سایت و پیش بینی نیازها می تواند شما را در رسیدن به هدف، نزدیکتر و هزینه ها را به شدت کاهش دهد.نکاتی که پیش از طراحی سایت باید بررسی و رعایت نماییم؟1-هدف از طراحی وب سایت2-فرآیند هایی که وب سایت می بایست از آنها حمایت کند3- چه محتوا، متن [...]