When i'am runing the application in visual studio 2010 i have no problem whith boostrap CSS and javascript, otherwise, when i publish it, all the javascript and css is not recognized. I create a simple html page to test
if it is a html formatt problem, but the problem still happen. Does anyone can help me?
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="Styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="Styles/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="starter-template">
<h1>
Bootstrap starter template</h1>
<p class="lead">
Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="row">
<button type="submit" class="btn btn-default">
Ok</button>
</div>
</div>
</body>
</html>
Usually this is due to windows features in IIS not being turned on to support static content such as CSS and JS.
The steps to enable this are:
Go to “Turn Windows features on or off”
Select Internet Information Services
Select World Wide Web Services
And check Static Content
You could try making the path to your css/javascript relative using the ~.
<link href="~/Styles/bootstrap.min.css" rel="stylesheet">
or by using ResolveURL
<link href='<%= ResolveUrl("~/Styles/bootstrap.min.css") %>' rel="stylesheet">
The problema was the mime Type of files .css in the site of ISS. It was set to "text/csss", but the correct is "text/css".
Related
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!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.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
I currently have this as my base template, but depending on the route (using this as router)
, it has to switch out the css for another one, I tried but couldn't find a way to do this.
<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="app.css" />
<Title>Title</Title>
</head>
<body>
<div id="render-target"></div>
</body>
You cannot control the css file in meteor, because when the server starts, all the css files will be merged into one file. In order to define a css for a particular module, it would be better to use less or sass to define the namespace
I created a new ASP.NET MVC Webapp. I added foundation for MVC using Nuget package manager and removed the bootstrap package. At this point, everything is perfect.
I then added Kendo UI to the MVC Webapp just as I normally do. This is what my Index.cshtml page looks like for a simple test:
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
<h3>Content goes here</h3>
<br/>
#(Html.Kendo().DatePicker().Name("datepicker"))
</div>
</div>
It seems like Foundation is somehow affecting the Kendo styles because the datepicker does not look how it should look. Does anyone have any ideas to why this could be happening? I purposely added anything related to KendoUI after Foundation to avoid this problem.
Here is my head tag in _Layout.cshtml
<head>
<meta charset="utf-8" />
#*Set the viewport width to device width for mobile *#
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - Welcome to Foundation</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Styles.Render("~/Content/foundation/css")
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo")
#RenderSection("head", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
Here is right before the closing body tag in _Layout.cshtml
#Scripts.Render("~/bundles/foundation")
<script>
$(document).foundation();
</script>
#*Use the Scripts section to define page specific scripts*#
#RenderSection("scripts", required: false)
Following is code i used this is from template when i run this file i see error
bootstrap.css.map:1 GET http://localhost:8000/css/bootstrap.css.map 404 (Not Found)
but there is no link i made and error shows link is on first line can someone help me where the link is
how do i remove that link can someone help me with this
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Animus A Blogging Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
</head>
<body>
<div class="contact-top">
<div class="container">
<h2>Log in</h2>
<div class="contact">
<p></p>
<div class="contact-down">
<div class="contact-right">
<div class="col-md-6 contact-info">
<form>
<input type="text" name="your name" placeholder="USER NAME" class="input">
<input type="password" name="your email" placeholder="PASSWORD" class="input">
<div class="clearfix"> </div>
<input type="submit"value="SEND" />
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's coming from your bootstrap.css file. You can remove the reference by editing that file and removing the following line from your code:
/*# sourceMappingURL=bootstrap.css.map */
Source Mapping files should only be used by the Developer Tools.
With Bootstrap you can disable the source map if you like or just ignore the 404 for any .css.map when using the Dev Tools.
If you want to use the Dev Tools for Debugging or want to have more 'completeness' to your code add the .css.map file available from Bootstrap along side the .css file.
Reference: https://developer.chrome.com/devtools/docs/css-preprocessors
Other similar questions: what are the .map files used for in Bootstrap 3.1?
Either you can remove
`/*# sourceMappingURL=bootstrap.css.map */
as mentioned by #xengravity or you can download bootstrap.css.map file of your bootstrap version and add it in your directory.
I am using semantic ui, and the html works fine on my pc. When I upload it and run my site from the internet, it looks like the normal html is working, but sematic specific functionality is missing. Is it not getting the semantic .css or something? I'm a bit new to this, so if you could help me debug I would be be grateful.
I am using Semantic version 1.8.1.
My html is located relative to all the source files in the same way as the examples which come with the release in the /examples directory. So I access the file relatively such as "../dist/semantic.css"
Here is the head section of the default.htm main html page.
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Spin Boogie</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<!-- Used with Tab History !-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>