Laravel 8 có đi kèm với bootstrap không?

Giả sử bạn là người mới làm quen với Laravel 8, tôi có thể hỗ trợ bạn cài đặt bootstrap 4 trong Laravel 8. đó là một cách cực kỳ đơn giản để cài đặt bằng cách sử dụng gói tác giả Laravel ui. Gói Laravel ui thêm Trợ giúp về Laravel 8

Laravel ui đưa ra cách tiếp cận để cài đặt bootstrap, vue và thiết lập phản ứng. họ cũng cung cấp khung xác thực để đăng nhập và đăng ký. Laravel 8 cung cấp một cách tiếp cận đơn giản để làm việc với bootstrap, vue và phản ứng

Để cài đặt bootstrap 4 trong các dự án Laravel 8 của bạn thì bạn phải cài đặt gói trình soạn thảo Laravel ui sau đây để nhận lệnh

Composer require Laravel/ui

Sau khi cài đặt thành công gói trên, chúng tôi đã sẵn sàng cài đặt bootstrap 4 với ứng dụng của mình

chúng ta có thể cài đặt theo hai cách, một là cài đặt thiết lập bootstrap 4 đơn giản và cách khác là cài đặt bootstrap 4 bằng auth. Vì vậy, làm thế nào về chúng ta thấy cả hai cách

Tạo bố cục là một phần quan trọng của bất kỳ dự án nào. Nhận ra điều này, Laravel đi kèm với một công cụ tạo khuôn mẫu Blade tạo ra các mẫu và thiết kế kiểu dáng đẹp dựa trên HTML. Tất cả các Laravel view được xây dựng bằng Blade đều nằm trong resource/views

Bootstrap nổi tiếng trong giới phát triển với các tùy chọn thiết kế ấn tượng. Laravel làm cho việc sử dụng các mẫu Bootstrap trong chế độ xem của dự án trở nên cực kỳ dễ dàng. Trong hướng dẫn này, tôi sẽ trình bày cách sử dụng các mẫu Bootstrap trong công cụ Laravel Blade

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. Laravel không chỉ định bạn sử dụng bộ tiền xử lý JavaScript hoặc CSS nào, 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

Tích hợp mẫu Bootstrap với Laravel là một quy trình đơn giản. Tất cả những gì bạn cần làm là cắt HTML Bootstrap của bạn thành các nội dung mẫu Blade nhỏ, sau đó sử dụng, mở rộng và/hoặc bao gồm các mẫu trong tệp Blade chính. Để minh họa quy trình, tôi sẽ sử dụng Album Ví dụ cho Bootstrap

Điều kiện tiên quyết đơn giản là cài đặt mới Laravel 9

Laravel có sử dụng bootstrap không?

Laravel 8 cung cấp cách dễ dàng để làm việc với bootstrap, vue và Reac, Thư mục bootstrap chứa ứng dụng. php tệp khởi động khung. Thư mục này cũng chứa một thư mục bộ đệm chứa các tệp do khung tạo để tối ưu hóa hiệu suất, chẳng hạn như các tệp bộ đệm của tuyến đường và dịch vụ. Thông thường, bạn không cần phải sửa đổi bất kỳ tệp nào trong thư mục này

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

Tạo tệp bố cục

Trước khi tạo file layout, bạn cần hiểu cấu trúc file Laravel. Đối với điều này, tôi khuyên bạn nên đọc bài viết của tôi về cách tạo bố cục Laravel bằng công cụ tạo khuôn mẫu Blade

Bây giờ, hãy xem mã của trang mẫu và xác định các phần khác nhau của trang. Giữ các phần này trong các tệp riêng biệt để quản lý dễ dàng

Bây giờ bạn có thể thấy mã của mẫu của mình. Nó bao gồm các phần khác nhau và tôi sẽ tạo một bố cục trong đó tôi sẽ giữ tất cả các phần riêng biệt của bố cục

Chuyển đến thư mục tài nguyên/xem và tạo một thư mục mới với tên, bố cục. Thư mục này sẽ chứa bố cục chính (và các tệp khác sẽ được đưa vào bố cục)

Bây giờ, tạo một thư mục khác và đặt tên là partials. Thư mục này sẽ chứa các tệp một phần như đầu trang và chân trang mà tệp bố cục sẽ sử dụng

Chuyển đến thư mục bố cục và tạo một tệp có tên là mainlayout. lưỡi. php. Thêm đoạn mã sau vào nó

 

   @include('layout.partials.head')

 

 


