وب

استفاده از بوت استرپ با Angular

بوت استرپ محبوب ترین فریم ورک HTML، CSS و JavaScript برای توسعه ی front-end وب سایت است. و برای توسعه ی وب سایت های واکنش گرا، و طراحی شده برای گوشیِ همراه، بسیار مناسب است. وب سایت بوت استرپ در آدرس http://getbootstrap.com در دسترس است. و فریم ورک بوت استرپ می تواند همراه با جاوا اسکریپت های مدرنِ وب و فریم ورک های موبایل مانند Angular استفاده شود. در ادامه ی این مقاله، نحوه ی استفاده از چارچوب بوت استرپ در پروژه ی Angular آموزش داده می شود. علاوه بر این، به پروژه ی Ng-Bootstrap نیز نگاهی خواهیم کرد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

راه اندازی یک پروژه ی Angular  با Angular CLI

در ابتدا، با ایجاد یک پروژه ی جدید Angular شروع کنیم. ساده ترین راه این است که از رابطِ خطِ فرمان Angular (CLI  / Command Line Interface) برای تولید یک پروژه ی جدید استفاده کنید. پروژه ی Angular CLI را می توانید در آدرس https://cli.angular.io پیدا کنید. ابتدا باید مطمئن شوید که CLI Angular در سیستم شما نصب شده است. از آن جایی که CLI Angular به عنوان یک پکیج NPM است، نصب را می توان با استفاده از دستور زیر انجام داد:

با نصب موفقیت آمیز آن، شما می توانید از CLG Angular برای شروع یک پروژه ی جدید به روش زیر استفاده کنید:

اکنون می توانید به دایرکتوری آن بروید و وب سرور را راه اندازی کنید:

نتیجه ی زیر را در مرورگر مشاهده خواهید کرد:

بوت استرپ

نصب بوت استرپ

اکنون که پروژه ی Angular آماده و در حال اجرا است، می توانیم کار را با افزودن بوت استرپ به پروژه، ادامه دهیم. روش های مختلفی برای اضافه کردن کتابخانه به پروژه وجود دارد. بیایید به گزینه های مختلف نگاهی کنیم:

آموزش پیشنهادی برای شما : آموزش Bootstrap 4 | جادوی رابط کاربری

افزودن بوت استرپ از CDN

برای افزودن Bootstrap به پروژه، باید دو فایل را اضافه کنیم:

  • فایل CCS بوت استرپ
  • فایل جاوا اسکریپت بوت استرپ

بخش های جاوا اسکریپت بوت استرپ به جی کوئری / jQuery وابسته است. بنابراین به فایل کتابخانه ی جاوا اسکریپت جی کوئری نیز نیاز داریم.

