twitter bootstrap和画布定位

Question

twitter bootstrap和画布定位

use*_*596 3 html5 twitter-bootstrap twitter-bootstrap-2

我试图在我的一个项目中使用twitter bootstrap,我真正想要的是一个带有链接和页面中间HTML画布的标题.参考:

示例Bootstrap页面

当我添加一个html canvas标签并给它一个宽度和高度时,我得到两个不良效果:

画布的上边框是截止的,必须在画布上应用边距
画布被推到右边,我必须再次使用边距.

我希望画布留在页面的中心.

Answer 1

Mat*_*teo 5

为了使您的画布元素保持在屏幕的中心,您必须使用包含div来包装它,如下所示.

<div>
    <canvas></canvas>
</div>

Run Code Online (Sandbox Code Playgroud)

然后,我们需要创建并应用一个类,它将为包含div提供与画布内部相同的像素宽度.

<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>

Run Code Online (Sandbox Code Playgroud)

这将使您的画布居中,并在调整浏览器窗口大小时将画布保留在中心.对于覆盖新创建的canvas元素的导航栏,您需要向主内容容器添加更多样式.

<style>
    .container-main {
        margin-top: 75px;
    }
</style>

<div class="container container-main">
    <div class="container-canvas">
        <canvas width="800" height="480"></canvas>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

对于扩展/完整样本,请参阅以下内容:

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，7 月前
查看次数：	18611 次
最近记录：	11 年，3 月前