Hướng dẫn bootstrap not working in laravel 9 - bootstrap không hoạt động trong laravel 9
|
Để 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: Show
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: Cài đặt bootstrap 4 với 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ó: Và sau đó, chạy NPM 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 bootstrap1. Dễ dàng bắt đầu vớiNó 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 CSSBootstrap 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ỉnhMặ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 ứngMộ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 bootstrapMột số thành phần được tạo kiểu trước trong bootstrap là:
6. Menu thành phần thả xuốngMenu 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 bootstrapCá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
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 ViteSử dụng các bước sau để cài đặt Bootstrap 5 trong Laravel 9 với VITE.
Bước 1: & NBSP; Cài đặt Dự án LaravelCà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. 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: Bước 2: & NBSP; Cài đặt UI Laravel cho Bootstrap 5Tiếp theo, bạn cần chạy lệnh dưới đây trong thiết bị đầu cuối của bạn Bước 3: Cài đặt & NBSP; Giàn giáo Auth với Bootstrap 5& NBSP; Bước 4: Cài đặt phụ thuộc NPMChạy lệnh sau để cài đặt phụ thuộc frontend: Bướ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 Bước 6: Cập nhật bootstrap.jsChúng ta cần sử dụng Bước 7: Nhập Bootstrap 5 SCSS trong thư mục JSBâ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 Bước 8: Thay thế Mix () bằng Chỉ thị Blade @ViteKhi 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. use @vite directive@vite directive views/layouts/app.blade Bước 9: Chạy lệnh VITE để xây dựng tệp tài sảnBạn cần & nbsp; NPM Run Build & nbsp; lệnh để tạo tài sản Bootstrap 5. Bướ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. và điều hướng đến liên kết sau & nbsp; http: // 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. Tôi có thể sử dụng bootstrap với laravel không?Giới thiệu.Mặc dù Laravel không ra lệnh cho các bộ xử lý trước JavaScript hoặc CSS mà bạn sử dụng, nhưng nó cung cấp một điểm bắt đầ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.it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications.
Laravel 8 có hỗ trợ bootstrap không?Laravel 8 cung cấp cách dễ dàng để làm việc với Bootstrap, Vue và React, thư mục Bootstrap chứa ứng dụng.Tệp PHP bootstraps khung., vue and react, The bootstrap directory contains the app. php file which bootstraps the framework.
Tôi có thể sử dụng bootstrap với Laravel Breeze không?Breeze cung cấp một điểm khởi đầu tối thiểu và đơn giản để xây dựng một ứng dụng Laravel với xác thực.Được tạo kiểu với Bootstrap, Breeze xuất bản các bộ điều khiển xác thực và lượt xem cho ứng dụng của bạn có thể dễ dàng tùy chỉnh dựa trên nhu cầu của ứng dụng của bạn.Styled with Bootstrap, Breeze publishes authentication controllers and views to your application that can be easily customized based on your own application's needs.
Bootstrap JS ở đâu ở Laravel?Bootstrap.JS chỉ là tệp bootstrapping của Laravel.Bên trong tập tin này, bootstrap, jQuery, popper đều bị kéo vào. Trong tài nguyên/Ứng dụng/Ứng dụng của bạn.resources/sass/app. |
