I'm writing my first web server, so don't hate.
I am using Golang and HTML with BootStrap.
This program will eventually run on a Raspberry Pi in a small device. So I assume it would be best to use a downloaded version of BootStrap rather than the CDN version right?
But when I do this, my buttons on my page lose their formatting.
Here is my HTML code using the CDN version:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- Camera Positioning -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
<h4>{{.Head}}<h4>
</body>
</html>
Here is the new HTML which is not working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href = "css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- Camera Positioning -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
I have only changed 2 lines, so that I use (or try to) the local BootStrap CSS and JS.
And I call it from Go like this:
http.HandleFunc("/", managementinterface.IndexHandler)
log.Fatal(http.ListenAndServe(":8080", nil))
And IndexHandler is like this:
func IndexHandler(w http.ResponseWriter, r *http.Request) {
t, _ := template.ParseFiles("../html/index.html")
t.Execute(w, "")
}
One final note: The CDN version is 3.3.7, the version I downloaded is 4.1.1
And also if I look at the local BootStrap CSS file, I can see this:
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
Which is the styling I want. Any help appreciated, thanks.
it turns out someone else on this open source project answered this.
What they did was pack all the static css and html pages into the Go executable. They did this with a package called packr: https://github.com/gobuffalo/packr
It's a tool that does that for you.
So then you have only 1 file to deploy, which is really nice.
Are you actually serving the JS and CSS code from the Go code? If not, your browser is asking the Go HTTP server for the resources, but it has no idea what you're talking about (if you look at the developer console in your browser it will show you a 404 response on the requests for those files.
You may need to do something like (assuming you've got your CSS and JS in a directory called assets)
cssFs := http.FileServer(http.Dir("/home/user/www/assets/css"))
http.Handle("/css", fs)
jsFs := http.FileServer(http.Dir("/home/user/www/assets/js"))
http.Handle("/js", fs)
More info at http.FileServer
Related
This question already has an answer here:
html links not working (using base href)
(1 answer)
Closed 2 years ago.
I'm trying to link to a CSS file in my HTML index file. It's just one line of code and apparently whatever I try it doesn't work. I'm using VSCode.
If I type the link from beginning it also auto-completes (or it shows it anyway). So it knows it's there.
I've also tried moving the CSS file out of the folder and next to the HTML file. But that doesn't work either.
I tried the style brackets in the HTML file itsself and the coloring there works.
So my way of testing is that nothing is showing up blue.
I also removed my Javascript from the HTML file into a seperate file linking to it for readability for this question, and that does work
Does anybody else have any idea's?
I also saw the other topics for this same question but it shows nothing new to try out.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<link rel=”stylesheet” type="text/css" href="styles/style.css">
</head>
<body>
<a id="stringCalculation"></a><br>
<a id="stringResult"></a>
<br>
<div id="container-numbers">
<button id="one" class="number">1</button>
<button id="two" class="number">2</button>
<button id="three" class="number">3</button>
<button id="four" class="number">4</button>
<button id="five" class="number">5</button>
<button id="six" class="number">6</button>
<button id="seven" class="number">7</button>
<button id="eight" class="number">8</button>
<button id="nine" class="number">9</button>
<button id="zero" class="number">0</button>
</div>
<div id="operators">
<button id="symbolPlus" class="operator">+</button>
<button id="symbolMinus" class="operator">-</button>
<button id="symbolTimes" class="operator">*</button>
<button id="symbolDivid" class="operator">/</button>
<button id="equals">=</button>
</div>
<div id="other">
<button id="clearButton">Clear</button><br>
<button id="backspace">Backsp</button>
<button id="decimal">.</button>
</div>
<script src="javascript/myscript.js"></script>
</body>
</html>
And the CSS file:
#one {
background-color: blue;
}
.number {
background-color: blue;
}
Here my folder:
And inside:
Change this
<link rel=”stylesheet” type="text/css" href="styles/style.css">
With
<link rel="stylesheet" type="text/css" href="styles/style.css">
Please user opening and closing double inverted commas.
Please try this line of code:
<link rel="stylesheet" href="styles/style.css">
I'm trying to use bootstrap to style my project, but I keep getting a CORS Policy Error.My site just displays the stock HTML with no style. Clicking the "Add to table" button does not open the modal. Also not sure why the style loads.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#myModal">Add to Table</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</body>
</html>
Here is the error.
Access to CSS stylesheet at 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' from origin 'http://localhost:63341' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
index.html:7GET https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css net::ERR_FAILED
Any ideas on how to fix this?
Thanks
You can solve it by going in your Settings -> Build. Execution, Deployment -> Debugger and set Allow using requests on true
I'm also new, I cant comment yet so I am replying instead. I'm not sure it's a solution, but maybe you can use a different CDN URL? Try it and let me know pls =) Maybe even downloading bootstrap (and jquery) and linking to THAT could solve it.
Edit 1, issue found. modals need bootstrap's javascript plugin to work. add the following code below your jquery script.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Edit 2: Fwlt like i should explain a bit more, you have used the CDN correctly, and thats why the bootstrap styles work, but the modal you wanted to use required the use of bootstrap;s JAVASCRIPT plugin which i instructed you to add. Ofcourse it order to use the bootstrap JS plugin you need to also link to Jquery, THEN you can link to the bootstrap js. if you plan on also linking to popper.js, which id advise you to do for more power over positioning, still using bootstrap classes, you have to add it between jquery and bootstrap's plugin. and i'd also like to let you know, if you plan on adding a css file to add your own styles, add it after the bootstrap cdn in the head of your document.
The following HTML works in Firefox and Google Chrome. But, it does not work with Internet Explorer 8. The panels would not expand (see code below).
Is there anyway I can make it work with IE8?
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src=" http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.custom {
width: 130px !important;
}
div.panel {
display: inline-block;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-primary custom" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Section 1</button>
<div id="collapsible-1" class="collapse">
Content
</div>
</div>
<br/>
<div class="panel">
<button type="button" class="btn btn-primary custom" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Section 2</button>
<div id="collapsible-2" class="collapse">
Content
</div>
</div>
<br/>
</div>
</body>
</html>
Indeed, the way you are doing it is not working on IE. I tested the code directly from jqueryui that you can find here and it's working for me.
You can also try to change the compatibility with <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> and try different versions but I don't think that's the best way of doing it.
I am using bootstrap to toggle the div element. I am using the following code, its working for its default behavior i.e. to hide the toggled content in the beginning.
I want to show the toggled content at the beginning and so using "collapse in" bootstrap class as suggested on their site. But still its giving its default behavior to hide the content at the beginning.
Code snippet
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
Note: All the necessary files for working of bootstrap have been added i.e. bootstrap and jquery file.
Can anyone help me with this ?
Your Code Working Fine .some How bootstrap.min.js , & css Missing .
Check Live Demo Here
Snippet Example
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
Please verify the following things.
You have included bootstrap js and css and jQuery
As well as the jQuery version is latest.
I have attached a sample snippet. This seems to be working perfect for me.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
</div>
</body>
</html>
Thanks for your concern and comments, those were helpful. Issue got resolved, in our project solution we were having some bootstrap overridden classes, so "collapse in" class was conflicting with one of those overridden classes.
cheers..
Hey guys I already know that this is easy but I have tried everything I can think of and cant figure it out. I cannot get my style sheet to work on my html both are saved in the folder website1. inside that there are 2 folders css and index with the files saved in the respective folder. not mind either of my coding these are not my website just a very small example I am sending to find help.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
`<div class="row">
<div class="col-xs-6">
<button class="btn btn-default btn-xl">About</button>
<button class="btn btn-default btn-xl">Portfolio</button>
<button class="btn btn-default btn-xl">Contact</button></button>
</a>
</div>
</div>
</div>
</body>
</html>
My css page looks like this
body{
color: blue;
}
button{
color: aliceblue;
}
If your html file is in the index subfolder, and css is in the css subfolder, then you should reference it like:
<link rel="stylesheet" type="text/css" href="../css/style.css">
Hope this helps :)