无法加载 CSS 样式表答案

【问题标题】：Can't load CSS style sheet无法加载 CSS 样式表
【发布时间】：2016-08-23 06:26:15
【问题描述】：

我是 HTML 的新手，我正在尝试在我的项目中使用 bootstrap。

问题是我无法加载 bootstrap.min.css 并且所有类都不起作用。我做了一些搜索并尝试了一些方法，但它们对我不起作用

这是我的代码：

<!DOCTYPE html>
%{--<!doctype html>--}%
<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">
  %{--<link href="bootstrap.min.css" rel="stylesheet" media="screen">--}%
		
   <link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
	<title>TekDays - The Community is the Conference!</title>

 </head>
  <body>
   <div class="container">
	<table class="table table-bordered">
	 <thead>
	  <tr>
	   <th>FirstName</th>
	   <th>FirstName</th>
	  </tr>
	 </thead>
     <tr>
	  <td>Mammad</td>
	  <td>mammadii</td>
	 </tr>
	 <tr>
	  <td>Akbar</td>
   	   <td>Akbarii</td>
	 </tr>
	</table>
  </div>
 </body>
</html>

使用绝对路径会导致错误（使用 f12）：不允许加载本地资源：file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min。 css

我在某处读到这只是 chrome 的错误，Edge 或 IE 浏览器没有这个问题，但结果是一样的，没有应用 css 类。

我将 bootstrap.min.css 放在与我的 html 页面相同的目录下，并使用 <link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> 而不是代码中使用的。

但是这次我得到了错误 404: not found 这似乎是我给出的路径的问题......但我不知道该怎么做

知道有什么问题吗？

【问题讨论】：

检查您的控制台以了解它是否抛出 404 错误？
您也可以发布您的文件夹结构吗？
检查css 文件的扩展名。可能是bootstrap.min.css.txt，文件资源管理器中隐藏了已知的文件扩展名
@Shahil GET localhost:8080/TekDays/bootstrap.min.css 在控制台中
@MarkPerera 我检查了它。它的'bootstrap.min.css'

标签： html css twitter-bootstrap

【解决方案1】：

这里使用的斜线

<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">

会导致用户浏览器从他的文件系统访问文件。

改变路径

<link rel="stylesheet" href="E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">

更新答案： Resource not found Error and what about resources plugin

【讨论】：

错误不允许加载本地资源：file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css

【解决方案2】：

<!DOCTYPE html>
<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">
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  <title>TekDays - The Community is the Conference!</title>

 </head>
  <body>
   <div class="container">
    <table class="table table-bordered">
     <thead>
      <tr>
       <th>FirstName</th>
       <th>FirstName</th>
      </tr>
     </thead>
     <tr>
      <td>Mammad</td>
      <td>mammadii</td>
     </tr>
     <tr>
      <td>Akbar</td>
       <td>Akbarii</td>
     </tr>
    </table>
  </div>
 </body>

【讨论】：

它可以工作，但我很想从本地来源加载它但是感谢您的帮助
在您的浏览器中打开给定的链接并将其从浏览器保存到您的 index.html 文件所在的文件夹中，并将其命名为：

【解决方案3】：

它的工作检查你的 css 路径

<!DOCTYPE html>

<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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
		
 
	<title>TekDays - The Community is the Conference!</title>

 </head>
  <body>
   <div class="container">
	<table class="table table-bordered">
	 <thead>
	  <tr>
	   <th>FirstName</th>
	   <th>FirstName</th>
	  </tr>
	 </thead>
     <tr>
	  <td>Mammad</td>
	  <td>mammadii</td>
	 </tr>
	 <tr>
	  <td>Akbar</td>
   	   <td>Akbarii</td>
	 </tr>
	</table>
  </div>
 </body>

【讨论】：

我认为 OP 在问为什么他的代码不起作用
它工作了，谢谢但是你知道我的路径有什么问题吗？
尝试在路径中添加一个额外的斜杠，此“\”可能有问题，如 E://TekDays//web-app//bootstrap-3.3.7-dist//css//bootstrap。 min.css
再次出现同样的错误：不允许加载本地资源：file:///E://TekDays//web-app//bootstrap-3.3.7-dist//css//bootstrap .min.css

【解决方案4】：

href 替换为 src

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">

<link *src*="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">

【讨论】：

没有。 <link> 元素没有 src 属性。