آموزش دانلود و نصب و استفاده از بوت استرپ

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

بوت استرپ (bootstrap) یک فریمورک است. بوت استرپ از html , css , javascript تشکیل شده و برای طراحی قالب ریسپانسیو یا واکنشگرا استفاده می شود. (سایت ریسپانسیو یعنی سایتی که روی تمام دستگاه ها کامپیوتر، تبلت، موبایل و غیره بخوبی نمایش داده شود و نیاز به اسکرول افقی نباشد مانند emila.ir)

ویژگی های بوت استرپ 4

از ویژگی های بوت استرپ 4 آن است که با امکان کلاس های مختلف، طراحی قالب سایت را برای شما بسیار راحت تر می کند.

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

سایت هایی که با بوت استرپ طراحی می شوند روی تمام مرورگرها بخوبی دیده می شوند.

قالب های طراحی شده استاندارد هستند.

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

در بوت استرپ می توانید از منوهای ریسپانسیو ، جداول زیبا ، مدل ها و فرم های زیادی استفاده کنید بدون اینکه به html, css و جاوا اسکریپت تسلط داشته باشید.

آموزش دانلود بوت استرپ

بوت استرپ را می توانید به دو صورت راست چین و چپ چین دانلود و استفاده نمایید که ما قصد داریم هر دو روش را توضیح دهیم.

دانلود بوت استرپ چپ چین

برای دانلود بوت استرپ چپ چین می توانید از سایت اصلی بوت استرپ به آدرس getbootstrap.com مراجعه و فایل های بوت استرپ را دانلود نمایید.

همچنین می توانید از روش cdn نیز استفاده کنید که در سایت بوت استرپ توضیح داده شده است.

دانلود بوت استرپ راست چین

برای دانلود بوت استرپ راست چین می توانید از جعبه دانلود اقدام کنید. در این پوشه دو پوشه css و js وجود دارد.

نصب فایل بوت استرپ روی قالب از طریق آپلود

برای استفاده از بوت استرپ باید از فایل css و فایل js و همچنین فایل جی کوئری استفاده کنید.

برای استفاده از بوت استرپ 4 می بایست ابتدا در قسمت head یک link قرار دهید و فایل css را در آن قرار دهید.

 <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 

سپس یک script که فایل جی کوئری و فایل bootstrap js را در آن قرار دهید.

 <script src="js/bootstrap.min.js"></script> 

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

نصب فایل بوت استرپ روی قالب از طریق CDN

برای نصب بوت استرپ به روش cdn کافیست کدهای زیر را به head قالب خود اضافه کنید:

کد مربوط به CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

کد مربوط به JS, Popper.js, and jQuery

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

به همین راحتی