我真的很新，所以我的知識總的來說很差。我正在嘗試將 P5js 草圖添加到 Bootstrap 模板中。理想的情況是能夠構建一個響應式設計網站，其中包含一些帶有 p5js 代碼的圖像和視頻庫。我已經使用我在網上找到的一個示例進行了一些測試，但我無法做到。我在這里附上代碼https://codepen.io/llorencg/pen/LYVMLjZ任何幫助將不勝感激！謝謝 ：）<html><head> <meta charset="utf-8"> <title>p5 walkthrough</title> <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css"> </head><body> <nav class="navbar navbar-dark navbar-full bg-inverse" style=""> <a class="navbar-brand" href="#">Bootstrap and P5.js</a> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">A Link to Nowhere</a> </li> </ul> </nav> <div class="container"> <div id="jumbo-canvas" class="jumbotron"> <h1>Fun With P5.js</h1> <p class="lead">P5 is a JavaScript library that can be used to draw things onto an html canvas. The P5 reference guide can be found <a href="https://p5js.org/reference/">here</a>, and legendary videos by Daniel Schiffman can be found <a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw">here.</a></p> <hr /> <p>By giving this div an id of jumbo-canvas and and placing <code>canvas.parent('jumbo-canvas')</code> in our setup function, we can draw inside this Bootstrap jumbotron.</p> <p class="lead"> <a class="btn btn-info btn-lg" href="#" role="button">Click this button for some truth</a> </p> </div> </div></body>
將 P5.js 草圖添加到 Bootstrap 模板背景
Helenr
2022-06-05 09:57:32
