twitter bootstrap und Leinwand positionieren

ich versuche, mit twitter bootstrap in einem meiner Projekte und was ich wirklich will ist ein header mit dem link und ein HTML-Leinwand in der Mitte der Seite. Referenz:

twitter bootstrap und Leinwand positionieren

Wenn ich einen html-canvas-tag und geben Sie eine Breite und Höhe ich bekomme zwei unerwünschte Effekte:

  • den oberen Rand der Leinwand ist "cutoff" und " anwenden müssen-Marge auf
    die Leinwand
  • die Leinwand wird nach rechts geschoben und wieder habe ich
    gelten Marge.

Ich möchte die Leinwand für den Aufenthalt in der Mitte der Seite.

Könnte man überschreiben, CSS-und set margin-left: auto; und margin-right: auto;
Wir sprechen über das canvas-element rechts (d.h. <canvas></canvas>)? whatwg.org/specs/web-apps/current-work/multipage/...
ja, wir sprechen über <canvas></canvas>
ich hatte gehofft, nicht zu ändern, die original css, gibt es eine Möglichkeit, ich könnte das überschreiben der CSS?

InformationsquelleAutor user1144596 | 2013-03-25

  1. 5

    In Ordnung zu halten, das canvas-element in die Mitte des Bildschirms, müssen Sie wickeln Sie es mit einem mit div wie folgt.

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

    Dann müssen wir das erstellen und anwenden einer Klasse geben, die mit div die gleiche Pixelbreite wie die Leinwand im inneren.

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

    Diese wird zum Mittelpunkt Ihres canvas-Bereich und halten Sie die Leinwand in der Mitte, wie Sie die Größe Ihres browser-Fensters. Wie für die nav bar die überlagerung der neu erstellten canvas-element, die Sie benötigen, um mehr hinzuzufügen-styling für den 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>

    Für die erweiterte/vollständige Beispiel finden Sie unter:

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

    InformationsquelleAutor Mateo

Schreibe einen Kommentar