Twtitter Bootstrap安装问题 [英] Twtitter Bootstrap installation issues
问题描述
首先，我想说，我已经搜索高和低，阅读多个教程和这个网站上几个帖子关于这一点，它没有帮助，所以我决定自己的帖子。 / p>
我试图使用Twitter Bootstrap自我教授Web开发/服务器管理，因为我已经在HTML和CSS中有一些背景。我已经安装了我的LAMP堆栈和所有我的依赖关系正确地，据我所知。
我的文件结构如下所示：
- / var / www / / li>
- / var / www / icyou /
-
/ var / www / icyou / bootstrap
$ b b- 在检查引导时创建的所有文件 -
-
/ var / www / icyou / site_root /
index.html
index.html.save
testphp。 php
我的index.html内部是Twitter Bootstrap的默认模板，如下所示：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> Bootstrap 101 Template< / title>
<！ - Bootstrap - >
< link href =css / bootstrap.min.css =stylesheet>
<！ - HTML5 Shim和Respond.js IE8对HTML5元素和媒体查询的支持 - >
<！ - 警告：如果您通过file：// - >查看页面，Respond.js不起作用。
<！ - [if lt IE 9]>
< script src =https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js>< / script>
< script src =https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js>< / script>
<！[endif] - >
< / head>
< body>
< h1> Hello，world！< / h1>
< a href =＃class =btn>它工作< / a>
<！ - jQuery（Bootstrap的JavaScript插件所必需的） - >
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script>
<！ - 包含所有编译的插件（如下），或根据需要包含单独的文件 - >
< script src =js / bootstrap.min.js>< / script>
< / body>
< / html>
在index.html中更改的唯一不同于模板的是< a href =＃class =btn>它工作原理< / a> 。
我在youtube上看到一个教程集，显示按钮应该有鼠标悬停效果以及在流行的bootstrap sans-sarif字体中的文本。我看起来像原始的HTML。
我希望它的东西像一个简单的依赖问题我不知道。这真的很令人沮丧，安装所有这些包。看起来除了我之外的每个人都具有依赖性范围的先天知识，所以没有人提到它。
编辑：我也尝试将路径更改为完成路径：
< link href =/ var / www / icyou / bootstrap / dist / css / bootstrap.min.css =stylesheet>
< script src =/ var / www / icyou / bootstrap / dist / js / bootstrap.min.js>< / script>您是否已经检查了文件夹/ var / 的权限 www / icyou / site_root /？
也可以打开inspect element对话框（如果你在chrome），它一定会说明你的CSS链接
First off, I'd like to say that I have searched high and low, read multiple tutorials and a couple posts on this site about this and it has not helped, so I've decided to make my own post.
I'm trying to self-teach web development / server administration using Twitter Bootstrap, as I already have some background in HTML and CSS. I've installed my LAMP stack and all my dependencies correctly as far as I'm aware.
My file structure looks like this:
- /var/www/
- /var/www/icyou/
/var/www/icyou/bootstrap
-all of the files created when checking out bootstrap, left untouched-
/var/www/icyou/site_root/
index.html
index.html.save
testphp.php
Inside of my index.html is the Twitter Bootstrap's default template, which is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<a href="#" class="btn"> It works</a>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The only thing I changed in the index.html that isn't identical to the template is the <a href="#" class="btn"> It works</a>.
I am following a tutorial set on youtube that shows that the button should have at a mouse-over effect as well as the text being in the popular bootstrap sans-sarif font. Mine looks like raw HTML.
I'm hoping it's something as simple as a dependency issue I'm unaware of. It's really very frustrating, installing all these packages. It seems that everyone aside from me has an innate knowledge of dependency scoping so nobody ever mentions it.
Edit: I have also tried changing the paths to complete paths for the time being:
<link href="/var/www/icyou/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/var/www/icyou/bootstrap/dist/js/bootstrap.min.js"></script>
Have you checked the permissions on the folder /var/www/icyou/site_root/ ? Also you might want to open up the "inspect element" dialog (if you're in chrome) it will surely say what's going on with your css links
这篇关于Twtitter Bootstrap安装问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