@include('layout.partials.nav'

@include('layout.partials.header')

@yield('content')

@include('layout.partials.footer')

@include('layout.partials.footer-scripts')

 

Mã này tạo một tệp bố cục sẽ bao gồm (@include) tất cả nội dung của tệp được chỉ định tại vị trí mong muốn bên trong tệp HTML. @yield sẽ đặt nội dung được chỉ định của tệp đang mở rộng bố cục này

Tạo tập tin một phần

Tiếp theo, tạo các tệp một phần được bao gồm trong tệp bố cục chính. Chuyển đến thư mục partials và tạo một tệp có tên là head. lưỡi. php. Tệp này sẽ chứa nội dung đi vào phần đầu của trang

Album example for Bootstrap

Tạo điều hướng tệp. lưỡi. php. Tệp này sẽ chứa mã liên quan đến việc tạo điều hướng của trang bootstrap

 


     


       


         


           
About

           
Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.

         


         


           
Contact

           


             
Follow on Twitter

             
Like on Facebook

             
Email me

           

         


       


     


   


   


     


       Album

       

         

       

     

   

Tiếp theo, tạo tiêu đề tệp. lưỡi. php. Tệp này sẽ chứa tiêu đề hiển thị của trang Bootstrap

     


       Album example

       
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sIet, but not too short so folks don't simply skip over it entirely.

       


         Main call to action

         Secondary action

       

     

Bước tiếp theo là tạo tệp cho chân trang. Đối với điều này, hãy tạo một tệp có tên footer. lưỡi. php

     


       


         Back to top

       

       
Album example is © Bootstrap, but please download and customize it for yourself!

       
New to Bootstrap? Visit the homepage or read our getting started guide.

     


   

Bây giờ hãy tạo một tệp có tên footer-scripts. lưỡi. php chứa các tệp JS nên được đưa vào cuối trang

Sau khi tạo tất cả các tệp dạng xem, thư mục dạng xem sẽ giống như thế này

Vậy là xong, Mẫu Bootstrap mẫu Album Bootstrap hiện đã được tích hợp với Laravel

Kiểm tra tích hợp

Hãy tạo một tệp xem mở rộng tệp bố cục này để bạn có thể thấy tích hợp bố cục Bootstrap với mẫu Laravel Blade đang hoạt động

Tạo một tập tin demo. lưỡi. php trong thư mục lượt xem và thêm nội dung sau vào tệp

@extends('layout.mainlayout')

@section('content')

   


     


       


         This is a demo text

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas dolor vulputate quam convallis consequat. Quisque eu lorem eget magna lacinia suscipit. Maecenas condimentum vehicula eros. Fusce massa lacus, blandit et leo sed, accumsan commodo sem. Sed eget pulvinar tellus. Praesent ex diam, sodales at consequat id, viverra ut dolor. In eget orci sit amet magna sagittis mattis sit amet sed augue. Vivamus facilisis libero ligula, vel sodales ipsum sollicitudin id. Duis vitae urna rutrum, dignissim arcu ac, elementum augue. Quisque id interdum ligula. Donec tincidunt feugiat massa sed aliquam. Duis eu vehicula turpis.



     


   


@endsection

Tạo các tuyến đường

Bây giờ chế độ xem đã được tạo, bước tiếp theo là tạo tuyến đường để truy cập chế độ xem. Đối với điều này, đi đến các tuyến đường/web. php và dán các tuyến đường sau

Bây giờ hãy chạy ứng dụng bằng cách sử dụng URL dàn dựng. Bạn sẽ thấy mẫu Album Bootstrap được tích hợp với ứng dụng của bạn

Tích hợp Bootstrap Admin Template trong Laravel

Trong ví dụ này, tôi sẽ trình bày cách tích hợp Cool Admin Dashboard vào ứng dụng Laravel. Nó sẽ giải thích cặn kẽ cho bạn cách tích hợp các chủ đề bootstrap trong ứng dụng Laravel dễ dàng như thế nào

Dưới đây là ví dụ minh họa quy trình từng bước tích hợp chủ đề quản trị vào ứng dụng. Đây là một trong những yêu cầu chính của bất kỳ ứng dụng web nào, vì nó cho phép chúng tôi quản lý các thành phần khác nhau của trang web chỉ từ bảng điều khiển

Trong hướng dẫn này, tôi sẽ tạo hai trang sau khi tích hợp chủ đề. Trong hai trang này, tôi sẽ sử dụng chủ đề tích hợp của chúng tôi. Các trang đó sẽ mang các tên sau

1) nhà của tôi

2) người dùng của tôi

Tải xuống Bảng điều khiển dành cho quản trị viên thú vị

Trước hết, hãy tải xuống bất kỳ bảng điều khiển nào bạn muốn tích hợp với ứng dụng Laravel của mình. Tôi đã tải xuống Cool Admin Dashboard vì nó dễ sử dụng và có giao diện thân thiện với người dùng. Sau khi quá trình tải xuống hoàn tất, hãy giải nén các tệp JS, CSS và các biểu tượng từ nó và đặt nó vào ứng dụng Laravel

Thứ hai, tạo một thư mục chủ đề trong thư mục chung và sao chép tất cả dữ liệu vào thư mục chủ đề đó

Lộ trình cấu hình

Bây giờ mình sẽ thêm 2 route “my-home” và “my-users” cho 2 trang. Mở tệp tuyến đường và thêm mã tuyến đường sau

routes/web.php

Route::get('my-home', '[email protected]');

Route::get('my-users', '[email protected]');

Thêm bộ điều khiển

Trong bước này, tôi sẽ tạo một HomeController mới và thêm hai phương thức cho trang bảng điều khiển và trang người dùng của tôi. Nhập mã sau vào HomeController

 

   @include('layout.partials.head')

 

 


