了解使用Bootstrap和Font-awesome所需的文件夹结构和文件

我有一个nodejs应用程序，其中包括根目录下的一个文件夹，其层如下:

/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

在这个领域我真是个新手。一开始，我认为这是关于bootstrap的，所以我去搜索了一下bootstrap。http://getbootstrap.com/getting-started/但是在我下载了它的代码之后，我发现只有bootstrap.min.css是相同的。其他的都是不同的。

我知道luqa.css是一个自己制作的css，用于存储html中使用的一些格式。

然后我搜索了font-awesome并下载了它，http://fontawesome.io/我发现fonts文件夹中的文件都是一样的，以及/css中的font-awesome.min.css，但font-awesome.css不见了。最后，我也尝试了/js文件夹中的文件，我下载了jquery文件，只有一个文件jquery-2.1.4.min.js是相同的。

在这个领域我真是个新手。我很想知道他们为什么把这三种东西混在一起，这三部分的文件可以混在一起。您可以删除其他部分，如果您想要调用那些删除的文件怎么办?这三个部分之间的关系是什么?

谢谢

bootstrap.min.css是所有bootstrap组件的样式信息，它使内容看起来漂亮并且响应(更改大小和方向以适应观看屏幕的大小)
font-awesome.min.css是所有fontaawesome图标的样式信息，它告诉浏览器每个图标使用什么字体文件以及它们的默认外观
/fonts所有这些都是实际的字体文件(图像之类的)，它们构成了图标font-awesome的用途，没有这些，font-awesome.min.css是没有用的。css会自己导入这些文件，不需要在你的html中链接到它们，但要确保文件夹结构和你的一样，否则它会崩溃。
jQuery -2.1.4.min.js jQuery库，使编写javascript更简单/更快
bootstrap.min.js你没有在这里列出它，但是你也应该在/js文件夹中有这个文件。这实际上是添加引导功能(工具提示，弹出窗口，旋转显示，选项卡等)。

最终目录树:

/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

给定上述文件夹结构，要使用index.html中的所有内容，您将拥有如下内容:

<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>

一些笔记:

Bootstrap依赖于jQuery，你必须先加载jQuery
总是最后加载你的自定义CSS，这样你的样式将覆盖那些在你使用的库中定义的。
不要在头部留下3个meta标签，它们必须出现在头部的顶部，否则引导组件将无法在移动设备上正确显示。

一些笔记:

相关内容

最新更新

热门标签：