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

پس از دانلود فایلها را از حالت فشرده خارج نمایید، پس از این عمل پوشه های css و js را به مسیر پروژه خود کپی کنید.
دقت نمایید که در نسخه کامل، فایلهای مورد نیاز بوت استرپ نیز در فایل دانلود شده قرار دارد و نیازی به دانلود آنها نیست.
پس از اضافه نمودن فایلها به پروژه ابتدا، فایل css را به صفحه، صفحات یا الگوی خود اضافه کنید.

CSS

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

با توجه به اینکه برخی از کامپوننتهای بوت استرپ نیازمند کدهای جاوا اسکریپت هستند، لازم است فایل جاوا اسکریپت بوت استرپ به صفحه اضافه شود.
دقت کنید که بوت استرپ بر پایه کتابخانه jQuery پیاده سازی شده و برای سیستم گرید خود نیازمند کتابخانه popper.js است. بنابراین لازم است پیش از معرفی فایل جاوا اسکریپت بوت استرپ، نیازمندهای آن معرفی گردند.
می توانید از CDN یا فایلهای دانلود شده استفاده نماید.

JS

<script type="text/javascript" src="js/jquery.slim.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

CDN

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

اگر کنجکاو شده اید که بوت استرپ برای کدام کامپوننتها از جاوا اسکریپ استفاده می کند، به لیست زیر دقت کنید:

  • alert: برای بستن پیام
  • Buttons: برای تغییر وضعیت، تیک خوردن
  • Carousel: برای حرکت اسلایدها، کنترل حرکت
  • Collapse: برای نمایش محتویات
  • Dropdown: برای نمایش و تعیین محل (از popper.js نیز استفاده می شود)
  • Modal: برای نمایش، تعیین محل و رفتار اسکرول
  • Navbar: برای ایجاد قابلیت واکنشگرا
  • Tooltip و Popover: برای نمایش و تعیین محل (از popper.js نیز استفاده می شود)
  • Scrollspy: رفتار اسکرول و بروزرسانی حرکت بین گزینه های منو

بسیار خوب، اضافه کردن خصوصیت dir برای تعیین وضعیت چیدمان صفحه به تگ html آخرین کاری است که باید انجام دهید:

<html dir="rtl">

پس از انجام مراحل اولیه، صفحه html شما باید شبیه به کدهای زیر باشد:

<!doctype html>
<!-- add direction (rtl/ltr) to html, its very important -->
<!-- html dir change the arya bootstrap alignment and direction -->
<html lang="fa" dir="rtl">
<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" type="text/css" href="css/bootstrap.min.css" />

<title>سلام، آریا بوت استرپ!</title>
</head>
<body>
<h1>سلام، آریا بوت استرپ!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="js/jquery.slim.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

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

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

تا کنون دیدگاهی نوشته نشده، اولین نفر باشید که دیدگاهش را بیان می کند.

دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
 
   
 
بدون حساسیت به حروف بزرگ و کوچک
کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.