iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0
Modern Web

打造你的第一個網站系列 第 27

第二十七天 使用Bootstrap 實做網頁(一)

  • 分享至 

  • xImage
  •  

在學會Bootstrap之後,我們接著使用Bootstrap來實做網頁,在我的附檔中,我們已經引用並且設定好<div></div>每個標籤都有它們的內容。首先我們先進行上方的排版,且記Bootstrap的排版要將元素包在container內在用row才可以包成橫排。

HTML程式碼如下:

 <section id="intro" class="pt-5">
      <h1 class="">Introtion</h1>
       <div class="container">
           <div class="introbox">
               <div class="row">
                   <div class="col-md-4">
  							⋮
                   </div>
                   <div class="col-md-4">
 							⋮
                   </div>
                   <div class="col-md-4">
 							⋮
                   </div>
               </div>

結果:
在MD大型裝置的時候

https://ithelp.ithome.com.tw/upload/images/20231007/20149625R9VhzzIEcY.png

今日教學內容 可以上我的GitHub 我的第一個網站-8


上一篇
第二十六天-Container
下一篇
第二十八天用bootstrap 實做網頁(二)
系列文
打造你的第一個網站32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言