twitter引導和畫布定位

我想在我的一個項目中使用twitter引導，我真正想要的是帶有鏈接和頁面中間的HTML畫布的標題。參考：twitter引導和畫布定位

Example Bootstrap Page

當我添加一個HTML canvas標籤，並給它的寬度和高度，我得到兩種不良影響：

畫布上緣被切斷，並有申請保證金到畫布
將畫布向右推，再次我必須對其應用邊距。

我希望畫布留在頁面的中心。

2013-03-25 user1144596

你可以將其覆蓋在CSS和設置'保證金左：自動;'和'保證金權：汽車;' – 2013-03-25 23:53:26

我們談論畫布元素的權利（即）？ http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element – Mateo 2013-03-26 00:03:21

是的，我們正在談論 – user1144596 2013-03-26 00:41:14

爲了讓你的畫布元素保持在屏幕的中心，你必須用如下所示的包含div來包裝它。

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

然後，我們需要創建和應用類，這將使包含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>

這會使您的畫布居中並在調整瀏覽器窗口大小時保持畫布居中。至於覆蓋新創建的畫布元素的導航欄，您需要向主內容容器添加更多樣式。

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

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

對於擴展/完整的示例見下文：

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

來源

2013-03-26 01:10:33 Mateo

twitter引導和畫布定位

回答

相關問題