为 Laravel 启用 Bootstrap 4

尽管 Laravel 已经推出到 5.5 版本,但其默认的 Bootstrap 组件仍然是 3 的版本,而 Bootstrap 4 已经 Beta 很长一段时间,或许因为不是正式版 Laravel 并没有集成新版本,但我们完全可以手动把版本更换成 4.0。

以下内容对应 Laravel 5.5 版本

首先需要卸载默认的 Bootstrap 组件,在工程根目录下执行
npm uninstall --save-dev bootstrap-sass
然后安装新的 Bootstrap
npm install --save-dev [email?protected]^4.0.0-beta.3 popper.js
截止目前 Bootstrap 最新版本是v4.0.0-beta.3,最新版本留意官网,注意新版本的需要popper.js执行一些如下拉菜单弹出的操作,务必安装此模块。

打开resources/assets/js/bootstrap.js,把

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

替换成

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;

    require('bootstrap');
} catch (e) {}

此步骤将旧的 Bootstrap 引用变更为新版本的路径。

打开resources/assets/sass/app.scss,将
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
更改为
@import "~bootstrap/scss/bootstrap.scss";

打开resources/assets/sass/_variables.scss,将
$font-size-base: 14px;
一行注释或删除

这样 Bootstrap 4 For Laravel 就配置完毕了

原文:大专栏  为 Laravel 启用 Bootstrap 4

原文地址:https://www.cnblogs.com/petewell/p/11615001.html

时间: 2024-10-17 21:21:52

为 Laravel 启用 Bootstrap 4的相关文章

laravel 入门

Laravel5.0学习--01 入门 本文以laravel5.0.22为例. 生产环境建议使用laravel5.1版本,因为该版本是长期支持版本.5.1文档更详细:http://laravel-china.org/docs/5.1. 环境需求 Laravel5.0 框架有一些系统上的需求: PHP 版本 >= 5.4 Mcrypt PHP 扩展 OpenSSL PHP 扩展 Mbstring PHP 扩展 Tokenizer PHP 扩展 在 PHP 5.5 之后, 有些操作系统需要手动安装

Laravel分页

Laravel使用的过程中,有些功能把前端页面的表达"写死了",比如分页的翻页按钮! 当然你会说Laravel的Bootstrap样式也很好看啊,但是实际项目中,翻页按钮常常需要满足的客户的需要,特别在开发一款支持手机适配的Web APP,更是需要使用自定义的样式. 所以,学习一样东西不能一知半解,而是究其原理. 先来看看Laravel是怎么分页的,生成分页按钮的代码究竟写在了哪里? Laravel目录\vendor\laravel\framework\src\Illuminate\P

laravel常见异常解决

requested URL not found http://stackoverflow.com/questions/21458080/the-requested-url-projectname-users-was-not-found-on-this-server-laravel DocumentRoot "/var/www/html/laravel/public/" <Directory "/var/www/html/laravel/public">

Bootstrap Table的使用

前言:BootstrapTable基于Bootstrap,Bootstrap基于jquery,所以需要引入jquery后再引入bootstrap. <link href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="${ctx}/assets/plugins/bo

bootstrap table简洁扁平的表格

使用方法 1.在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css. <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> 2.在head标签或者在body标签闭合前(比较推荐)引入jQuery

Laravel 完整开源项目大全

http://laravelacademy.org/laravel-project 原型项目 Laravel 5 Boilerplate -- 基于当前Laravel最新版本(Laravel 5.1.*)并集成Boilerplate的项目 Laravel 5 Angular Material Starter -- 这是一个Laravel 5.1和AngularJS的原型项目 Someline Starter -- 基于Laravel 5和Vue.js,用于快速构架RESTful API和Web应

bootstrap table使用小记

bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开发一个开台发布系统,就开发过程中,使用bootstap table遇到的一些问题及收获记录如下: 开始使用: 需要在你自己的页面中引入以下样式及脚本: <link rel="stylesheet" href="bootstrap.min.css"><l

用Laravel+Grunt+Bower管理你的应用

来源:http://yansu.org/2014/03/10/grunt-bower-and-laravel.html 为什么这么选择? 如今开源盛行,从后端的各个类库,到如今前端的jQuery插件,前端框架等,越来越多优秀的组件可以被我们选择应用在现有的项目中.随着开源组件 的更新迭代,它们互相之间的依赖也越来越复杂.旧的框架对于新的变化总是显得难以适从,就算为了新的特性改变旧的框架,也会显的略显牵强.于是就会有新的 框架和工具,在这个时候凸现出来. 每个项目开始的方向是很重要的,良好的开始可

[Linux]lnmp一键安装包,访问yii/tp5/laravel的时候,报错500或者空白页面

当你将默认的访问路径改后(nginx.conf中的root 之后的路径),同时应该将/home/wwwroot/default/.user.ini 中的路径也改了! .user.ini 是隐藏文件,需要 ls -a  查看; 第一步:你先确定你的pathinfo路由开启了,配置如下: lnmp v1.1上,修改对应虚拟主机的配置文件(/usr/local/nginx/conf/vhost/域名.conf) 去掉#include pathinfo.conf前面的#,把try_files $uri