Weiheng Li Weiheng Li - 2 months ago 13
jQuery Question

Understanding the folder structure and files needed for using Bootstrap and Font-awesome

I have a nodejs app, which include one folder in the root directory, whose layer is as follow:

/public
/css
/bootstrap.min.css
/font-awesome.min.css
/luqa.css
/fonts
/fontawesome-webfont.eot
/fontawesome-webfont.svg
/fontawesome-webfont.ttf
/fontawesome-webfont.woff
/fontawesome-webfont.woff2
/fontawesome-webfont.otf
/js
/jquery-2.1.4.min.js
some other picture file


I am a really newbie in this field. At first, I think this is about bootstrap, so I went to search about bootstrap. http://getbootstrap.com/getting-started/ But after I download its code, I found only
bootstrap.min.css
is the same. Others are all different.

I knew
luqa.css
is one self made css, to store some format used in html.

Then I searched font-awesome and downloaded it,
http://fontawesome.io/
I found the files in
fonts
folder are all the same as well as
font-awesome.min.css
in the /css, but
font-awesome.css
is gone. Finally, I also tried the file in the /js folder, I download jquery file and there is only one file jquery-2.1.4.min.js to be same.

I am a really newbie in this field. I really want to know why they mix three kind of thing together, and files of these three part can be mixed together. You can delete the other part, what if you may want invoke those deleted file? What's the relationship among those three parts?

Thanks

Answer
  • bootstrap.min.css is the style information for all the bootstrap components, it makes stuff look pretty and be responsive (change size and orientation to suit the viewing screen size)
  • font-awesome.min.css is the style information for all the fontawesome icons, this tells the browser what font files to use for each icon and their default appearance
  • /fonts all of these are the actual font files (images and the like) that make up the icons font-awesome uses, without these, font-awesome.min.css is useless. font-awesome.min.css imports these itself, no need to link to them in your html, but make sure the folder structure is as you have it or it'll break.
  • jquery-2.1.4.min.js jQuery library, makes writing javascript simpler/quicker
  • bootstrap.min.js You didnt list it here, but you should also have this file in the /js folder. This is what actually adds bootstrap functionality (tooltips, popovers, carousels, tabs, and the like).

.

Final folder tree:

/public
    /css
        /bootstrap.min.css
        /font-awesome.min.css
        /luqa.css
    /fonts
        /fontawesome-webfont.eot
        /fontawesome-webfont.svg
        /fontawesome-webfont.ttf
        /fontawesome-webfont.woff
        /fontawesome-webfont.woff2
        /fontawesome-webfont.otf
    /js
        /jquery-2.1.4.min.js
        /bootstrap.min.js
    /index.html

Given the above folder structure, to use everything in index.html, you would have something like:

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'> 
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/luqa.css">
    <link rel="icon" type="image/png" href="images/favicon.ico">
    <title>Some Title</title>
</head>

Some notes:

  • Bootstrap depends on jQuery, you MUST load jQuery first
  • Always load your custom CSS last so your styles will override those defined in the libraries you use.
  • Dont leave out the 3 meta tags in the head, they MUST be present and at the top of the head or bootstrap components will not appear correctly on mobile devices.
Comments