Understanding the folder structure and files needed for using Bootstrap and Font-awesome
Question
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
1 answers
solution1
1 ACCPTED 2016-09-21 01:31:23
- 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.