نحوه نصب و استفاده از Bootstrap توییتر به عنوان یک موضوع دروپال 8

مقدمه: موضوع توییتر بوت استرپ برای دروپال 8

این آموزش کاربران جدید را برای نصب راهنمایی می کند & از توییتر استفاده کنید بوت استرپ به عنوان یک موضوع برای دروپال 8 وب سایت ها ، از جمله کد کوتاه برای CSS در قالب های خرده نان ، ناوبری, & راهنمایی های ابزار.


بوت استرپ ماژول برای دروپال 8 پیاده سازی بوت استرپ 3 چارچوب CMS با استفاده از jsDelivr CDN برای پرونده های مورد نیاز یا میزبانی محلی کد در فهرست سایت ها / * / themes.

توییتر بوت استرپ تم برای دروپال 8 شامل سفارشی CSS کد های کوتاه برای دکمه های یک ظاهر طراحی شده ، جداول ، برچسب ها ، نشان ها ، منوهای کشویی ، ناوبری ها ، هشدارها ، پانل ها ، چاه ها, & چرخ فلک تصویر.

مرحله اول: بارگیری ، نصب کنید, & موضوع Bootstrap را فعال کنید

شروع: روی دروپال 8 وب سایت ، حرکت به مدیر / موضوع / نصب کنید و فایل های موضوع را بارگیری کنید Bupstrap دروپال. فایل zip برای نصب را می توانید در اینجا بارگیری کنید:

  • دانلود: https://www.drupal.org/project/bootstrap

بعد: هدایت به مدیر / ظاهر و تنظیم کنید بوت استرپ موضوع به صورت پیش فرض.

پایان: پیکربندی جدید را ذخیره کرده و روی آن کلیک کنید “تنظیمات” پیوند برای دسترسی به گزینه های پیشرفته.

مرحله دوم: تنظیمات موضوع را در D8 Admin تنظیم کنید

شروع: هدایت به مدیر / ظاهر / تنظیمات / bootstrap و تنظیمات پیش فرض مربوط به را مرور کنید بوت استرپ توییتر موضوع. با بارگذاری پرونده جدید ، تصویر آرم را تغییر دهید & تنظیمات را ذخیره کنید.

بعد: تنظیمات CDN را برای این قسمت مرور کنید بوت استرپ توییتر 3.0 فایل های JavaScript مورد نیاز توسط موضوع. مقدار پیش فرض است jsDelivr. انتخاب کنید “هیچ یک”اگر ترجیح می دهید فایل ها را بصورت محلی میزبانی کنید.

پایان: تنظیمات موضوع را برای دکمه ها ، تصاویر ، جداول مرور کنید, & مؤلفه های دیگر برای انتخاب سبک های متناسب با علایق شما ، یعنی. “از گوشه های گرد روی تصاویر استفاده کنید” با جاوا اسکریپت.

مرحله سوم: برای تغییرات CSS یک موضوع فرعی دروپال ایجاد کنید.

شروع: هنگام ساخت CSS تغییرات دروپال 8 فایل های تم یا اضافه کردن قالب های سفارشی جدید ، یک موضوع فرعی ایجاد کنید بوت استرپ توییتر به منظور حفظ سازگاری به روز رسانی.

بعد: بوت استرپ توییتر موضوع می دهد 3 شروع کار گزینه های موضوع زیر:

  • CDN Starterkit
  • کمتر مبتدی
  • Sass Starterkit

بعد: یکی را انتخاب کنید و سپس پرونده ها را از themes / bootstrap / starterkits با انتخاب نام موضوع ، یعنی پوشه جدید را وارد پوشه جدید کنید. “mytheme”.

پیکربندی: ویرایش فایلهای زیر موضوع:

بعد: پرونده های زیر را در فهرست زیر موضوع خود پیدا کنید:

  • ./THEMENAME/THEMENAME.info.yml.
  • ./THEMENAME/THEMENAME.starterkit.yml
  • ./THEMENAME/THEMENAME.libraries.yml
  • ./THEMENAME/THEMENAME.theme.
  • ./THEMENAME/config/install/THEMENAME.settings.yml
  • ./THEMENAME/config/schema/THEMENAME.schema.yml

پیکربندی: تغییر دادن THEMENAME مقدار در هر عنوان پرونده به مقدار موضوع شما ، یعنی نام موضوع مورد استفاده در فهرست زیر موضوع که در سرور کپی شده است ، مقدار دهید..

بعد: پرونده های فرعی را که در بالا ذکر شد بصورت جداگانه در یک ویرایشگر کد باز کنید و متغیرهای موجود در آن را تغییر دهید THEMENAME استفاده می شود برای منعکس کردن موضوع فرعی خود (یعنی., “mytheme”).

نکته: همچنین می توانید نام ، توضیحات و سایر مقادیر دیگر را در متغیرهای زیرگروه در هر پرونده .yml تغییر دهید تا آنها را برای نمایش در شخصی سازی کنید. دروپال 8 صفحات سرپرست.

پیکربندی: تغییر نام در پسوند کتابخانه: THEMENAME / چارچوب

