بوتستراب 5 rtl في لارافل و كيف يمكن تغيير التنسيقات عند تغيير لغة الموقع

بالنسبة لتثبيت اخر اصدار من بوتستراب يمكنك ذلك عبر مدير الحزم npm, بداية سوف نحذف الاصدار الحالي من بوتستراب من خلال الامر التالي

npm uninstall bootstrap

ثم من خلال تنفيذ الأمر التالي

npm i bootstrap

سوف يتم تثبيت اخر اصدار من بوتستراب , أو يمكنك فقط استدعاء رابط cdn خاص بالمكتبة , من حسن الحظ يتوفر من الاصدار الخامس نسخة rtl ونسخة ltr

<!-- LTR languages -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- RTL language -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" rel="stylesheet">

 
بالنسبة لتغيير تنسيقات الموقع نحتاج أن نفحص لغة الموقع , اذا كانت عربية نضمن الملف rtl واذا كانت انجليزية نضمن نسخة ltr ويتم ذلك كالتالي 

@if ( Config::get('app.locale') == 'en')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
@endif

@if ( Config::get('app.locale') == 'ar')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
@endif

يمكنك الأستفادة أكثر من اجابات المدربين في هذا السؤال أيضا

بتاريخ 7 دقائق مضت قال محمد أبو عواد:

بالنسبة لتثبيت اخر اصدار من بوتستراب يمكنك ذلك عبر مدير الحزم npm, بداية سوف نحذف الاصدار الحالي من بوتستراب من خلال الامر التالي

npm uninstall bootstrap

ثم من خلال تنفيذ الأمر التالي

npm i bootstrap

سوف يتم تثبيت اخر اصدار من بوتستراب , أو يمكنك فقط استدعاء رابط cdn خاص بالمكتبة , من حسن الحظ يتوفر من الاصدار الخامس نسخة rtl ونسخة ltr

<!-- LTR languages -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- RTL language -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" rel="stylesheet">

 
بالنسبة لتغيير تنسيقات الموقع نحتاج أن نفحص لغة الموقع , اذا كانت عربية نضمن الملف rtl واذا كانت انجليزية نضمن نسخة ltr ويتم ذلك كالتالي 

@if ( Config::get('app.locale') == 'en')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
@endif

@if ( Config::get('app.locale') == 'ar')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
@endif

يمكنك الأستفادة أكثر من اجابات المدربين في هذا السؤال أيضا

 

بما اننا سنستخدم cdn معناه لسنا بحاجة لتسطيب نسخة بوتستراب ’ وأيضا بذلك لايمكننا التعديل والتخصيص على متغيرات بوتستراب _variables 

بتاريخ 1 ساعة قال Brahim Semmani:

بما اننا سنستخدم cdn معناه لسنا بحاجة لتسطيب نسخة بوتستراب ’ وأيضا بذلك لايمكننا التعديل والتخصيص على متغيرات بوتستراب _variables 

هل تقصد التعديل على نسخة SASS من بوتستراب؟

بتاريخ 1 دقيقة مضت قال Wael Aljamal:

هل تقصد التعديل على نسخة SASS من بوتستراب؟

نعم تماما

لما اضيف فقط cdn botstrap rtl

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

يظهر تمام بهذا الشكل 

ولكن لما اضيف ملف المتنسيقات الذي تم تحويله npm run watch يظهر بهذا الشكل

رغم أنني خصصت فقط على الأيقونات ولون accordiom 

في ملف منفصل أسميته _custom :

// MY THEME COLORS
$purple-dark: #9926f0;
$purple-light: #BB6EF5;
$pink: #d122e3;

$primary:       $purple-dark ;
$secondary:     $pink ;

// ACCORDION OVERRIDES

$accordion-icon-color:                    $primary;
$accordion-icon-active-color:             $secondary;

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/></svg>") ;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z'/></svg>") ;
$accordion-icon-transition:               transform .4s ease-in-out ;

ثم ضمنته في الملف الذي تجرى مراقبته app.scss

بتاريخ 1 دقيقة مضت قال Brahim Semmani:

نعم تماما

لا يمكن تحميل ملف SASS للمتصفح مباشرة، بل يتوجب ترجمته لملف CSS.

 يمكنك تحميل bootstrap-sass من خلال npm والعمل على التنسيقات بشكل منفصل، ثم بعد معالجتهم يمكننا تضمين الملف الناتج في المشروع.

npm install bootstrap@next
npm install @popperjs/core

في

resources folder 
نخصص مجلد ب 
scss 

ونضعه فيه  ملف
app.scss
في

app.scss
نضمن
@import "~bootstrap/scss/bootstrap";

في
Webpack.mixin.js

mix.js("resources/js/app.js", "public/js")
.sass('resources/scss/bootstrap.scss', 'public/css')
.sourceMaps();

نقوم بتشغيل
run npm run dev

يبدوا انك لم تقرا هذا الذي كتبه في الأعلى يا أستاذ 

بتاريخ 20 دقائق مضت قال Brahim Semmani:

 

لما اضيف فقط cdn botstrap rtl

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

يظهر تمام بهذا الشكل 

 

ولكن لما اضيف ملف المتنسيقات الذي تم تحويله npm run watch يظهر بهذا الشكل

رغم أنني خصصت فقط على الأيقونات ولون accordiom 

في ملف منفصل أسميته _custom :

// MY THEME COLORS
$purple-dark: #9926f0;
$purple-light: #BB6EF5;
$pink: #d122e3;

$primary:       $purple-dark ;
$secondary:     $pink ;

// ACCORDION OVERRIDES

$accordion-icon-color:                    $primary;
$accordion-icon-active-color:             $secondary;

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/></svg>") ;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z'/></svg>") ;
$accordion-icon-transition:               transform .4s ease-in-out ;

ثم ضمنته في الملف الذي تجرى مراقبته app.scss

 

 

بتاريخ 27 دقائق مضت قال Brahim Semmani:

رغم أنني خصصت فقط على الأيقونات ولون accordiom 

في ملف منفصل أسميته _custom :

من غير الصحيح تعديل المتغيرات primary و secondary 

يجب مباشرة عمل التالي:

// MY THEME COLORS
$purple-dark: #9926f0;
$purple-light: #BB6EF5;
$pink: #d122e3;

// خطأ
//$primary:       $purple-dark ;
//$secondary:     $pink ;


// ACCORDION OVERRIDES
//***************************************//
//    الصحيح
$accordion-icon-color:                    $purple-dark;
$accordion-icon-active-color:             $pink;

جربت نزعت كل ملف التخصيص _custom  ولم تزبط

, هل معناه بوتستراب 5 rtl غير مدعوم الا من خلال cdn ؟ هاذا هو السؤال الذي اريد إجابة عنه  شكرا

بتاريخ 10 دقائق مضت قال Brahim Semmani:

جربت نزعت كل ملف التخصيص _custom  ولم تزبط

, هل معناه بوتستراب 5 rtl غير مدعوم الا من خلال cdn ؟ هاذا هو السؤال الذي اريد إجابة عنه  شكرا

لا علاقة لدعم إصدار بوتستراب هنا، المشكلة في استهداف اللون للعناصر بشكل صحيح.

تأكد ما التنسيقات التي تطرق عليها لتعديلها.

المشكلة كانت بتعديل ألوان الثيم بشكل كامل، و عدم اقتصارها على الأيقونات، لسبب استهداف متغيرات عامة لألوان الثيم وليس فقط الأزرار.. 

اعمل npm run dev مرة أخرى من فضلك و php artisan optimize:clear