آموزش Bootstrap > مقدمه آموزش Bootstrap
Bootstrap چیست و چه کاربردی دارد ؟

Bootstrap چیست و چه کاربردی دارد ؟

Bootstrap در حال حاضر ، محبوب ترین و پیشرو ترین چهارچوب کاری بر مبنای HTML ، CSS و جاوا اسکریپت برای طراحی صفحات وب واکنش گرا مخصوصا جهت موبایل ها و دستگاه های قابل حمل مثل تبلت است .

اما سوال این است که طراحی وب واکنش گرا چیست ؟

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

مهمترین ویژگی های Bootstrap عبارتند از :

  • Bootstrap یک چهار چوب کاری رایگان و اپن سورس برای طراحی سریع و آسان صفحات وب می باشد .
  • Bootstrap شامل تمپلیت های آماده ای از HTML ، CSS برای نمایش متون ، دکمه ها ، فرم ها ، جداول ، سیستم مسیر دهی سایت ، تصاویر و ... می باشد . این چهارچوب همچنین شامل Plu-in های آماده ای از زبان جاوا اسکریپت نیز می باشد .
  • Bootstrap به سادگی این امکان را برایتان فراهم نموده تا طراحی وب واکنش گرا را انجام دهید .

آشنایی با تاریخچه Bootstrap :

Bootstrap توسط Mark Otto و Jacob Thornton در توتیتر پی ریزی شده و نهایتا در Agust 2011 به عنوان یک پروژه اپن سورس توسط توسعه دهنده GitHub به دنیای وب معرفی گردید .

چرا از Bootstrap استفاده کنیم ؟

  • استفاده آسان و راحت : هر طراح وب ، هر چند مبتدی که آشنایی کافی با HTML و CSS داشته باشد ، می تواند به راحتی با Bootstrap طراحی وب را به صورت واکنش گرا انجام دهد .
  • ویژگی های واکنش گرا : ویژگی های واکنش گرای Bootstrap باعث می شود تا بتوان برای هر نوع صفحه نمایش مثل لپ تاپ ، تبلت و یا موبایل طراحی صفحات وب انجام داد .
  • طراحی وب اختصاصی جهت موبایل : در Bootstrap 3 ، طراحی واکنش گرا برای دستگاه های موبایل به عنوان یک بخش اساسی مورد توجه قرار گرفته است .
  • سازگاری با انواع مرورگر ها : Bootstrap تقریبا با تمامی مرورگرهای مطرح مثل کروم ، فایر فاکس ، IE و ... سازگاری کامل دارد .

چگونه به Bootstrap دسترسی داشته باشیم ؟

دو راه کلی برای استفاده از Bootstrap وجود دارد :

  • دانلود Bootstrap از سایت getbootstrap.com و سپس قرار دادن آن بر روی هاست سرور خود .
  • دریافت Bootstrap به صورت آنلاین از یک توزیع کننده تخت وب آن ( CDN ) .

نحوه دانلود Bootstrap :

1 . دانلود فایل های Bootstrap : برای دانلود کتابخانه و سایر فایل های Bootstrap و قرار دادن آنها بر روی هاست سایت تان می توانید به آدرس getbootstrap.com رفته و مراحل نصب را دنبال کنید ( در یک بخش جدا ، به آموزش این کار خواهیم پرداخت ) .
2 . استفاده از یک توزیع کننده آنلاین ( CDN ) : اگر نمی خواهید Bootstrap را دانلود کرده و آن را بر روی هاست سایت خود قرار دهید ، می توانید از یک توزیع کننده آنلاین ( CDN ) استفاده کنید .
MaxCDN یک توزیع کننده آنلاین معتبر برای Bootstrap بوده که به طور کامل از تمامی خواص و کلاس های CSS ، HTML و جاوا اسکریپت آن پشتیبانی می کند . برای این منظور بایستی کدهای زیر را در قسمت <head> صفحه خود قرار دهید :

کد <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

یک مزیت استفاده از CDN برای Bootstrap : بسیاری از کاربرانی که سایت شما را مشاهده می کنند ، قبلا از یک CDN آنلاین مثل MaxCDN فایل های Bootstrap را دانلود کرده و بنابراین هنگام درخواست یک صفحه جدید ، اطلاعات را از حافظه Cashe دریافت کرده که باعث افزایش سرعت لود صفحه خواهد شد .



راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1