Bootstrap4（32）：綜合網頁實例

接下來我們通過 Bootstrap4 來創建一個簡單的響應式網頁。

在學習之前我們可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm

代碼：

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>我的第一個 Bootstrap 4 頁面</h1>
  <p>重置瀏覽器窗口大小查看效果！</p> 
</div>
 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">導航</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>    
    </ul>
  </div>  
</nav>
 
<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>關於我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg">這邊插入圖像</div>
      <p>關於我的介紹..</p>
      <h3>一些鏈接</h3>
      <p>說明文本</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">激活狀態</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">鏈接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">鏈接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">禁用</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！</p>
      <br>
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！</p>
    </div>
  </div>
</div>
 
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部內容</p>
</div>

嘗試一下 »