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.
Related
I have downloaded the latest bootstrap version 4 in my computer and it contains two folder one css and other js. The css folder contains about 12 css files whereas the js folder contains about 5 javascript files. Do we need to link all these 17 files to our html page? Is there a simple way to link css and js by folder?
In general, just use these two files:
bootstrap.min.css
bootstrap.bundle.min.js
You can serve them locally if you want, but it's simplest to just use a CDN. For example, these are the v5.1.3 jsDelivr links:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Find the most up-to-date CDN links at getbootstrap.com under the jsDelivr section.
The other files are just trimmed versions of the full bootstrap distribution. They are only needed if you don't want the full library and you only want some specific feature(s).
For example, if you only want to use bootstrap's grid system and no other bootstrap features, you can use bootstrap-grid.min.css instead of the full bootstrap.min.css.
CSS files
Layout
Content
Components
Utilities
bootstrap(.min).css
Included
Included
Included
Included
bootstrap-grid(.min).css
Only grid system
✗
✗
Only flex utilities
bootstrap-reboot(.min).css
✗
Only reboot styles
✗
✗
bootstrap-utilities(.min).css
✗
✗
✗
Included
JS files
Popper
jQuery
bootstrap.bundle(.min).js
Included
✗
bootstrap(.min).js
✗
✗
Following are the files to attach for the version of bootstrap-4.0.0,
Download Bootstrap from this
For CSS,
<link href="~/YourPath/bootstrap.min.css" rel="stylesheet" />
For JS,
<script src="~/YourPath/bootstrap.min.js" type="text/javascript"></script>
inside < head >:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
If you are using Bootstrap4 and want to use Javascript, you need to include JQuery before you include the bootstrap javascript tag:
before </ body>
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
Been working on this codepen: https://codepen.io/aladin94/pen/QWjgKNz
Would like to know how to properly add the scripts (for the Swiper built-in library on codepen), into my files on VS Code.
I've tried adding <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css"> into my Head tag,
and adding <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
at the end of my Body tag, but that causes my site to go completely blank.
The screenshots for the codepen:
Do I need to npm install the library or add the script in my package.json file?
To add swiper into your project please got to this site:
https://swiperjs.com/get-started/
Basically this is how you include it:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
Portfolio page: https://rookiefolio2.herokuapp.com/
Github repo: https://github.com/dalabi/rookiefolio
While I have checked your document I have found you are misspelled with these four files.
Do one thing,replace the directory with appropriate files of
Bootstrap.min.css
Fontawesome.min.css
Jquery.min.js
Bootstrap.min.js
or, Rewrite your code by putting these files on Header of your document
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
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.
Rails noob here.
I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme (https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.
After unzipping the files, the index.html page works (mostly), right out of the box.
The process I've gone through in the attempt to integrate it into a new rails app:
Transfer all CSS files to assets/stylesheets folder
Transfer all JS files to assets/javascripts folder
Referenced all JS and CSS files in application.js and application.css
Transfer all images to assets/images folder
Generate new pages controller/view, and moved the previously discussed html file into this view
Assigned root to above html file
The issue I'm running into is that the all of the JS and CSS don't appear to be executing. I have JS and CSS include tags in the header.
I've tried rake assets:precompile, but that wasn't successful.
Any tips on where I'm going wrong here?
Additionally, the index.html file includes a bunch of CSS setup in the head, ie:
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css">
<!-- plugin css -->
<link rel="stylesheet" type="text/css" href="js-plugin/animation-framework/animate.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/magnific-popup/magnific-popup.css" />
<link type="text/css" rel="stylesheet" href="js-plugin/isotope/css/style.css">
<link rel="stylesheet" type="text/css" href="js-plugin/flexslider/flexslider.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/pageSlide/jquery.pageslide.css" />
<!-- Owl carousel-->
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.theme.css">
and a bunch of javascrip tags at the bottom of the body, ie:
<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js-plugin/flexslider/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.localscroll-1.2.7-min.js"></script>
Am I correct in understanding that with the asset pipeline, these callouts aren't required in the view? Shouldn't all the CSS and JS be precompiled in application.css and application.js?
The issue was that I had brought over all CSS and JSS files that were included with the template, but the folder also contained CSS and JS that was not required, and some of these files caused conflicts when being loaded in the asset pipeline. Once I pruned out all files that weren't required, all worked as expected.
As a summary:
Move all required CSS files to assets/stylesheets
Move all required JS files to assets/javascripts
Explicitly include/require each of the CSS/JS files in their respective application.css and application.js files.