همه این فایل ها را می توان به طور مستقیم از یک (CDN  (Content Delivery Network به پروژه اضافه کرد. لینک های CDN برای بوت استرپ را می توان در آدرس http://getbootstrap.com/getting-started پیدا کرد و لینک به jQuery را نیز می توان در https://code.jquery.com یافت.

 

فایل src / index.html را باز کنید و موارد زیر را در آن قرار دهید:

  • عنصر <link> در انتهای بخش head section، برای افزودن فایل Bootstrap CSS.
  • عنصر <script> در پایین بخش body section، برای اضافه کردن jQuery.
  • عنصر <script> در پایین بخش body section، برای افزودن فایل جاوا اسکریپت بوت استرپ.

حالا فایل index.html باید به صورت زیر باشد:

اکنون، آماده ی استفاده از بوت استرپ در یکی از قالب های اجزا / component templates هستیم. بیایید آن را با باز کردن فایل src / app / app.component.html و وارد کردن کد قالب HTML، امتحان کنیم:

اکنون، نتیجه در مرورگر به صورت زیر خواهد بود:

بوت استرپ

همچنین می توانید تم را به یکی دیگر از تم های بوت استرپ (برای مثال Bootswatch https://bootswatch.com). تغییر دهید. در وب سایت، فقط یک تم را انتخاب کنید و بر روی دکمه دانلود کلیک کنید. فایل bootstrap.min.css مربوطه، در پنجره ی دیگری از مرورگر باز می شود، بنابراین می توانید URL را کپی کنید.

بوت استرپ

به index.html برگردید و رشته ای را که به صفت href عنصر <link> تعلق دارد، با URL جدید جایگزین کنید:

اکنون خروجی مرورگر بر اساس رنگ تعریف شده توسط تم جدید، به صورت زیر تغییر می کند:

بوت استرپ

افزودن بوت استرپ از طریق NPM

راه دیگری برای اضافه کردن بوت استرپ به پروژه ی Angular، این است که با استفاده از NPM آن را در پوشه ی پروژه ی خود نصب کنید.

این کد: Bootstrap و jQuery را در پوشه ی node_modules در دایرکتوری پروژه نصب می کند و اطمینان حاصل می کند که هر دو وابسته ها نیز به فایل package.json اضافه شوند.

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

  • node_modules/jquery/dist/jquery.min.js
  • node_modules/bootstrap/dist/css/bootstrap.min.css
  • node_modules/bootstrap/dist/js/bootstrap.min.js

اضافه کردن این فایل ها به پروژه را می توانید به دو راه زیر انجام دهید:

  • با اضافه کردن عناصر متناظر <link> و <script> به index.html (مانند آن چه که قبلا انجام دادیم)

یا

  • با اضافه کردن مسیر فایل به آرایه ی استایل و اسکریپت در فایل angular-cli.json:

استفاده از Ng-Bootstrap

Ng-Bootstrap حاوی مجموعه ای از دستور العمل های Angular است که بر اساس نشانه گذاری بوت استرپ و CSS است. در نتیجه هیچ وابستگی به بوت استرپِ جی کوئری یا جاوا اسکریپت وجود ندارد. Ng-Bootstrap بر پایه ی Bootstrap 4 است و می تواند به پروژه Angular اضافه شود. این کار به روش زیر قابل انجام است:

Ng-Bootstrap به عنوان یک پکیجِ NPM در دسترس است، بنابراین نصب آن را می توان با استفاده از دستور زیر در دایرکتوری پروژه انجام داد:

علاوه بر این، Ng-Bootstrap به Bootstrap 4 نیاز دارد تا به پروژه اضافه شود. نصب آن از طریق کد زیر انجام می شود:

اکنون، bootstrap.min.css، jquery.min.js و bootstrap.min.js را به فایل .ugular-cli.json اضافه کنید، (مانند آن چه که قبلا انجام دادیم).

پس از نصب، شما باید ماژول اصلی Ng-Bootstrap یعنی  NgbModuleرا از پکیج @ng-bootstrap/ng-bootstrap وارد کنید. برای این منظور، عبارت زیر را به app.module.ts اضافه کنید:

سپس، باید این ماژول را به آرایه ی import از decorator دکوریتور NgModule اضافه کنیم. اگر می خواهید NgbModule را در ماژول روتِ خود (به عنوان مثال: AppModule)، وارد کنید، به فراخوانی روش کارخانه forRoot ()، نیاز دارید؛ همان طور که در زیر می بینید:

اگر میخواهید NgbModule را در سایر ماژول ها (ماژول های فرزندِ ماژول برنامه ی روت) وارد کنید، باید آن را بدون فراخوانی روش forRoot() اضافه کنید:

اجزاءِ Ng-Bootstrap

پس از وارد کردن NgbModule در برنامه ی Angular، شما می توانید از اجزای Ng-Bootstrap در قالب های خود استفاده کنید. اجزاء زیر در دسترس هستند:

  • Accordion
  • Alert
  • Buttons
  • Carousel
  • Collapse
  • Datepicker
  • Dropdown
  • Modal
  • Pagination
  • Popover
  • Progressbar
  • Rating
  • Tabs
  • Timepicker
  • Tooltip
  • Typeahead

بیایید آن را امتحان کنیم و از برخی از این اجزا در application.component.html استفاده کنیم:

و نتیجه ی زیر را می توان مشاهده کرد:

بوت استرپ بوت استرپ

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا