اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

يمكنك تثبيت bootstrap في مشروع  Laravel عن طريق هذه الأوامر في command line :

أنتقل إلى المشروع الخاص بك وقم بتشغيل الأوامر التالية :

ثبّت Laravel / UI :

$ composer require laravel/ui

تثبيت bootstrap :

$ php artisan ui bootstrap
$ php artisan ui bootstrap --auth

تثبيت npm :

$ npm install

 

  • 0
نشر

إذا كنت تستخدمين نسخة  laravel  السادسة أو السابعة يمكنك القيام بذلك باتباع الخطوات التالية:

نقوم بإنشاء مشروع laravel جديد:

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

نقوم بالدخول إلى المشروع الذي قمنا بإنشاءه:

cd laravel-bootstrap

نقوم بتثبيت laravel ui:

composer require laravel/ui

نقوم بتنزيل bootsratp:

php artisan ui bootstrap

بعدها هذا الأمر:

php artisan ui bootstrap --auth

بعدها نقوم بتنزيل حزمة bootstrap و الحزم التي تعتمد عليها :

npm install

بعدها سنلاحظ أنه تم إضافة التالي في الملفات  variables.scss_ و app.scss الموجودة في resources/sass

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

ثم:

# أثناء التطوير
npm run dev


# أثناء الإنتاج
npm run production

لاستخدام bootstrap في ملفات laravel blade templates:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

للنسخ الأقدم نقوم بالتالي:

لإنشاء مشروع:

laravel new App

بعدها نقوم بتنزيل حزمة bootstrap و الاعتماديات"سيتم تثبيت bootstrap 3 بصورة افتراضية" : 

npm install

نقوم بتثبيت   bootstrap 4 :

npm install bootstrap@4.0.0-beta

نقوم بتضمين الملفات في الملف resources/assets/sass/app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// نقوم باستبدال السطر التالي

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

// بهذا السطر حتى يتم استيراد الخطوط و المتغيرات من النسخة الرابعة و ليس الثالثة

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

التعديل الأخير المتعلة ب css و هو تعديل كل px في ملف  variables.scss_ إلى rem.

في ملف js/bootstrap.js نقوم بتعديل:

 require('bootstrap-sass');

إلى:

 require('bootstrap');

ثم نقوم بتنفيذ الأمر التالي في الطرفية:

npm run production

 

  • 0
نشر

لتثبيت ملفات بوتستراب على مشروع لارفل عليك باتباع الخطوات التالية:

  • قم بتشغيل أوامر الطرفية الخاصة بمشروعك لتثبيت Bootstrap، ثم ثم بتنفيذ الأمر التالي:
php artisan ui bootstrap
  • لتثبيت Bootstrap Auth Scaffolding قم بتنفيذ الأمر التالي
php artisan ui bootstrap --auth

بهذا الشكل تكون قد قمت بتثبيت Bootstrap، ويمكنك التأكد من ذلك بالانتقال إلى Resource / js / bootstrap.js. ستلاحظ أن popper.js و jQuery قد تمت إضافتهما إلى ملف JavaScript في bootstrap.

  • عليك الآن تثبيت حزم Bootstrap ولكن في البداية عليك التأكد من تثبيت Node.js لهذا نستخدم الأمر التالي.
# for node
node -v

# for npm
npm -v

لتثبيت حزم بوتستراب من jQuery وغيرها من ما تحتاج عليك اتباع تثبيتها باستخدام npm 

npm install
  • عليك بالتأكد من ملف resources / sass يجب أن يحتوي التعليمات التالية
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
  • الآن ، يجب عليك تشغيل الأمر أدناه لتجميع asset
# للتطوير
npm run dev


# للمنتج
npm run production

يقوم الأمر في الأعلى بتجميع ملفات CSS و JavaScript من مجلد resources / js و resources / sass إلى المجلد العام.

إذا كنت لا تريد تشغيل الأمر npm run dev في كل مرة تُجري فيها تغييرات في ملف SASS و JS ، فيجب عليك استخدام الأمر التالي.

npm run watch
  • من ثم يمكنك تضمين ملفات الـ sass والتي تحتوي على ملفات بوتستراب وCSS وJavaScript إلى مشروعك اللارفيل.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...