Bootstrap là một khung CSS và nó cung cấp các thành phần giao diện người dùng thân thiện với người dùng giúp xây dựng ứng dụng di động hoặc web cấp độ tiếp theo. Đây là hướng dẫn từng bước về cách sử dụng Bootstrap 4 trong Laravel
Cài đặt dự án Laravel
Để cung cấp cho bạn bản demo cài đặt Bootstrap trong Laravel, chúng tôi cần thực hiện lệnh sau để cài đặt một dự án Laravel mới từ đầu
composer create-project laravel/laravel --prefer-dist laravel-bootstrap
Vào bên trong ứng dụng Laravel mới tạo
cd laravel-bootstrap
Cài đặt Laravel/UI
Laravel UI là một thư viện chính thức cung cấp các thành phần UI chọn lọc hoặc được xác định trước. Gói laravel/ui đi kèm với giàn giáo đăng nhập và đăng ký cho các bố cục React, Vue, jQuery và Bootstrap
Chạy lệnh để cài đặt Laravel/UI
composer require laravel/ui
Cài đặt Bootstrap trong Laravel
Chúng ta đã cài đặt thành công gói laravel/ui bằng Composer, bây giờ trong bước này, chúng ta sẽ hiểu cách dễ dàng cài đặt Bootstrap 4 CSS Framework bằng lệnh sau
Chạy lệnh cài đặt Bootstrap trong dự án Laravel
php artisan ui bootstrap
Cài đặt giàn giáo Bootstrap Auth
Thực hiện lệnh sau để Cài đặt giàn giáo xác thực với Bootstrap
php artisan ui bootstrap --auth
Chúng tôi đã cài đặt thành công bootstrap và bạn có thể chắc chắn bằng cách truy cập resource/js/bootstrap. js. Bạn sẽ thấy rằng
cd laravel-bootstrap
1 và jQuery đã được thêm vào tệp JavaScript của bootstrapCài đặt gói Bootstrap
Chúng tôi đã đặt mọi thứ vào vị trí của nó và bây giờ chúng tôi phải cài đặt các gói bootstrap cho thành phần giao diện người dùng được liên kết
Trước khi chúng tôi tiếp tục, trước tiên, hãy đảm bảo rằng bạn đã cài đặt Node trên hệ thống phát triển cục bộ của mình. Chạy lệnh sau để kiểm tra cài đặt nút
# for node
node -v
# for npm
npm -v
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
npm install
Biên dịch nội dung
Như chúng ta có thể thấy, thư mục resource/sass các tệp
cd laravel-bootstrap
2 và cd laravel-bootstrap
3 đã được thêm cùng với các biến sass và phông chữcd laravel-bootstrap
0Bây giờ, chúng ta phải chạy lệnh dưới đây để biên dịch nội dung
cd laravel-bootstrap
1Lệnh trên biên dịch các tệp CSS và JavaScript từ thư mục resource/js và resource/sass sang thư mục
cd laravel-bootstrap
4Tự động thay đổi SASS và JS
Nếu bạn lười và không muốn chạy lệnh npm run dev mỗi khi thực hiện thay đổi trong tệp SASS và JS, bạn nên sử dụng lệnh sau
cd laravel-bootstrap
3Nó theo dõi các tệp của bạn và tự động biên dịch mã nếu phát hiện bất kỳ thay đổi nào được thực hiện trong các tệp SASS và JS
Sử dụng Bootstrap trong Laravel Blade Template
Bây giờ, các tệp sass được tuân thủ thành một tệp CSS duy nhất bên trong thư mục chung và chúng ta có thể xác định đường dẫn js và CSS cũng như sử dụng Bootstrap js và CSS trong mẫu phiến Laravel
cd laravel-bootstrap
0máy đào
Tôi là Digamber, một nhà phát triển toàn diện và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel
Twitter GitHubBài viết đề xuất
Laravel 9 Xác thực Giao thức Internet [IPv6] Hướng dẫn Laravel 9 Nhập bản ghi trong SQL với CSV và Seeder Cách triển khai Xác thực tồn tại trong Laravel 9 Form Laravel 9 Livewire Ví dụ về Hướng dẫn tạo Slug mới Laravel 9 Tạo nhiều Slug duy nhất khi tải trang Hướng dẫn Laravel 9 Bootstrap Tags Ví dụ về hệ thống Hướng dẫn Laravel 9 Tạo