@include('layout.partials.nav'

@include('layout.partials.header')

@yield('content')

@include('layout.partials.footer')

@include('layout.partials.footer-scripts')

 

Sau khi thiết lập thành công tiêu đề, đã đến lúc thiết lập thanh bên. Nhập mã sau

Album example for Bootstrap

Trang Chủ

Trong bước này, tôi sẽ tạo hai tệp phiến mới bằng cách sử dụng bố cục chủ đề tích hợp. Tôi đã thêm hai tuyến đường một cho nhà và một cho người dùng. Hãy tạo hai tệp và xem cách chủ đề tích hợp hoạt động

Album example for Bootstrap

bảng nhân viên

Album example for Bootstrap

Các mẫu Bootstrap phổ biến của Laravel

OneUI

OneUI là một mẫu – được tạo cho các ứng dụng Laravel – được xây dựng trên Bootstrap. Đây là giao diện người dùng cho phép các nhà phát triển tạo bảng điều khiển quản trị chuyên nghiệp, linh hoạt và có thể quản lý hoàn toàn cho tất cả các loại dự án

Bảng điều khiển vật liệu Laravel

Material Dashboard Laravel thúc đẩy quá trình phát triển, lấy cảm hứng từ thiết kế material design mới của Google. Nó có một giao diện thân thiện với người dùng và một phụ trợ đầy đủ chức năng của Laravel. Trang tổng quan tạo điều kiện cho các nhà phát triển quản lý người dùng bằng các kỹ thuật CRUD vượt trội

Bảng điều khiển màu đen Laravel

Black Dashboard Laravel sử dụng các thành phần giao diện người dùng có thể tùy chỉnh và dễ hiểu. Nó sử dụng sự kết hợp màu sắc bắt mắt, đủ sống động để chạy phân tích hiệu quả trong quá trình phát triển của bạn với các thẻ và kiểu chữ rộng rãi

Góc

Angle là bảng quản trị động tương thích với Laravel và nhiều framework khác. Nhà phát triển có thể sử dụng bảng điều khiển này trong bất kỳ loại bảng điều khiển ứng dụng nào để xây dựng Ứng dụng một trang (SPA), ứng dụng Thương mại điện tử, hệ thống quản lý dự án, v.v. Các thành phần của bảng điều khiển này hỗ trợ các nhà phát triển làm việc với HTML5, Bootstrap, JS, CSS và các công nghệ chính khác

Tóm lại

Trong bài viết này, tôi đã trình bày việc tích hợp Cool Admin Dashboard vào ứng dụng Laravel và cũng chỉ ra cách định cấu hình một chủ đề tùy chỉnh trong ứng dụng. Cả hai kỹ thuật tích hợp đều được minh họa khá chi tiết và hy vọng rằng chúng sẽ phù hợp với bạn và giúp bạn phát triển (các) ứng dụng web được tối ưu hóa

Nếu bạn vẫn còn thắc mắc về hướng dẫn này, vui lòng sử dụng phần bình luận để giải đáp thắc mắc của bạn

Trong hướng dẫn này, tôi đã trình bày một cách dễ dàng để tích hợp bất kỳ mẫu Bootstrap nào vào ứng dụng Laravel. Nếu bạn có bất kỳ câu hỏi xin vui lòng bình luận dưới đây. Ngoài ra, hãy theo dõi tôi trên Twitter và kết nối

Laravel có sử dụng bootstrap không?

Laravel không chỉ định bạn cần sử dụng bộ xử lý trước, JavaScript hoặc CSS nào, tuy nhiên, nó cung cấp một điểm khởi đầu thiết yếu bằng cách sử dụng Bootstrap, React và/hoặc Vue sẽ hỗ trợ 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

Laravel 8 có hỗ trợ bootstrap không?

laravel 8 cung cấp cách đơn giản để làm việc với bootstrap, vue và phản ứng. Sau khi cài đặt hiệu quả gói trên vào thời điểm đó, chúng tôi đã sẵn sàng cài đặt bootstrap 4 với ứng dụng của mình

Đánh giá của khách hàng tại

“Dịch vụ lưu trữ trên nền tảng đám mây có một trong những dịch vụ khách hàng tốt nhất và tốc độ lưu trữ”

Sanjit C [Nhà phát triển trang web]

Saquib Rizwan

Saquib là Chuyên gia cộng đồng PHP tại Cloudways - Nền tảng đám mây lưu trữ PHP được quản lý. Anh thông thạo PHP và thường xuyên đóng góp cho các dự án mã nguồn mở. Để giải trí, anh ấy thích chơi game, xem phim và đi chơi với bạn bè. Bạn có thể gửi email cho anh ấy tại [email được bảo vệ]

Làm cách nào để sử dụng biểu mẫu Bootstrap trong Laravel 8?

Làm cách nào để đưa Bootstrap 5 vào Laravel 8?

Làm cách nào để thay đổi phiên bản Bootstrap trong Laravel 8?

Laravel 9 có đi kèm với bootstrap không?