左中右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影片中選擇分享->嵌入->複製語法到上面的框架中

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store