Bootstrap Code Snippet

Yanwei Liu

·

Follow

2 min read

·

Jul 25, 2019

--

Share

左中右RWD自適應欄位

<div class="row">    <div class="col-4">
        <span>
        1
        </span>
    </div>     <div class="col-4">
        <span>
         2
        </span>
    </div></div>#將<span>中的數字1改成任意的內容(如圖片、影片、....等內容)

圖片

<img class="img-fluid rounded" src="images/yourPicture.jpg">

創客科技網頁設計作品集新增客戶案例圖片的程式碼

<!--新的圖片用這個來擺設-->
<span class="col-md-6 mbr-gallery-title mbr-fonts-style display-7"><a href="https://e96031413.github.io/lishanfarms/" target="_blank">荔山農場</a><br></span>
<a href="https://e96031413.github.io/lishanfarms/"><img class="col-md-6 img-fluid rounded" src="assets/images/lishanfarms.jpg" border="0"></a>
<!--新的圖片用這個來擺設-->###col-md-6是圖片只占畫面一半，拿掉就是全螢幕顯示
###使用四個空白來與footer隔開<br><br><br><br>

影片

<div class="col-md-6">
  <h3>影片標題</h3>
  <div class="embed-responsive embed-responsive-16by9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXXXX" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>#iframe的嵌入語法必須到Youtube影片中選擇分享->嵌入->複製語法到上面的框架中