Title1

Title2

Title3

prev3-4 Display 屬性
4. Boostrap4 元件next
數位相簿很上手

3-5 上課範例

  1. border 
    <!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <title>Bootstrap border</title>
    <style type="text/css">
      [class^=border] {
        display: inline-block;
        width: 5rem;
        height: 5rem;
        margin: .25rem;
        background-color: #f5f5f5;
      }
      .ex-border-0 span{
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="my-5 border border-primary p-5" style="">
        <h2>Border 增加</h2>
        <span class="border"></span>
        <span class="border-top"></span>
        <span class="border-right"></span>
        <span class="border-bottom"></span>
        <span class="border-left"></span>
      </div>       
    </div>    
 
  </body>
</html>

     

  2. clearfix 
    <!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <title>Bootstrap clearfix</title>
  </head>
  <body>
    <div class="container">
      <div class="clearfix">
        <img src="img/fix-1.jpg" alt="aaa" width="300" class="float-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis enim optio ad suscipit natus, impedit hic, numquam odit iure autem debitis rerum odio nulla voluptas laudantium minima quae ipsa accusamus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, quidem ut quam ex ad delectus aperiam vitae molestias architecto nulla sit ipsa, eius maxime nemo temporibus expedita quo. Vel?</p>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem et maxime amet doloribus, quis, soluta deleniti optio esse aperiam dicta repellendus suscipit cum recusandae earum excepturi at nostrum eos enim.</p>
    </div>
 
  </body>
</html>

     

  3.  
prev3-4 Display 屬性
4. Boostrap4 元件next

友善列印 & 下載 PDF 匯出 MarkDown 格式