Hướng dẫn install bootstrap 5 laravel 9 - cài đặt bootstrap 5 laravel 9

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('https://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:

http://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

Bướ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

Bướ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

hoặc

composer require laravel/ui

Lư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

Sau vite.config.js

composer require laravel/ui

Bướ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

Bướ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

Sử dụng Chỉ thị @Vite@vite directive

composer require laravel/ui

views/layouts/app.blade

composer require laravel/ui

Bướ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

http://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

Tôi có thể sử dụng bootstrap với laravel không?

Có phải Laravel 8 bao gồm bootstrap?

Tôi có thể sử dụng bootstrap với Laravel Breeze không?

Laravel UI là gì?