پیکربندی: تغییر نام در پیکربندی زیر موضوع: /THEMENAME/config/schema/THEMENAME.schema.yml

پیکربندی: تغییر نام در THEMENAME. تنظیمات و ‘تنظیمات THEMETITLE’ برای مطابقت با متغیر موضوع سفارشی شما. یعنی. “mytheme.settings”.

اشاره: در صورت نام دایرکتوری زیر نویس جدید "mytheme" سپس تمام متغیرهای فوق جایگزین می شوند mytheme در مواردی که THEMENAME یافت می شود.

  • مثال: /mytheme/mytheme.info.yml

پایان: هنگامی که همه متغیرها در بسته زیر موضوع تغییر یافتند ، به آن بروید مدیر / ظاهر و موضوع فرعی جدید را به صورت پیش فرض تنظیم کنید.

مرحله چهارم: ماژول طرح بندی Bootstrap را نصب کنید

شروع: به علاوه دروپال 8 توسعه با بوت استرپ موضوع & بسته زیر موضوع می تواند شامل سفارشی باشد CSS در صفحات ، بلوکها, & نمایش ها ، و همچنین فایلهای قالب قالب های سفارشی فرعی.

  • دانلود: https://www.drupal.org/project/bootstrap_layouts

نکته: نصب کنید طرح بندی بوت استرپ ماژول برای انتخاب الگوی بهبود یافته در دروپال 8.

بعد: هدایت به مدیر / ساختار / انواع / مدیریت / * / نمایشگر & یک طرح برای هر نوع محتوا در نمای پیش فرض انتخاب کنید. انتخاب کنید “Bootstrap” & یکی از گزینه های نمایش داده شده در این فهرست.

پیکربندی مثال – ماژول الگوهای Bootstrap:

  • برای یک نوع محتوا به صفحه پیکربندی صفحه بروید.
  • انتخاب کنید "سه ستون انباشته شده است" در تنظیمات طرح.
  • حرکت به ماژول ها / bootstrap_layouts / BS-3col-stacked پوشه.
  • به پرونده قالب تولید شده توسط ماژول دسترسی پیدا کنید & دانلود.
  • کپی کنید bs-3col-stacked به پوشه زیر موضوع برای رد کردن.
  • برای طراحی سفارشی ، قالب قالب را در ویرایشگر کد دسک تاپ اصلاح کنید.

پایان: با استفاده از> الگوهای بوت استرپ مدول, دروپال 8 توسعه دهندگان وب می توانند الگوهای سفارشی برای استفاده با صفحات وب سایت CMS که شامل CSS است ایجاد کنند & کد HTML با JavaScript.

مرحله پنجم: از کدهای CSS برای سبکهای سفارشی استفاده کنید

شروع: استفاده کنید >بوت استرپ توییتر 3.0 کد های CSS در پرونده های قالب سفارشی برای اضافه کردن عناصر کانتینر ، خرده نان ، دکمه ها ، فرم ها ، منوها ، نوارهای سبک, & سایر قطعات با یک ظاهر طراحی شده.

کد کوتاه CSS – Bootstrap 3.0 توییتر

عناصر کانتینر:

یا

جومبوترن:

متن اصلی – نوع بزرگ

Lorem ipsum dolor sit amet، consectetur adipiscing elit، do do eiusmod incididunt موقع کار و dolore magna aliqua. با استفاده از حداقل استفاده ، تمرین شبانه روزی ullamco labis nisi ut aliquip ea commodo نتیجه آن. Duis aute Irure dolor در reprehenderit در ولو esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident ، در کوپه qui officia deserunt mollit anim id is laborum.

دکمه ها:

پیش فرض
اولیه
موفقیت
اطلاعات
هشدار
خطر
ارتباط دادن

برچسب ها:

پیش فرض
اولیه
موفقیت
اطلاعات
هشدار
خطر

نشانها:

پروفایل من 42

ریز عکسها:

...

برچسب تصویر بند انگشتی

دکمه دکمه

نقاط مهم پاسخگو:

// دستگاه های اضافی کوچک (تلفن های پرتره ، کمتر از 576 پیکسل)
// هیچ پرس و جو رسانه ای برای ‘xs’ وجود ندارد زیرا این گزینه به طور پیش فرض در Bootstrap است

// دستگاه های کوچک (تلفن های چشم انداز ، 576 پیکسل و بالاتر)
media (min-عرض: 576px) {…}

// دستگاه های متوسط ​​(قرص ، 768 پیکسل و بالاتر)
media (min-عرض: 768px) {…}

// دستگاههای بزرگ (دسک تاپ ، 992 پیکسل و بالاتر)
media (min-عرض: 992px) {…}

// دستگاه های بزرگ بزرگ (دسک تاپ بزرگ ، 1200 پیکسل و بالاتر)
media (min-عرض: 1200px) {…}

پایان: توسعه دهندگان می توانند اطلاعات بیشتری پیدا کنند CSS کد کوتاه روی بوت استرپ 3.0 سایت:

    • ارتباط دادن: https://getbootstrap.com/docs/3.3/component/
    • ارتباط دادن: http://getbootstrap.com/docs/3.3/customize/

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me