Bootstrap چیست؟ | شرکت ایران وب لایف در این مقاله برای شما کاربران عزیز Bootstrap را به صورت کامل و تخصصی توضیح داده است.

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

قبل این پروژه ، پروژه های بسیاری نظیر این استارت خورده بود.
اما هیچکدام را دنیا استقبال نکرد.
بنابراین سازنده اصلی توییتر یا همان مارک اتو تصمیم به ساخت framework قدرت مند Bootstrap را گرفت.

یادگیری Bootstrap

یادگیری Bootstrap بسیار ساده و راحت است و فقط باید چند روز تمرین کنید !

Bootstrap یک framework تشکیل شده از ( HTML , CSS , JavaScript) است.
Bootstrap به صورت خودکار ریسپانسیو است و دیگر لازم نیست کد های اضافه بزنید!
و امروزه بیشتر افراد از گوشی های همراه و تبلت استفاده میکنند.
بنابراین بسیار مهم است که سایت شما برای این افراد به خوبی نمایش داده شود
و نیاز به بزرگ نمایی و کوچک نمایی نداشته باشند.
راحتی کاربران در سایت شما آن ها را مشتری های همیشگی شما میکنند!

برای همین بهترین روش برای طراحی سایت های ریسپانسیو استفاده از بوت استرپ است.

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

در august سال ۲۰۱۱، Twitter بوت استرپ را به صورت رایگان و اوپن سورس منتشر کرد و framework  طراحی وب سایت در دسترس همه قرارداد و در February 2012 به محبوب ترین پروژه در سایت Github تبدیل شده بود.

ممکن است که افرادی که تازه کار هستند Bootstrap کمی برایشان گیج کننده باشند.
اما میوانیم بگوییم که راحت ترین framework دنیا بوت استرپ است.
در Bootstrap انواع کتابخانه های ( HTML , CSS , JavaScript) وجود دارد.
و شما به یک فراخوانی ساده نام کلاس یا تگ به آن دسترسی پیدا کنید و از آن استفاده کنید.

بهترین منبع برای یادگیری بوت استرپ خود سایت BootStrap است.
در خود سایت یک بخش مثال ها وجود دارد که چند قالب برای یادگیری قرار داده است.
و شما میتوانید با ادیت آن قالب ها به صورت کامل کار با  bootstrap را فرا بگیرید.

منبع ای دیگر برای یاد گیری Bootstrap سایت W3schools است .
در این سایت نمونه کد های بوت استرپ به صورت کامل آموزش داده شده است.

نمونه ای از المان های پیش فرض Bootstrap - Bootstrap چیست؟

نمونه ای از المان های پیش فرض Bootstrap

 

 

شما برای اضافه کردن Bootstrap به پروژه ی خود فقط کافی است که در تگ <Head> کد زیر را ینوسید.

کد CSS

این کد را در تگ <Head> سایت اضافه کنید.
سپس میتوانید از قابلیت این کلاس BootStrap در پروژه ی خود استفاده کنید.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

کد JS

این کد را در تگ <Head> سایت اضافه کنید.
سپس میتوانید از قابلیت این کلاس BootStrap در پروژه ی خود استفاده کنید.

<br><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

قالب نهایی

در پایان باید تک <Head> شما اینگونه باشد.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

 

Bootstrap یعنی چه ؟

خارج از بحث طراحی وب سایت که برویم و بخواهیم Bootstrap را معنا کنیم:
Bootstrap معنای (“خود راه انداز“) را میدهد.
و کلمه ی Bootstraping  اینگونه معنا می شود که :
راه اندازی یک فرایند به صورت مستقل و بدون نیاز به منبع خارجی میشود.
این کلمه در علم it کمی کوتاه تر میشود و به اسم Booting به کار میرود.
که نشان دهنده عملیات راه اندازی سیستم و آماده سازی و وارد سازی اطلاعات اولیه نرم افزار ها در حافظه کامپیوتر می باشد.

 

تعریف Bootstrap به زبان ساده

شاید شما هنوز معنی و مفهموم Bootstrap را درک نکرده اید برای همین ساده تر توضیح میدهیم.
مشکل کد نویسان از ابتدا بر سر ظاهر زیبا و شیک بوده است.
اصول کد نویسی بسیار مهم است اما مهم تر از آن ظاهر و خروجی سایت است .
که کاربر وقتی سایت مارا بازدید میکنند از سایت ما خوشش بیایید.

Bootstrap خلاء بین طراحی و برنامه نویسی سایت هارا از بین میبرد.
توسعه دهندگان و برنامه نویسان را ترغیب به استفاده از ابزار های پیشفرض و استاندارد میکند
به همین دلیل Bootstrap دستورات css و توابع jQuery ی پرکاربرد و مورد نیاز شما را فراهم کرده است.
بنابراین شما میتوانید با کمک Bootstrap به صورت استاندارد کدنویسی کنید.
و Bootstrap با قابلیت هایش تا حد امکان زمان نیاز برای تحویل پروژه را کم میکند.

 

این مقاله را نیز بخوانید : روند های طراحی وب سایت در سال ۱۸-۲۰۱۷

 

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