I'm building a website and trying to use Bootstrap, however I'm unable to successfully call bootstrap.min.css and bootstrap.min.js.
I have Bootstrap unzipped in a new folder titled "Bootstrap" in my htdocs folder. In my Bootstrap folder I created a new folder to house my code for my website since this, in terms of organization, would be a lot easier. I also specified in my .html file to look for "bootstrap.min.css" and "bootstrap.min.js" in the following filepath in htdocs:
Folder Structure:
Bootsrtap folder with css, fonts, js, myWebsite subfolders, and test.html.
myWebsite folder with test.html
HTML (this is the test.html file in my "myWebsite" folder):
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
I tried running the example code off of Bootstrap's website and am getting a 404 Error for both of those files.
Since creating a new folder and then specifying the href wasn't working, I tried putting the sample code from Bootstrap's website directly into my "Bootstrap" folder and when I do this it works perfectly.
HTML (this is the test.html from the "Bootstrap" folder):
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I think there is something with the filepath I specified but I've been unable to get it to work after working on it for the first half of the day. What I'd really to know is how do I correctly call the "bootstrap.min.css" and "bootstrap.min.js" files while still maintaining my current folder structure? Any help/advice will be greatly appreciated.
Thanks
The paths for files are relative to your html file. For your test.html located in the Bootstrap directory you can access them by pointing at css/bootstrap.min.js and js/bootstrap.min.js. For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.js and ../js/bootstrap.min.js. The "../" will traverse up one directory into the parent of the current directory.
All your 'src' locations need a leading slash to indicate that the path is relative from the root folder (and not the current directory).
So your bootstrap location is like this:
src="Bootstrap/js/bootstrap.min.js"
Without a leading / character, the browser will append the src location to the current href location. For example, if the requesting page was at:
http://example.com/mydir/test.html
Then the browser would look for the bootstrap url at:
http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!
In most cases, you want to reference files from the root directory so that they don't change when you navigate to a page in a different directory. Your src location would look like this:
src="/Bootstrap/js/bootstrap.min.js"
When you have a leading forward slash, the browser ignores the current directory and assumes that the url is referenced from the root folder of your website (ie http://example.com/).
This would give an effective url for the browser to look up as follows:
http://example.com/Bootstrap/js/bootstrap.min.js
Which would be the correct one.
In summary, simply add '/' to all your paths and they will then be referenced from the root of your website and remain consistent whatever page/directory you happen to be on.
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Just copy the original js and assets folder from the source code downloaded directory, and place them inside your directory where the index.html file resides. restart the webserver if necessary to reflect the changes. This worked for me :)
I had the same problem when using these lines
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I have changed them to:
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
I got rid of that error now. I hope this is helping.
Related
I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?
I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
I begin to use Bootstrap. And I add js/bootstrap.min.css
to my index.html and all works.
But, when I add bootstrap.min.js to index.html ,my, for example, dropdown menu doesn't work.
But, when I add http://code.jquery.com/jquery-latest.js - my dropdown menu works.
I want to work with menu without connecting to Internet.
Why?
you should download the script at your local system and put the script at in your project JS OR Script folder and call it from there.
like that:
<script type="text/javascript" src="/Scripts/jquery-latest.js"></script>
hopefully it works :)
Thanks
Bootstrap:
http://getbootstrap.com/getting-started/
JQuery:
http://www.w3schools.com/jquery/jquery_get_started.asp
Download and link the files correctly via relative paths.
Bootstrap uses jquery, since your need to use it without internet download the jquery file and put it inside JS folder and serve it to index.html
Here we go:
1) You are using jQuery library but not bootstrap
2) if you want to download bootstrap library to local, you will get from here : enter link description here
Instead of using cdn path in your index.html like this
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
try using relative path after downloading the required files as below:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="js/jquery.js"></script>
In your case jquery-latest.js must be downloaded from given link and included in index.html using relative path.
I'm using grunt-usemin in grunt for minify, concat all the js files and put them into minified file on my index.html header:
<!-- build:js js/indexBulk.js -->
<script src="js/common/mifirstfile.js"></script>
<script src="js/common/errors.js"></script>
<script src="js/common/anotherfile.js"></script>
<script src="lib/angular/angular.js"></script>
<!-- endbuild -->
This works perfect...but what if I have some others html static files with exactly the same js files on the header, how do I have to proceed in order to prevent the fact of copy each time this block?
Is there a way to put the minified file on the header of each one of my others html files without copying this block?
I'm having a hard time getting my project to detect my less.js folder.
I'm using laravel 5.1, and I'm not sure where to put my less.js folder - since for Bootstrap and jQuery I just imported the src from a URL.
I currently have my less.js folder I downloaded under:
resources > assets > less > less.js folder I downloaded
I currently have my styles.less in my views while I try to figure this out.
My app.php head:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
I'd appreciate if anyone could quickly let me know where to drop the folder!
Thanks!
edit:
Screenshots:
http://imgur.com/a/SDmE3/all
edit2:
http://imgur.com/a/8vQTm/all
The error in question:
Status 500 Type Script,
http://localhost:8000/reviewcourse/%3C!DOCTYPE%20html%3E%3Chtml%3E%20%20%20%20%3Chead%3E%20%20%20%20%20%20%20%20%3Cmeta%20charset=
Only assets published at public/ folder are available. So, you need to drop files there:
public/assets/less/download_folder/less.js
Then load it with:
<script src="{!! url('assets/less/download_folder/less.js') !!}" type="text/javascript"></script>
Another way/solution is to publish assets from /resources to public/ via Elixir:
elixir(function(mix) {
// location, origin
mix.copy('assets/less/download_folder/less.js', 'resources/assets/less/folder/less.js');
});
EDIT
I will assume that less.js is inside of public/assets/less/lessjs/dist/less.js. Then, load it as:
<script src="{!! url('assets/less/lessjs/dist/less.js') !!}" type="text/javascript"></script>
use this script at your html head
<script src="{!! asset('less/less.js') !!}" type="text/javascript"></script>