Làm thế nào để bạn cài đặt và sử dụng đúng cách bootstrap 4 trong laravel 8?

Chúng ta chỉ cần cài đặt gói

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

Gói

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

Cài đặt Bootstrap

Đi đến thiết bị đầu cuối của bạn, điều hướng đến dự án Laravel 7 của bạn và chạy lệnh sau

$ composer require laravel/ui

Sau khi cài đặt thành công gói, chúng tôi cài đặt Bootstrap 4 trong ứng dụng của mình bằng lệnh sau

$ php artisan ui bootstrap

Thay vào đó, bạn cũng có thể cài đặt giàn giáo xác thực bằng cách sử dụng lệnh sau

$ php artisan ui bootstrap --auth

Cuối cùng, bạn cần cài đặt gói bootstrap và các phụ thuộc giao diện người dùng có liên quan, chẳng hạn như jquery từ npm bằng lệnh sau

Đối với hướng dẫn này, nó có thể giúp bạn làm quen với hai tệp, gói. json và gói web. pha trộn. js

Thêm Bootstrap 4

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

Chúng tôi cũng cần thêm các gói để nhập và biên dịch các tệp Sass của Bootstrap

npm install --save-dev sass
npm install --save-dev sass-loader 

Gói của bạn. json bây giờ trông rất giống với cái này

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

Bây giờ hãy biên dịch tất cả javascript và css của bạn bằng cách chạy lệnh sau

npm run dev

Tiếp theo, chúng ta cần thêm các biểu định kiểu gói Bootstrap theo cách mà dự án Laravel của bạn có thể sử dụng chúng

Thêm các biểu định kiểu Bootstrap vào Laravel Mix

Tạo một thư mục có tên "sass" bên trong thư mục tài nguyên của bạn, resource/sass và thêm một tệp, ứng dụng. scss

Chỉnh sửa tài nguyên/sass/ứng dụng. scss để bao gồm những điều sau đây

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


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

Yêu cầu Laravel Mix thêm và biên dịch ứng dụng của bạn. tệp scss bằng cách chỉnh sửa hỗn hợp. gói web. js

Laravel Mix sẽ biên dịch mọi thứ được liệt kê ở trên thành một tệp js và một tệp css trong thư mục chung

Laravel sử dụng Laravel Mix -- một trình bao bọc xung quanh Webpack. Webpack biên dịch mọi thứ thành một tệp duy nhất (/js/app. js) hoặc nhiều tệp.  

Biên dịch lại javascript và css của bạn

npm run dev

$ php artisan ui bootstrap

Thêm Bootstrap HTML vào các tệp Laravel Blade của bạn

Bản cài đặt mặc định của dự án Laravel của bạn sẽ xây dựng bản đồ trang chủ ứng dụng của bạn để chào mừng. lưỡi. php  trong thư mục lượt xem của bạn, resources/views/welcome. lưỡi. php

Thay thế nội dung chào mừng. lưỡi. php với những điều sau đây

$ php artisan ui bootstrap

Laravel Mix biên dịch tệp scss thành css trong thư mục chung. Biểu định kiểu CSS được gọi với đoạn mã Blade sau

Mặc dù Laravel không chỉ định bạn sử dụng bộ tiền xử lý JavaScript hoặc CSS nào, nhưng nó cung cấp điểm khởi đầu cơ bản bằng cách sử dụng Bootstrap, React và/hoặc Vue sẽ hữu ích cho nhiều ứng dụng. Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói giao diện người dùng này

Giàn giáo Bootstrap và Vue do Laravel cung cấp nằm trong gói Trình soạn thảo

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

$ php artisan ui bootstrap

Khi gói

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

$ php artisan ui bootstrap

Laravel Mix cung cấp một API rõ ràng, biểu cảm qua việc biên dịch SASS hoặc Ít hơn, là các phần mở rộng của CSS đơn giản có thêm các biến, mixin và các tính năng mạnh mẽ khác giúp làm việc với CSS thú vị hơn nhiều. Trong tài liệu này, chúng ta sẽ thảo luận ngắn gọn về việc biên dịch CSS nói chung;

