Làm cách nào để sử dụng Bootstrap với Laravel?
Bootstrap là một khung CSS nguồn mở và miễn phí để phát triển web giao diện người dùng đầu tiên trên thiết bị di động và đáp ứng. Nó chứa các bố cục thiết kế dựa trên HTML, CSS và JavaScript cho kiểu chữ, biểu mẫu, nút, tuyến đường và các thành phần giao diện khác. Khung phổ biến này có một hệ thống lưới đáp ứng để bố trí, các thành phần dựng sẵn cho các mẫu thiết kế và các plugin JS để tương tác với người dùng Show
Trong bài viết này, tôi sẽ giới thiệu cho bạn về Bootstrap và cách cài đặt nó trong ứng dụng Laravel 9 của bạn Bootstrap là gì?Bootstrap tăng tốc độ phát triển web và làm cho nó dễ dàng hơn. Nó đáp ứng theo thiết kế và tương thích với nhiều trình duyệt. Nó cung cấp thiết kế đáng tin cậy thông qua các thành phần có thể tái sử dụng và đặc biệt đơn giản để sử dụng và tìm hiểu. Bootstrap sử dụng JavaScript, tích hợp sẵn cho các plugin jQuery và API JavaScript có lập trình. Nó có thể được sử dụng với bất kỳ trình soạn thảo IDE hoặc PHP miễn phí nào cũng như bất kỳ ngôn ngữ và công nghệ phía máy chủ nào, từ ASP. NET và Ruby on Rails sang PHP. Giao diện người dùng Bootstrap là một thư viện thiết kế nhất quán cho các ứng dụng web đẹp và trực quan Với Bootstrap, các nhà thiết kế web có thể tập trung vào các cải tiến mà không phải căng thẳng về thiết kế, để có được một trang web tương tác và chạy nhanh chóng. Nó cũng cung cấp cho các kiến trúc sư web một cơ sở mạnh mẽ để tạo các chủ đề Bootstrap thú vị Làm cách nào để cài đặt Bootstrap 5 trong Laravel 9?Làm theo hướng dẫn từng bước này để sử dụng laravel bootstrap. 1) Cài đặt dự án LaravelThực hiện lệnh sau để cài đặt dự án Laravel mới từ đầu nhà soạn nhạc tạo dự án laravel/laravel –prefer-dist laravel-bootstrap Để sử dụng ứng dụng Laravel mới tạo cd laravel-bootstrap 2) Cài đặt Laravel/UILaravel UI là một thư viện chính thức gồm các thành phần UI cụ thể hoặc được xác định trước. Nó cung cấp một nền tảng đăng nhập và đăng ký cho các định dạng Reply, Vue, jQuery và Bootstrap Chạy lệnh này để cài đặt Laravel/UI nhà soạn nhạc yêu cầu laravel/UI 3) Cài đặt Bootstrap trong LaravelChạy lệnh này để cài đặt Bootstrap CSS framework trong dự án Laravel của bạn nghệ nhân php lên Bootstrap 4) Cài đặt Giàn giáo Bootstrap AuthThực hiện lệnh sau để cài đặt giàn giáo xác thực thủ công php lên Bootstrap –auth Điều này kết thúc quá trình cài đặt của Bootstrap. Để đảm bảo nó được cài đặt đúng cách, hãy truy cập resource/js/bootstrap. js. Bạn sẽ thấy popper đó. js và jQuery đã được thêm vào tệp JavaScript của Bootstrap 5) Cài đặt Gói BootstrapBây giờ, hãy 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 tiếp tục, 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 bằng lệnh sau # cho nút nút -v # cho npm npm -v Cuối cùng, cài đặt gói Bootstrap và các phụ thuộc giao diện người dùng có liên quan như jquery từ npm bằng lệnh sau cài đặt npm 6) Biên dịch nội dungThư mục tài nguyên/sass _variables. scss và ứng dụng. các tệp scss sẽ được thêm cùng với các biến và phông chữ sass // Phông chữ @nhập url(‘https. //phông chữ. googleapis. com/css?family=Nunito’); // Biến @import 'biến'; // Bootstrap @import '~bootstrap/scss/bootstrap'; Bây giờ hãy chạy lệnh bên dưới để biên dịch nội dung # cho sự phát triển npm chạy dev Chạy lệnh bên dưới để biên dịch các tệp CSS và JavaScript từ thư mục resource/js và resource/sass sang thư mục chung # cho việc sản xuất npm chạy sản xuất 7) Tự động thay đổi SASS và JSNếu bạn 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, hãy sử dụng lệnh sau đồng hồ chạy npm Điều này sẽ theo dõi các tệp của bạn và tự động biên dịch mã nếu nó phát hiện bất kỳ thay đổi nào trong các tệp SASS và JS 8) Sử dụng Bootstrap trong Laravel Blade TemplateCác tệp sass hiện được biên dịch thành một tệp CSS bên trong thư mục chung. Chúng ta có thể xác định đường dẫn js và CSS và sử dụng Bootstrap js và CSS trong mẫu phiến Laravel Mặc dù Laravel không chỉ định bạn sử dụng bộ tiền xử lý JavaScript hoặc CSS nào, nhưng nó cung cấp điểm khởi đầ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. Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói giao diện người dùng này Giàn giáo Bootstrap và Vue do Laravel cung cấp nằm trong gói Trình soạn thảo
Khi gói
Laravel Mix cung cấp một API rõ ràng, biểu cảm qua việc biên dịch SASS hoặc Ít hơn, là các phần mở rộng của CSS đơn giản có thêm các biến, mixin và các tính năng mạnh mẽ khác giúp làm việc với CSS thú vị hơn nhiều. Trong tài liệu này, chúng ta sẽ thảo luận ngắn gọn về việc biên dịch CSS nói chung; Laravel không yêu cầu bạn sử dụng một framework hoặc thư viện JavaScript cụ thể để xây dựng các ứng dụng của bạn. Trên thực tế, bạn hoàn toàn không phải sử dụng JavaScript. Tuy nhiên, Laravel có bao gồm một số giàn giáo cơ bản để giúp bạn bắt đầu viết JavaScript hiện đại dễ dàng hơn bằng thư viện Vue. Vue cung cấp API biểu cảm để xây dựng các ứng dụng JavaScript mạnh mẽ bằng cách sử dụng các thành phần. Cũng như CSS, chúng ta có thể sử dụng Laravel Mix để dễ dàng biên dịch các thành phần JavaScript thành một tệp JavaScript duy nhất, sẵn sàng cho trình duyệt Viết CSSSau khi cài đặt gói 0 của Laravel sẽ bao gồm gói 1 để giúp bạn bắt đầu tạo nguyên mẫu giao diện người dùng của ứng dụng bằng Bootstrap. Tuy nhiên, vui lòng thêm hoặc xóa các gói khỏi tệp 0 nếu cần cho ứng dụng của riêng bạn. Bạn không bắt buộc phải sử dụng khung Bootstrap để xây dựng ứng dụng Laravel của mình - nó được cung cấp như một điểm khởi đầu tốt cho những ai chọn sử dụng nóTrước khi biên dịch CSS của bạn, hãy cài đặt các phần phụ thuộc giao diện người dùng của dự án bằng trình quản lý gói Node (NPM) Khi các phần phụ thuộc đã được cài đặt bằng cách sử dụng 3, bạn có thể biên dịch các tệp SASS của mình thành CSS đơn giản bằng cách sử dụng. Lệnh 4 sẽ xử lý các hướng dẫn trong tệp 5 của bạn. Thông thường, CSS đã biên dịch của bạn sẽ được đặt trong thư mục 6Tệp 5 đi kèm với giàn giáo giao diện người dùng của Laravel sẽ biên dịch tệp 8 SASS. Tệp 9 này nhập một tệp gồm các biến SASS và tải Bootstrap, đây là điểm khởi đầu tốt cho hầu hết các ứng dụng. Vui lòng tùy chỉnh tệp 9 theo bất kỳ cách nào bạn muốn hoặc thậm chí sử dụng một bộ tiền xử lý hoàn toàn khác bằng cách định cấu hình Laravel MixViết JavaScriptTất cả các phụ thuộc JavaScript mà ứng dụng của bạn yêu cầu có thể được tìm thấy trong tệp 0 trong thư mục gốc của dự án. Tệp này tương tự như tệp 2 ngoại trừ nó chỉ định phần phụ thuộc JavaScript thay vì phần phụ thuộc PHP. Bạn có thể cài đặt các phụ thuộc này bằng trình quản lý gói Node (NPM)
Khi các gói được cài đặt, bạn có thể sử dụng lệnh 4 để biên dịch nội dung của mình. Webpack là gói mô-đun cho các ứng dụng JavaScript hiện đại. Khi bạn chạy lệnh 4, Webpack sẽ thực hiện các hướng dẫn trong tệp 5 của bạnTheo mặc định, tệp Laravel 5 biên dịch SASS của bạn và tệp 1. Trong tệp 2, bạn có thể đăng ký các thành phần Vue của mình hoặc, nếu bạn thích một khung khác, hãy định cấu hình ứng dụng JavaScript của riêng bạn. JavaScript đã biên dịch của bạn thường sẽ được đặt trong thư mục 3
Viết các thành phần VueKhi sử dụng gói 7 sẽ được đặt trong thư mục 8. Tệp 7 là một ví dụ về một thành phần Vue tệp duy nhất xác định mẫu JavaScript và HTML của nó trong cùng một tệp. Các thành phần tệp đơn cung cấp một cách tiếp cận rất thuận tiện để xây dựng các ứng dụng dựa trên JavaScript. Thành phần ví dụ được đăng ký trong tệp 2 của bạn
Để sử dụng thành phần trong ứng dụng của bạn, bạn có thể thả nó vào một trong các mẫu HTML của mình. Ví dụ: sau khi chạy lệnh 1 Artisan để dàn dựng màn hình đăng ký và xác thực ứng dụng của bạn, bạn có thể thả thành phần này vào mẫu Blade 2
Nếu bạn quan tâm đến việc tìm hiểu thêm về cách viết các thành phần Vue, bạn nên đọc tài liệu về Vue, tài liệu này cung cấp tổng quan toàn diện, dễ đọc về toàn bộ khung Vue Sử dụng phản ứngNếu bạn thích sử dụng React để xây dựng ứng dụng JavaScript của mình, Laravel giúp bạn dễ dàng hoán đổi khung Vue với khung React
Thêm cài đặt trướcCác cài đặt trước là "có thể điều chỉnh được", cho phép bạn thêm các phương thức bổ sung vào lớp 5 khi chạy. Ví dụ: đoạn mã sau thêm một phương thức 6 vào lớp 5. Thông thường, bạn nên khai báo các macro đặt trước trong nhà cung cấp dịch vụ
Tôi có nên sử dụng bootstrap với Laravel không?Bạn không bắt buộc phải sử dụng khung Bootstrap để xây dựng ứng dụng Laravel của mình - nó được cung cấp như một điểm khởi đầu tốt cho những ai chọn sử dụng nó. gói web. pha trộn. js đi kèm với giàn giáo giao diện người dùng của Laravel sẽ biên dịch tài nguyên/sass/ứng dụng.
Làm cách nào để sử dụng bootstrap với Laravel 8?Vì vậy, hãy làm theo các bước dưới đây. . Bước 1. Cài đặt Laravel Bước 2. Cài đặt giao diện người dùng Laravel Bước 3. tạo giàn giáo Bước 4. Cài đặt gói Bootstrap Bước 5. Sử dụng Bootstrap trong chủ đề Chạy ứng dụng Laravel Làm cách nào để sử dụng mẫu bootstrap trong Laravel?Tích hợp Mẫu Bootstrap với Laravel . Laravel có sử dụng bootstrap không? Tạo tệp bố cục Tạo tập tin một phần Kiểm tra tích hợp Tạo các tuyến đường Tích hợp mẫu quản trị bootstrap trong Laravel Tải xuống Bảng điều khiển dành cho quản trị viên thú vị Lộ trình cấu hình Làm cách nào để sử dụng bootstrap 5 trong Laravel 8?3 cách cài đặt bootstrap 5 trong laravel 8 . 3 cách cài đặt bootstrap 5 trong laravel 8. Bước 1. Tạo dự án Laravel. Bước 2. Thêm Bootstrap 5 CDN. . Bước 1. Tạo dự án Laravel Bước 2. Thêm Bootstrap 5 CDN Bước 3. Thêm thư mục công cộng Bootstrap Bước 4. Thêm Bootstrap 5 bằng Laravel Mix |