Hallo Leute,
ich bin gerade dabei so grob eine Weboberfläche mit Bootstrap aufzubauen das auf ein Windows Tablett auch laufen soll.
Ich bin noch ein Anfänger und habe erst seit 2-3 Wochen mir die ganzen Sachen bzgl. HTML usw. angeschaut.
Nun habe ich ein HTML Seite als Beispiel aufgebaut um zu schauen wie es auf dem Tablett dargestellt wird. Leider sieht das nicht so aus wie es sollte.
Kann mir evtl. jemand einen Tipp geben vorauf man hierbei achten muss?
Vielen Dank!
HTML
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<html lang="de">
<head>
<style>
#header {
background-color:black;
color:#fa9706;
padding:10px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:orange ;
color:black;
clear:both;
text-align:center;
padding:5px;
}
#main {
width:0px auto;
margin:0px auto;
}
.btn{
margin-left:5px;
}
body {
background-color:#404040;
}
p1 {
color: white;
}
h1 {
color: white;
}
</style>
</head>
<body>
<nav class="w3-sidenav w3-white" style="display:none" id="mySidenav">
<a href="javascript:void(0)"
onclick="w3_close()"
class="w3-closenav w3-large">Close ×</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
<header class="w3-container w3-black">
<span class="w3-opennav w3-large" onclick="w3_open()">☰</span>
</header>
<script>
function w3_open() {
document.getElementById("mySidenav").style.width = "100%";
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
<div id="main">
<div id="header">
<table style="width: 80%;">
<tr>
<td>
<div class="btn-toolbar">
<button type="button" class="btn btn-warning btn-sm" VALUE="Zurück" onClick="history.go(-1); return true;">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm" VALUE="Zurück" onClick="history.go(-1); return true;">
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</td>
<td class="alignRight"><b>Logo</b></td>
</tr>
<div class="btn-group pull-right">
<button type="button" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
</button>
</div>
</table>
</div>
<div class="container">
<h1 style="text-align: center">Überschrift (z.B.)</h1>
<p1> </p1>
<a href="http://localhost:65036/Boot_Test_AP.html" class="btn btn-warning btn-block">Button 1</a>
<a href="#" class="btn btn-warning btn-block">Button 2</a>
<a href="#" class="btn btn-warning btn-block">Button 3</a>
<a href="#" class="btn btn-warning btn-block">Button 4</a>
</div>
<!--- <footer class="container-fluid text-center">
<p><p>
</footer>
<div id="footer">Copyright © </div>
--->
</div>
</body>
</html>