Question

我认为这可能是非正式的，但我不知道如何提出它或在何处指导它。我是一名新的Web开发人员，我习惯于从头开始构建CSS和HTML以制作各种工具。我想进入像Bootstrap这样的框架，让事情看起来更专业，但我真的很难理解如何使用它。

我很难理解文件结构bootstrap提供的内容以及它应该存在于我的Web服务器中。基本的缩小下载包括css，fonts和js的文件夹。但是例如jumbotron的例子引用了其他文件，例如

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

但我不知道这些文件应该存在哪里。我是否需要修改这些href链接？文件结构应该是什么样的？

感谢您的帮助。

Answer 1

如果您查看最新版本的bootstrap getting started guide，您将能够理解文件夹结构。

Bootstrap已将不同类型的文件分离到不同的文件夹中。

bootstrap/
        ├── css/
        │   ├── bootstrap.css
        │   ├── bootstrap.css.map
        │   ├── bootstrap.min.css
        │   ├── bootstrap.min.css.map
        │   ├── bootstrap-theme.css
        │   ├── bootstrap-theme.css.map
        │   ├── bootstrap-theme.min.css
        │   └── bootstrap-theme.min.css.map
        ├── js/
        │   ├── bootstrap.js
        │   └── bootstrap.min.js
        └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

如果您想使用Bootstrap提供的插件，则需要JS文件。如果您不想使用任何plugins，那么您不必包含js文件。

在上面的例子中，第一个文件很明显是它的bootstrap.css文件。第二个文件是固定的，即，bootstrap的某些功能在ie10中不起作用。第三个文件是应用程序特定文件第4个用于调试目的，如评论中所述。

如果您使用bower或其他工具进行依赖关系管理，则所有第三方依赖项都应该在bower_components或vendor文件夹中。所有特定于应用程序的css都应该驻留在您的app文件夹中。

希望它有所帮助。

Bootstrap - 从基本模板到更高级的示例

1 个答案: