آریا بوت استرپ | شروع کنید

کتابخانه بوت استرپ دوگانه چپ چین و راست چین
ارائه شده توسط شرکت توسعه فن آوری آریا وندیداد

آریا بوت استرپ، بر پایه بوت استرپ نسخه 4.5.3

آریا بوت استرپ بوت استرپ راست چین بوت استرپ
arya bootstrap bootstrap-rtl bootstrap
bootstrap 4.5.3 2021-01-09

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

دانلود


                        github.com/mRizvandi/AryaBootstrap

                        nuget.org/packages/AryaBootstrap/

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

CSS


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

با توجه به اینکه برخی از کامپوننتهای بوت استرپ نیازمند کدهای جاوا اسکریپت هستند، لازم است فایل جاوا اسکریپت بوت استرپ به صفحه اضافه شود.
دقت کنید که بوت استرپ بر پایه کتابخانه jQuery پیاده سازی شده و برای سیستم گرید خود نیازمند کتابخانه popper.js است. بنابراین لازم است پیش از معرفی فایل جاوا اسکریپت بوت استرپ، نیازمندهای آن معرفی گردند.
می توانید به جای آدرس دهی یا قرار دادن فایل popper.js از نسخه bundle بوت استرپ استفاده کنید. در این حالت نیازی به فایل popper نیست.
همچنین می توانید از 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>

یا


                            <!-- use bootstrap.bundle.js instead of bootstrap.js, if you don't want add popper utility -->

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

                            <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>

CDN


                            <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>

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

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>

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

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

تماس با ما

5 دیدگاه

سید علی 1400/06/05 08:08

سپاس از زحماتتون :-x

پاسخ به این دیدگاه

حسین خزائی 1400/07/05 13:09

سلام علی عزیز

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

پیروز باشید

محمدرحیم امامی 1399/04/18 17:07

چگونه میتونم فایل popper.min.js را دانلود یا دریافت کنم و در مسیر پروژه برنامه نویسی قرار بدم.ممنون .

پاسخ به این دیدگاه

حسین خزائی 1399/06/24 14:09

سلام دوست عزیز برای دانلود فایل popper از مسیر زیر استفاده کنید. https://github.com/mRizvandi/AryaBootstrap/blob/master/js/popper.min.js فایل popper در مسیر گیت هاب و فولدر js موجود می باشد.

Cdn خرابه.!!!!! 1399/02/19 16:05

cdn خراب است. بررسی کنید

پاسخ به این دیدگاه

آریا وندیداد 1399/03/03 11:05

سلام دوست گرامی هر سه CDN بررسی شدند، هر سه صحیح هستند. برای بررسی می توانید آدرس هر یک از فایلها را در مرورگر باز کنید. اگر فایل نمایش یا دانلود شود، آدرس صحیح هست. موفق باشید

محمد جواد 1398/11/25 20:02

سلام لطفا این پروژه رو داخل composer و npm هم منتشر بکنید

پاسخ به این دیدگاه

آریا وندیداد 1399/01/10 21:03

سلام محمد عزیز پکیج آریا بوت استرپ در ناگت در دسترس قرار گرفته است و از این به بعد می تونید اون رو از طریق NuGet هم دریافت کنید. سپاس از همراهی شما لینک دانلود پکیج آریا بوت استرپ https://www.nuget.org/packages/AryaBootstrap/

حسین خزائی 1398/11/27 11:02

سلام ممنون که آریا بوت استرپ مورد توجه شما قرار گرفته است. به زودی composer، npm، nuget و ... منتشر خواهد شد.

میرزایی 1398/11/17 14:02

سلام برای تاریخ شمسی چه راه حلی ارایه شده است

پاسخ به این دیدگاه

آریا وندیداد 1398/11/19 16:02

سلام دوست عزیز و گرامی تاریخ شمسی رو می تونید از پلاگینهایی که قبلا سایر دوستان آماده کرده اند، استفاده کنید. بیشتر این پروژه ها بر پایه jquery هستند چند نمونه از پلاگینهایی که با بوت استرپ هم هماهنگ هست در زیر آمده و می توانید پس از بررسی های لازم از آنها استفاده کنید: https://github.com/behzadi/persianDatepicker https://github.com/mousavian/bootstrap-jalali-datepicker https://www.nuget.org/packages/MD.BootstrapPersianDateTimePicker http://babakhani.github.io/PersianWebToolkit/doc/datepicker موفق و پیروز باشید

دیدگاه شما

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

نام

دیدگاه

آدرس ایمیل

حروف تصویر (بدون حساسیت به حروف بزرگ و کوچک)