Laravel không yêu cầu bạn sử dụng một framework hoặc thư viện JavaScript cụ thể để xây dựng các ứng dụng của bạn. Trên thực tế, bạn hoàn toàn không phải sử dụng JavaScript. Tuy nhiên, Laravel có bao gồm một số giàn giáo cơ bản để giúp bạn bắt đầu viết JavaScript hiện đại dễ dàng hơn bằng thư viện Vue. Vue cung cấp API biểu cảm để xây dựng các ứng dụng JavaScript mạnh mẽ bằng cách sử dụng các thành phần. Cũng như CSS, chúng ta có thể sử dụng Laravel Mix để dễ dàng biên dịch các thành phần JavaScript thành một tệp JavaScript duy nhất, sẵn sàng cho trình duyệt

Viết CSS

Sau khi cài đặt gói

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

$ php artisan ui bootstrap

$ php artisan ui bootstrap

$ php artisan ui bootstrap

Trước khi biên dịch CSS của bạn, hãy cài đặt các phần phụ thuộc giao diện người dùng của dự án bằng trình quản lý gói Node (NPM)

Khi các phần phụ thuộc đã được cài đặt bằng cách sử dụng

$ php artisan ui bootstrap

$ php artisan ui bootstrap

$ php artisan ui bootstrap

$ php artisan ui bootstrap

Tệp

$ php artisan ui bootstrap

$ php artisan ui bootstrap

$ php artisan ui bootstrap

$ php artisan ui bootstrap

Viết JavaScript

Tất cả các phụ thuộc JavaScript mà ứng dụng của bạn yêu cầu có thể được tìm thấy trong tệp

$ php artisan ui bootstrap

$ php artisan ui bootstrap --auth

{tip} Theo mặc định, tệp Laravel

$ php artisan ui bootstrap

30 bao gồm một số gói như

$ php artisan ui bootstrap --auth

64 và

$ php artisan ui bootstrap --auth

65 để giúp bạn bắt đầu xây dựng ứng dụng JavaScript của mình. Vui lòng thêm hoặc xóa khỏi tệp

$ php artisan ui bootstrap

30 nếu cần cho ứng dụng của riêng bạn

Khi các gói được cài đặt, bạn có thể sử dụng lệnh

$ php artisan ui bootstrap

$ php artisan ui bootstrap

$ php artisan ui bootstrap

Theo mặc định, tệp Laravel

$ php artisan ui bootstrap

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

{tip} Tệp

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

52 sẽ tải tệp

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

55 khởi động và định cấu hình Vue, Axios, jQuery và tất cả các phần phụ thuộc JavaScript khác. Nếu bạn có các phụ thuộc JavaScript bổ sung để định cấu hình, bạn có thể làm như vậy trong tệp này

Viết các thành phần Vue

Khi sử dụng gói

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

$ php artisan ui bootstrap --auth

Để sử dụng thành phần trong ứng dụng của bạn, bạn có thể thả nó vào một trong các mẫu HTML của mình. Ví dụ: sau khi chạy lệnh

npm install --save-dev sass
npm install --save-dev sass-loader 

npm install --save-dev sass
npm install --save-dev sass-loader 

npm install --save-dev bootstrap@4
npm install --save-dev [email protected]
npm install --save-dev [email protected]

{tip} Hãy nhớ rằng, bạn nên chạy lệnh

$ php artisan ui bootstrap

34 mỗi khi thay đổi thành phần Vue. Hoặc, bạn có thể chạy lệnh

npm install --save-dev sass
npm install --save-dev sass-loader 

54 để theo dõi và tự động biên dịch lại các thành phần của mình mỗi khi chúng được sửa đổi

Nếu bạn quan tâm đến việc tìm hiểu thêm về cách viết các thành phần Vue, bạn nên đọc tài liệu về Vue, tài liệu này cung cấp tổng quan toàn diện, dễ đọc về toàn bộ khung Vue

Sử dụng phản ứng

Nếu bạn thích sử dụng React để xây dựng ứng dụng JavaScript của mình, Laravel giúp bạn dễ dàng hoán đổi khung Vue với khung React

npm install --save-dev sass
npm install --save-dev sass-loader 

Thêm cài đặt trước

Các cài đặt trước là "có thể điều chỉnh được", cho phép bạn thêm các phương thức bổ sung vào lớp

npm install --save-dev sass
npm install --save-dev sass-loader 

npm install --save-dev sass
npm install --save-dev sass-loader 

npm install --save-dev sass
npm install --save-dev sass-loader 

Laravel 8 có hỗ trợ bootstrap không?

Cách tốt nhất để cài đặt bootstrap là gì?

LÀM THẾ NÀO bao gồm bootstrap JS trong Laravel?

Làm cách nào tôi có thể cài đặt NPM trong Laravel 8?