Hướng dẫn what version of bootstrap does laravel use? - laravel sử dụng phiên bản bootstrap nào?

Question

Giải pháp 1: Cài đặt bootstrap theo cách thủ công Install bootstrap manually

Nội dung chính Show

1. NPM cài đặt phiên bản bootstrap mới nhất
2. Biên dịch phiên bản mới nhất của Bootstrap Sass thành CSS
Làm thế nào để tôi biết phiên bản bootstrap của tôi ở Laravel?
Laravel 8 có đi kèm với bootstrap không?
Laravel có sử dụng bootstrap không?
Làm thế nào để Bootstrap 5 tích hợp với Laravel?

1). Tải xuống các tệp nguồn của Bootstrap từ trang web Bootstrap: https://getbootstrap.com/docs/5.1/getting-started/doad/

Xem ảnh chụp màn hình này để tải xuống

2). Đổi tên thư mục Bootstrap đã tải xuống và thêm nó vào thư mục công khai

3). Tải các tệp bootstrap trong tệp/chế độ xem của bạn

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="{{asset('bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
       
    <!-- Bootstrap Bundle with Popper -->
    <script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>

    <title>Hello, world!</title>
    <button class="btn btn-primary">Bootstrap btn</button>
  </head>
  <body>
    <h2>Hello, world!</h2>
  </body>
</html>

Giải pháp 2: Cài đặt Bootstrap với Trình quản lý gói Install bootstrap with package manager

Tạo dự án Laravel

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

Chọn thư mục dự án

cd laravel-bootstrap

Cài đặt Bootstrap trong Laravel

php artisan ui bootstrap

Cài đặt các gói bootstrap

npm -v

Cuối cùng, cài đặt gói bootstrap và các phụ thuộc frontend liên quan như jQuery

npm install

Biên dịch tài sản

Đối với SCSS: Mở tài nguyên/tệp thư mục SASS.SCSS và thêm các dòng sau

@import 'variables';
@import '~bootstrap/scss/bootstrap';

Đối với CSS: Mở tệp thư mục tài nguyên/CSS app.css và thêm các dòng sau

@import 'variables';
@import '~bootstrap/css/bootstrap';

Chạy lệnh bên dưới để biên dịch tài sản

for development: npm run dev
for production: npm run production

Tự động hóa các thay đổi SASS hoặc CSS và JS

Nếu bạn lười biếng và không muốn chạy lệnh NPM Run Dev mỗi khi bạn thực hiện các thay đổi trong tệp SASS/CSS và JS, bạn nên sử dụng lệnh sau.

npm run watch

Sau khi biên dịch, xem trạng thái này trong thiết bị đầu cuối

Cuối cùng, tải các tệp CSS và JS trong mẫu lưỡi của bạn

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

0

Hướng dẫn này cung cấp một hướng dẫn ngắn gọn về cách nâng cấp chính xác phiên bản bootstrap trong dự án Laravel.

Dự án Laravel của bạn đi kèm với một bootstrap mặc định. Bạn có thể nhìn vào giàn giáo mặc định bằng cách chạy php Artisan Make: Auth Command trong dòng lệnh / dòng lệnh dự án của bạn.

Để kiểm tra phiên bản bootstrap hiện tại mà dự án Laravel của bạn đang sử dụng. Chuyển đến tệp

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

5 nằm trong thư mục gốc của dự án.

Tại thời điểm viết bài viết này, cài đặt Fresh Laravel đi kèm với phiên bản Bootstrap

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

6. Có thể được nhìn thấy bên trong tệp devdepending bên trong tệp

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

5.

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

1

Tuy nhiên, phiên bản ổn định mới nhất của Bootstrap hiện có là

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

8. Dưới đây là các bước để nâng cấp phiên bản.

1. NPM cài đặt phiên bản bootstrap mới nhất

Chuyển đến thiết bị đầu cuối / dòng lệnh của bạn và chuyển sang thư mục dự án và chạy lệnh NPM sau

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

2

Lưu ý: Để chạy lệnh NPM, hãy đảm bảo bạn đã cài đặt NodeJS trong hệ thống của mình. Kiểm tra xem bạn đã cài đặt NPM trong hệ thống của mình bằng cách chạy lệnh

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

9.: To run the npm command make sure you have nodejs installed in your system. Check if you have npm installed in your system by running

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

9 command.

Chạy lệnh này sẽ kéo phiên bản Bootstrap mới nhất và sẽ thêm nó vào

cd laravel-bootstrap

0 trong tệp

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

5 của bạn.

2. Biên dịch phiên bản mới nhất của Bootstrap Sass thành CSS

Chúng tôi có phiên bản mới nhất của Bootstrap trong dự án của mình, tuy nhiên chúng tôi cần biên dịch tệp SASS thành CSS để đảm bảo ứng dụng đang sử dụng phiên bản mới nhất. Nếu điều này không rõ ràng thì đây là những gì xảy ra đằng sau là cảnh

Tệp Bootstrap CSS được bao gồm bên trong tệp
cd laravel-bootstrap
2.
cd laravel-bootstrap
3 là đầu ra được biên dịch của tệp
cd laravel-bootstrap
4 được đặt bên trong
cd laravel-bootstrap
5

Được rồi, văn bản tiếp theo của chúng tôi là đảm bảo tệp App.css chứa phiên bản mới nhất của Bootstrap.

Chuyển đến thiết bị đầu cuối / dòng lệnh của chúng tôi và chạy lệnh sau.

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

3

Lệnh này sẽ chạy tất cả các tác vụ Laravel Mix, một trong số đó là biên dịch SASS của bạn thành CSS.

Nếu bạn đang tìm cách thu nhỏ CSS đã biên dịch thì hãy chạy

cd laravel-bootstrap

6 thay vì

cd laravel-bootstrap

7.

Hãy chắc chắn rằng bạn chạy

cd laravel-bootstrap

8 một lần trên dự án trước khi chạy lệnh này.

Đó là nó. Truy cập tệp

cd laravel-bootstrap

3 của bạn để đảm bảo bạn có phiên bản Bootstrap mới nhất được biên dịch. Để bao gồm bootstrap trong bố cục của bạn, bạn có thể sử dụng lệnh sau.

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

4

Làm thế nào để tôi biết phiên bản bootstrap của tôi ở Laravel?

Để kiểm tra phiên bản của Bootstrap Open /CSS /Bootstrap. Tệp CSS và trên đầu tệp này, có một số phiên bản. Bạn cũng có thể xem lại lịch sử phiên bản bằng cách kiểm tra bản phát hành nhật ký.open /css/bootstrap. css file and on the top of this file, there is a version number. You can also review version history by checking Releases log.

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

Sau khi cài đặt gói Composer Laravel/UI và tạo giàn giáo phía trước, tệp Laravel's Gói.json sẽ bao gồm gói Bootstrap để giúp bạn bắt đầu tạo mẫu cho ứng dụng của bạn bằng cách sử dụng Bootstrap.Laravel's package. json file will include the bootstrap package to help you get started prototyping your application's frontend using Bootstrap.

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

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.Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói frontend này.it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.