我在 Bootstrap 4 中有這個作業示例：
<div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-body pt-3 ">
<h5 class="card-title">Camera streaming</h5>
<div class="section d-flex justify-content-center embed-responsive embed-responsive-16by9">
<video id="remoteVideo" class="embed-responsive-item" controls autoplay loop muted></video>
</div>
<div class="row">
<div class="col-8 mt-2">
<button id="startButton" type="button" class="btn btn-outline-secondary" title="" data-toggle="tooltip" >Connect</button>
</div>
<div class="col-4 mt-3">
<p><b>Status:</b> <span id="status">offline</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
但在Bootstrap 5 中不起作用
uj5u.com熱心網友回復：
這應該解決它。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-body pt-3 ">
<h5 class="card-title">Camera streaming</h5>
<div class="ratio ratio-16x9">
<video id="remoteVideo" controls autoplay loop muted></video>
</div>
<div class="row">
<div class="col">
<button id="startButton" type="button" class="btn btn-outline-secondary" title="" data-toggle="tooltip">Connect</button>
</div>
<div class="col-4 mt-3">
<p><b>Status:</b> <span id="status">offline</span></p>
</div>
</div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/386123.html
標籤：推特引导 bootstrap-4