I am first to learn laravel 5.2 about one week. and I try to learn larevel from youtube and document laravel .but I wonder They teach and just copy templat bootstrap without download bootstrap file to put into folder public it works, but when I try to follow theme it not work for me ,but when I download bootstrap file and put into public folder and call it work for. My problam I want to know how bootstrap work correctly in laravel .
You just need to create the blade template and then in template put the link of bootstrap.
Example (index.blade.php) CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Here you can put your content -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Example (index.blade.php) local links:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="http://yoursite/public/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Here you can put your content-->
<script src="http://yoursite/public/assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Another way to get that done is to get bootstrap from npm if you prefer working offline, plus laravel 5 comes with gulp and a package.json file by default
1. add the following to your package to json
{
"private": true,
"dependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "^2.0.0",
"jquery": "latest",
"bootstrap": "latest"
}
}
2. npm install that would get the latest verion of bootstrap and jquery which is required, if you encounter any error if on linux do sudo npm install
3. mix the css and javascript file with laravel elixir by have below declarations in your gulpfile.js
var elixir = require('laravel-elixir');
var nodeDir = './node_modules/';
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
//mix css first and copy the needed fonts
//mix.css('app.css', 'public/css',)
mix.styles([
'bootstrap/dist/css/bootstrap.css',
'font-awesome/css/font-awesome.css'
], './public/css/app.css', nodeDir)
.copy(nodeDir + 'font-awesome/fonts', 'public/fonts')
.copy(nodeDir + 'bootstrap/fonts', 'public/fonts');
//mix javascript
mix.scripts([
'jquery/dist/jquery.js',
'bootstrap/dist/js/bootstrap.js'
], './public/js/app.js', nodeDir);
});
run gulp
$ gulp
finally a welcome.blade.php
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Fixed Top Navbar Example for Bootstrap</title>
</head>
<body cz-shortcut-listen="true">
<div id="app"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
The above reduces number of http request you make to load bootstrap bootstrap and its dependency jquery
reference : https://laravel.com/docs/5.0/elixir
Hope this helps
Laravel is a server side framework. It should handles database, caches, logs and validation.
Bootstrap is a client side UI framework. It should handles UI component like tabs, grid, forms and some typography aspects.
Every server side framework supports every client side framework, so feel free to use Laravel with Bootstrap.
In particular you should create a base layout with some common html and extend it in your different views. In this base layout you have to include Bootstrap via CDN or locally using asset() helper. This helper helps you to build url (https://laravel.com/docs/5.2/helpers).
Related
I am new to vuejs, I am developing a new laravel-vuejs project. When I run npm run dev, it gives this error Uncaught SyntaxError: expected expression, got '<'. I am running the application using http://127.0.0.1:8000/
index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ env('APP_NAME') }}</title>
<link href="/css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
I was running npm run dev and npm run watch and there was no error on compilation but when i was running the application using the http://127.0.0.1:8000/.
I was getting an error:
Uncaught SyntaxError: expected expression, got '<'
I kept googling to find the solution for it, then I came to know that I have to run:
php -S localhost:8000 -t public/
and then run the following:
http://localhost:8000/
Cheers!
I want to use Awesome font icons in a laravel/Vue project:
I installed the fonts:
npm install font-awesome --save
Add to resources/sass/app.scss the line: #import "node_modules/font-awesome/scss/font-awesome.scss";
npm run dev
The relevant part of my layout file:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
But when I use any awesome icon in my html pages, e.g.
<i class="fa fa-copy"></i>
I always get a kind of dummy icon:
I then found this page: https://www.itsolutionstuff.com/post/how-to-install-and-use-font-awesome-icons-in-laravelexample.html. An dI tried to add the line
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
to the fonts part of my layout html-file. But I still get the dummy icon.
Any idea what the problem is?
Regards,
Hubert
You're using an older Font Awesome version.
npm install #fortawesome/fontawesome-free
Add to resources/sass/app.scss the following:
// Font Awesome
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
Finally,
npm run dev
I pass a project to a workmate. its develop in Laravel.
we have a problem with the layout this is the code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
I am linking the css that is in ../public/css/
with:
<link rel="stylesheet" href="css/estilos.css">
my workmate have the same code, the only different thing in the project is the name of the project folder but for it linking don't works for her, she have to put:
<link rel="stylesheet" href="public/css/estilos.css">
we can no work with that problem because it's a repository. we have the same problem with the images on /public/images/
i proved with
{{ HTML::style('css/bootstrap.min.css') }}
but throws
Class 'HTML' not found (View: G:\xammp\htdocs\fractalpage\resources\views\layouts\inicio\home.blade.php)
even having the "laravelcollective/html" and it configuration
what are the ways and the correct good way to do the image and css linking?
You can use this:
{{ url('css/estilos.css')}}
It's a correct way to get images, CSS and js files.
When a project is created by the Vue-CLI 3, a public/index.html is created.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
</head>
<body>
<noscript>
<strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I would like to add an external CSS file into the head, but the source file is in SASS/SCSS. The reason I would like this file is to style the markup around the Vue app (<div id="app">/<div>), like the <body> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link href="[I want to reference a compiled SCSS file here]" rel="stylesheet" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I read the Vue-CLI 3 guide on CSS, https://cli.vuejs.org/guide/css.html, but I am under the impression that the advice on that page is for integrating SASS into single-file components (*.vue files), like allowing single file components to access global SASS variables. Can I get the Vue-CLI 3 build process to compile a SASS file that isn't directly related to any of the *.vue files but is still part of the Vue app for deployment purposes?
I cannot find an answer to my specific question.
However, I did find a discussion in the Vue Loader Github repo.
https://github.com/vuejs/vue-loader/issues/328#issuecomment-363165459
https://github.com/vuejs/vue-loader/issues/328#issuecomment-363189176
Basically, any global styles that do not contain SASS variables or mixins can be imported into App.vue's style block without a 'scoped' attribute.
<style lang="scss">
#import './scss/main.scss';
</style>
Any Vue component that needs access to SASS variables will require a small change to Vue.config.js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/variables.scss";`
}
}
}
}
Before I state my problem I have done the following:
I've followed everything stated in the Getting started and installed the framework in my laravel project. Also I refereed to the answer here and made a quick search on stackoverflow but couldn't find a solution.
Now the problem is that I can't include semantic.min.css and semantic.min.js in my page because it's not found. I need someone to help me with the right instructions to use semantic ui in my 5.6 laravel project.
This my HTML code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gym Management</title>
<link rel="stylesheet" type="text/css" href="{{ asset("semantic/dist/semantic.min.css") }}">
<link rel="stylesheet" href="../css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="{{ asset("semantic/dist/semantic.min.js") }}"></script>
</head>
<body>
<div class="ui container">
HELLO
</div>
webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/semantic-ui-css/semantic.min.css','public/css/semantic.min.css')
.copy('node_modules/semantic-ui-css/semantic.min.js','public/js/semantic.min.js');
A snapshot when I inspect the page.
Mostly i am getting this error because of wrong path. check your path twice carefully. Your "semantic" folder which has js and css files must be within public folder.