Để cài đặt Bootstrap 4 trong Laravel 8, sau đó cài đặt sau Gói nhà soạn nhạc Laravel UI để nhận lệnh:
composer require laravel/ui
Sau khi cài đặt thành công gói trên thì chúng tôi đã sẵn sàng cài đặt Bootstrap.
Tồn tại 2 cách để làm điều đó, một là cài đặt thiết lập bootstrap đơn giản và một cách khác là cài đặt bootstrap với auth.
Cài đặt Bootstrap 4:
php artisan ui bootstrap
Cài đặt bootstrap 4 với auth
php artisan ui bootstrap --auth
Bây giờ bạn có thể xem thư mục tài nguyên của bạn thư mục JS.
Bạn cũng cần cài đặt NPM và chạy nó:
npm install
Và sau đó, chạy NPM
npm run dev
Bây giờ bạn có thể làm việc với ứng dụng Bootstrap 4 của bạn.
Bạn có thể sử dụng nó bao gồm các dòng này trên tiêu đề của các mẫu lưỡi của bạn:
Trân trọng
Bootstrap là gì?
Bootstrap & nbsp; là một khung phát triển web miễn phí và nguồn mở. Nó được thiết kế để giảm bớt quá trình phát triển web của các trang web đáp ứng, đầu tiên trên thiết bị di động bằng cách cung cấp một bộ sưu tập cú pháp cho các thiết kế mẫu.
Nói cách khác, Bootstrap giúp các nhà phát triển web & NBSP; xây dựng các trang web & NBSP; nhanh hơn vì họ không cần phải lo lắng về các lệnh và chức năng cơ bản. Nó bao gồm & nbsp; HTML, & NBSP; CSS và các tập lệnh dựa trên JS cho các chức năng và thành phần liên quan đến thiết kế web khác nhau.
Bootstrap 5 & nbsp; là phiên bản mới nhất của Bootstrap. is the newest version of Bootstrap.
Các tính năng của bootstrap
1. Dễ dàng bắt đầu với
Nó là khá dễ dàng, để bắt đầu với. Dễ dàng bắt đầu có lẽ là chất lượng đầu tiên khiến Bootstrap rất hấp dẫn.
2. Ít hơn cũng như các tệp CSS
Bootstrap không chỉ cung cấp ít các tệp mà còn bao gồm các tệp CSS cũ.
3. Dễ dàng tùy chỉnh
Mặc dù thực tế là Bootstrap được thiết kế trong các lưới, bố cục và thành phần 12 cột đáp ứng, nhưng nó cũng rất dễ dàng để tùy chỉnh. Cho dù bạn cần một lưới cố định hoặc một lưới đáp ứng, nó có thể được thực hiện bằng cách thực hiện một vài thay đổi. Các cột bù đắp và làm tổ cũng dễ dàng thực hiện trong cả lưới trình duyệt dựa trên CPU và dựa trên thiết bị di động.
4. Các lớp tiện ích đáp ứng
Một tính năng nổi bật khác của Bootstrap là các lớp tiện ích đáp ứng của nó. Sử dụng các lớp tiện ích đáp ứng, một phần nội dung cụ thể có thể được thực hiện để xuất hiện hoặc chỉ ẩn trên các thiết bị tùy thuộc vào kích thước của màn hình được sử dụng. Tính năng này cực kỳ hữu ích cho các nhà thiết kế muốn tạo một phiên bản di động và thân thiện với máy tính bảng của trang web của họ.
5. Các thành phần của bootstrap
Một số thành phần được tạo kiểu trước trong bootstrap là:
- Drop-downs
- Cái nút
- dẫn đường
- danh hiệu
- Cảnh báo
- Thanh tiến trình
6. Menu thành phần thả xuống
Menu thành phần thả xuống là một tính năng phụ gia đáp ứng của một trang web. Để đưa nó vào một trang web, rất nhiều plugin khác nhau, chủ yếu là dựa trên Java, được thử nghiệm. Nhưng, thông qua Bootstrap và các tùy chọn tùy chỉnh dễ dàng của nó, điều này có thể dễ dàng được thực hiện trong vài phút.
7. Mẫu bootstrap
Các mẫu có sẵn giúp người dùng thiếu kinh nghiệm dễ dàng tạo một trang web theo hướng dẫn đơn giản hoặc bản demo có sẵn trên Bootstrap.
Vite là gì?
Vite [từ tiếng Pháp cho "nhanh", phát âm / vit /, như "veet"] là & nbsp; một công cụ xây dựng nhằm cung cấp trải nghiệm phát triển nhanh hơn và gọn gàng hơn cho các dự án web hiện đại.a build tool that aims to provide a faster and leaner development experience for modern web projects.
Các tính năng của Vite
- Máy chủ tức thời bắt đầu
- Lightning Fast HMR [Thay thế mô -đun nóng]
- Hỗ trợ cho TypeScript, JSX, CSS, và nhiều hơn nữa.
- Tối ưu hóa bản dựng
- Plugin Universal
- API gõ đầy đủ
Laravel vừa phát hành & nbsp; Lar Laravel 9.19, & nbsp; với một thay đổi lớn. Không có thêm tệp WebPack.Mix.js trong Root Laravel ở vị trí của & nbsp; webpack.mix.js & nbsp; file & nbsp; vite.config.js & nbsp; tệp được giới thiệu.“laravel 9.19” with a major change. There is no more webpack.mix.js file in the laravel root in the place of the webpack.mix.js file vite.config.js file is introduced.
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.
Cách cài đặt Bootstrap 5 trong Laravel 9 với Vite
Sử dụng các bước sau để cài đặt Bootstrap 5 trong Laravel 9 với VITE.
- Cài đặt dự án Laravel
- Cài đặt uivel ui cho bootstrap 5
- Cài đặt & NBSP; Giàn giáo Auth với Bootstrap 5
- Cài đặt phụ thuộc NPM
- Nhập Vite.Config.js Bootstrap 5 Đường dẫn
- Cập nhật bootstrap.js
- Nhập Bootstrap 5 SCSS trong thư mục JS
- Thay thế Mix [] bằng Chỉ thị Blade @Vite
- Chạy lệnh vite để xây dựng tệp tài sản
- Khởi động máy chủ cục bộ
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 create-project --prefer-dist laravel/laravel:^9.0 laravel9-bootstrap5-vite
Hoặc, nếu bạn đã cài đặt trình cài đặt Laravel làm phụ thuộc của nhà soạn nhạc toàn cầu:
laravel new laravel9-bootstrap5-vite
Bước 2: & NBSP; Cài đặt UI Laravel cho Bootstrap 5
Tiếp theo, bạn cần chạy lệnh dưới đây trong thiết bị đầu cuối của bạn
composer require laravel/ui
Bước 3: Cài đặt & NBSP; Giàn giáo Auth với Bootstrap 5
php artisan ui bootstrap --auth
& NBSP; Bước 4: Cài đặt phụ thuộc NPM
Chạy lệnh sau để cài đặt phụ thuộc frontend:
php artisan ui bootstrap
0Bước 5: Nhập vite.config.js Bootstrap 5 đường dẫn
Đầu tiên, bạn cần thay đổi & nbsp; vite.config.js & nbsp; và thêm đường dẫn bootstrap 5 & xóa & nbsp; resource/css/app.css
php artisan ui bootstrap
1Bước 6: Cập nhật bootstrap.js
Chúng ta cần sử dụng
php artisan ui bootstrap
9 thay vì php artisan ui bootstrap --auth
0.php artisan ui bootstrap
2Bước 7: 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 bạn & nbsp; resource/js/app.js & nbsp; hoặc & nbsp; resources/js/bootstrap.js
resources/js/app.js
php artisan ui bootstrap
3Bước 8: Thay thế Mix [] bằng Chỉ thị Blade @Vite
Khi sử dụng Vite, bạn sẽ cần sử dụng & nbsp;@vite & nbsp; chỉ thị blade thay vì & nbsp; mix [] & nbsp; trợ giúp. Xóa hỗn hợp người trợ giúp và thêm & nbsp;@vite & nbsp; Chỉ thị.@vite Blade directive instead of the mix[] helper. remove mix helper and add @vite directive.
php artisan ui bootstrap
4use @vite directive@vite directive
php artisan ui bootstrap
5views/layouts/app.blade
php artisan ui bootstrap
6Bước 9: Chạy lệnh VITE để xây dựng tệp tài sản
Bạn cần & nbsp; NPM Run Build & nbsp; lệnh để tạo tài sản Bootstrap 5.
php artisan ui bootstrap
7Bước 10: Khởi động máy chủ cục bộ
Bây giờ hãy mở một thiết bị đầu cuối mới và thực hiện lệnh sau từ thiết bị đầu cuối của bạn để chạy máy chủ phát triển.
php artisan ui bootstrap
8và điều hướng đến liên kết sau & nbsp; // localhost: 8000/
Cảm ơn bạn & nbsp; đã đọc blog này. for reading this blog.
Bạn có thể tìm thấy Kho lưu trữ GitHub ở đây & nbsp; Suresh-Ramani/Laravel9-BootStrap5-Vite.
Đọc thêm: & nbsp; Cách cài đặt React trong Laravel 9 với Vite How To Install React in Laravel 9 with Vite
Bạn muốn quản lý máy chủ VPS / VM của mình mà không cần chạm vào dòng lệnh GO và & nbsp; & nbsp; kiểm tra liên kết này. & Nbsp; serverAvatar cho phép & nbsp; Biên bản.matter of minutes. You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.
Nếu bạn có bất kỳ truy vấn hoặc nghi ngờ nào về chủ đề này, xin vui lòng & nbsp; liên hệ với chúng tôi. Chúng tôi sẽ cố gắng tiếp cận bạn.