twitter引导程序和画布定位 [英] twitter bootstrap and canvas positioning
问题描述
我正在尝试在我的一个项目中使用twitter引导程序，而我真正想要的是页面中间带有链接的标头和HTML画布.参考:
i am trying to use twitter bootstrap in one of my projects and what i really want is a header with link and a HTML canvas in the middle of the page. Reference:
当我添加一个html canvas标签并为其设置宽度和高度时，会得到两个不良影响:
When I add a html canvas tag and give it a width and height I get two undesirable effects:
- 画布的上边界已被切除，必须将边距应用于画布
- 将画布向右推，我不得不再次对其应用保证金.
我希望画布位于页面中心.
推荐答案
为使您的canvas元素位于屏幕中央，您必须按如下所示用包含div的包装它.
In order to keep your canvas element in the center of the screen you will have to wrap it with a containing div as follows.
<div>
<canvas></canvas>
</div>
然后，我们需要创建并应用一个类，该类将为包含div的像素提供与内部画布相同的像素宽度.
We then need to create and apply a class that will give the containing div the same pixel width as the canvas inside.
<style>
.container-canvas {
/* This could be done in one single declaration. See the extended sample. */
margin-right: auto;
margin-left: auto;
width: 800px;
}
</style>
<div class="container-canvas">
<canvas width="800" height="480"></canvas>
</div>
这将使画布居中，并在调整浏览器窗口大小时将画布保持在中央.至于覆盖新创建的canvas元素的导航栏，则需要在主内容容器中添加更多样式.
This will center your canvas and keep the canvas in the center as you resize your browser window. As for the nav bar overlaying your newly created canvas element you will need to add more styling to the main content container.
<style>
.container-main {
margin-top: 75px;
}
</style>
<div class="container container-main">
<div class="container-canvas">
<canvas width="800" height="480"></canvas>
</div>
</div>
有关扩展/完整示例，请参见以下内容:
For the extended/complete sample see below:
<!doctype html>
<html>
<head>
<title>Bootstrap + Canvas</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<style>
.container-main {
margin-top: 75px;
}
.container-canvas {
margin: 0 auto;
width: 800px;
}
canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container container-main">
<div class="container-canvas">
<canvas id="mycanvas" width="800" height="480">
This is my fallback content.
</canvas>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function draw() {
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);
} else {
alert("Canvas isn't supported.");
}
}
$(function() {
draw();
});
</script>
</body>
</html>
这篇关于twitter引导程序和画布定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
