Ngày 25 tháng 6 năm 2022, ban đầu được xuất bản tại Laraveltuts.com ・ 3 phút Đọc
Xin chào, Dev. Hướng dẫn nhanh này sẽ chỉ cho bạn cách cài đặt Bootstrap trong Laravel 9 [2022]. Bạn sẽ học cách thực hiện Bootstrap vào Laravel. Bạn có thể tìm hiểu cách cài đặt Bootstrap 5 trong Laravel 9 tại đây. Bạn có thể nắm bắt một ý tưởng về cách cài đặt Bootstrap 4 trong Laravel. Hãy để chúng tôi bắt đầu với việc Laravel cài đặt Bootstrap 5.Install Bootstrap in Laravel 9 [2022]. You will learn how to implement bootstrap into Laravel. You can find out how to install Bootstrap 5 in Laravel 9 here. You can grasp an idea of how to install a Bootstrap 4 in Laravel. Let us begin with Laravel install a bootstrap 5.
Bootstrap có thể được cài đặt với Laravel 6, Laravel 7, Laravel 8 và Laravel 9.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách cài đặt bootstrap chính xác trong ứng dụng Laravel của bạn. Để thêm NPM Bootstrap vào ứng dụng Laravel, chúng tôi sẽ sử dụng gói UI Laravel. Laravel UI là gói nhà soạn nhạc được cung cấp bởi Laravel.
Vì vậy, hãy để Lừa thực hiện các bước sau:
Làm thế nào để cài đặt Bootstrap trong Laravel 9?
- Bước 1: Cài đặt Dự án Laravel Install Laravel Project
- Bước 2: Cài đặt UI Laravel Install Laravel UI
- Bước 3: Tạo giàn giáo Generate Scaffolding
- Bước 4: Cài đặt các gói bootstrap Installing a Bootstrap Packages
- Bước 5: Sử dụng Bootstrap trong chủ đề Use Bootstrap in Theme
Cài đặt dự án Laravel
Đầu tiên và quan trọng nhất, chúng ta phải có được ứng dụng phiên bản Laravel 9 mới bằng cách sử dụng lệnh được liệt kê bên dưới. Vì vậy, hãy khởi chạy dấu nhắc thiết bị đầu cuối hoặc lệnh của bạn và nhập lệnh sau:Laravel 9 version application by using the command listed below. So, launch your terminal OR command prompt and type the following command:
composer create-project laravel/laravel example-app
Cài đặt UI Laravel
Hãy cùng chạy lệnh sau để cài đặt gói UI Laravel:Laravel UI Package:
composer require laravel/ui
Tạo giàn giáo
Sau đó, cài đặt lệnh gói UI Laravel để tạo giàn giáo Auth.scaffolding.
Lệnh sau đây sẽ chỉ thêm bootstrap vào ứng dụng của bạn.
php artisan ui bootstrap
Lệnh sau đây sẽ thêm bootstrap cùng với giàn giáo auth.Auth Scaffolding.
php artisan ui bootstrap --auth
Cài đặt gói bootstrap
Trước tiên chúng ta phải cài đặt NPM và sau đó tải xuống các gói Bootstrap.npm and then download the bootstrap packages.
Hãy để Lừa chạy lệnh sau để cài đặt NPM:
npm install
Trên thư mục tài nguyên/SASS, bạn có thể thấy tài sản biên dịch trên các tệp _variables.scss và app.scss.resources/sass folder, you can see the Compile asset on _variables.scss and app.scss files.
resources/sass/app.scss
/* Fonts */
@import url['//fonts.googleapis.com/css?family=Nunito']; /* Variables */
@import 'variables';
/* Bootstrap */
@import '~bootstrap/scss/bootstrap';
Tiếp theo, chúng ta phải thực thi lệnh sau để biên dịch tài sản:
/* for development */
npm run dev /* for production */
npm run production
Nó tạo các tệp CSS và JS Min.
Cũng đọc: Cách cài đặt alpine.js trong Laravel 9How to Install Alpine.js in Laravel 9
Sử dụng bootstrap trong chủ đề
Bạn có thể sử dụng mã sau để biên dịch các tệp CSS và JS trên tệp Blade chủ đề:
This is example from LaravelTuts.com
Chạy ứng dụng Laravel:
Sau khi bạn đã hoàn thành tất cả các bước cần thiết, hãy nhập lệnh sau và nhấn Enter để chạy ứng dụng Laravel:
php artisan serve
Bây giờ, hãy nhập URL sau vào trình duyệt web của bạn và xem đầu ra ứng dụng:
//localhost:8000/
Cũng đọc: Cách cài đặt selectize.js trong Laravel 9How to install Selectize.JS in Laravel 9
Bây giờ bạn có thể thấy bố cục như sau:
Trang chủ:
Trang đăng nhập:
Trang đăng ký:
Trang bảng điều khiển:
Sự kết luận
Trong thực tế này, chúng tôi đã đề cập đến một khái niệm quan trọng liên quan đến bootstrap và học cách cài đặt bootstrap trong Laravel 9.
Cũng đọc: Tìm kiếm tự động hoàn thành bằng UI jQuery trong Laravel 9Autocomplete Search using jQuery UI in Laravel 9
Bài viết trung bình:
- Tạo một plugin WordPress tùy chỉnh từ đầu [2022]
- Tạo ứng dụng CRUD với Laravel và Vue.js
- Cách đăng nhập với Google trong PHP
- Cài đặt Reactjs trong hướng dẫn của Laravel 9
- Codeigniter 3 và AngularJS crud với hướng dẫn tìm kiếm và phân trang
- Php Chunk Tải lên bằng cách sử dụng JavaScript
Trong phần này, chúng tôi sẽ cài đặt Bootstrap 5 trong Laravel 9 với Vite. Trong Laravel 9.19 đi kèm với Công cụ VITE, chúng tôi sẽ cài đặt Bootstrap 5 trong Laravel 9 với UI Larave.
Bước 1: & NBSP; Cài đặt Dự án Laravel
Cài đặt một ứng dụng Laravel mới, vì vậy hãy đến thiết bị đầu cuối, nhập lệnh và tạo một ứng dụng Laravel mới.
composer require laravel/ui
0Bước 2: & NBSP; Cài đặt UI Laravel cho Bootstrap 5
Tiếp theo, bạn cần chạy lệnh bên dưới trong thiết bị đầu cuối của mình
composer require laravel/ui
1Bước 3: Bước lên giàn giáo auth với bootstrap 5
Sử dụng bất cứ ai cho bạn yêu cầu.
composer require laravel/ui
2hoặc
composer require laravel/ui
3Lưu ý: Nếu bạn đang sử dụng phiên bản mới nhất Laravel và Laravel UI. Bạn không cần phải làm theo bước dưới đây. Ngoài ra Laravel UI mặc định hỗ trợ cấu hình vite.
Bước 4: Nhập vite.config.js Bootstrap 5 đường dẫn
Đầu tiên, bạn cần thay đổi Vite.Config.js và thêm Bootstrap 5 Path & Xóa tài nguyên/CSS/APP.CSSS
Trước vite.config.js
composer require laravel/ui
4Sau vite.config.js
composer require laravel/ui
5Bước 5: Nhập Bootstrap 5 SCSS trong thư mục JS
Bây giờ bạn cần nhập đường dẫn Bootstrap 5 SCSS trong tài nguyên của bạn/js/app.js hoặc tài nguyên/js/bootstrap.js
resources/js/app.js
composer require laravel/ui
6Bước 6: Thay thế Mix [] bằng Chỉ thị Blade @Vite
Khi sử dụng VITE, bạn sẽ cần sử dụng Chỉ thị Blade @Vite thay vì Trình trợ giúp Mix []. Hủy bỏ hỗn hợp người trợ giúp và thêm chỉ thị @vite.@vite Blade directive instead of the mix[] helper. remove mix helper and add @vite directive.
composer require laravel/ui
7Sử dụng Chỉ thị @Vite@vite directive
composer require laravel/ui
8views/layouts/app.blade
composer require laravel/ui
9Bước 7: Chạy lệnh VITE để xây dựng tệp tài sản
Bạn cần NPM Run Build Lệnh để tạo tài sản Bootstrap 5.
php artisan ui bootstrap
0//localhost:8000/register
Trang đăng nhập Laravel 9 Vite Bootstrap 5
Cũng đọc
Laravel 9 Thêm thanh bên đơn giản với ví dụ CSS đuôi
Cách sử dụng Slider Carousel trong ví dụ Laravel 9
Các bài viết của Laravel 9 có thẻ nhiều ví dụ cho nhiều mối quan hệ
Laravel 9 Chèn danh mục trong ví dụ về bài viết crud
Cách sử dụng CKeditor 5 trong Laravel 9 Vite với Tailwind CSS
Laravel 9 Tải lên hình ảnh đơn giản trong CKeditor 5 Ví dụ
Laravel 9 flash thời gian chờ tin nhắn và ẩn tin nhắn ví dụ
Cài đặt & thiết lập Trình chỉnh sửa Markdown trong Laravel 9
Nuxt 3 Data Fetching bằng ví dụ API Laravel 9
Laravel 9 Tải lên hình ảnh lên với bản xem trước bằng Tailwind CSS & Alpine JS
Laravel 9 với Tailwind CSS Form Form
API phụ trợ Laravel 9 Kết nối với & nbsp; Vue 3 bằng ví dụ Axios
Laravel 9 API REST VỚI VUE 3 Ví dụ về API CRUD
Xác thực Laravel 9 với ví dụ JS tiếp theo
Xác thực của Laravel 9 Sanctum với ví dụ Nuxt JS
Laravel 9 Tìm kiếm đơn giản với ví dụ về phân trang
Laravel 9 Cài đặt Cài đặt cao [Tailwind, Alpinejs, LiveWire] Bảng điều khiển quản trị
Cách sửa và làm sạch Kiểu mã & NBSP; trong Laravel 9
Ví dụ tải lên tệp hình ảnh Laravel 9
3 Cách để tạo Slug trong Laravel 9 mà không có gói
Cách thêm chế độ tối trong Laravel 9 với CSS đuôi