微痛-結合 Bootstrap

製作小型專案

4 / 15.   講師：陳泓棣

Outline

  • 使用 Bootstrap 的起手式
  • 想要啥 都複製貼上吧（html） 
  • 關於一些 css 參數（功能）
  • i 學習網
  • Lab1. navbar 和 banner1
  • Lab2. card
  • Lab3. banner2 和 breadcrumb
  • Lab4. 變成 RWD 網頁吧
  • 參考資源

使用 Bootstrap 的起手式

在原有的 html 起手式

加入 Bootstrap 的 css , js

稍微解釋 ＣＤＮ

Bootstrap cdn

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <!-- viewport RWD必備 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
       <!-- bootstrap css 新增 -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
           integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
       <!-- bootstrap css end 新增 -->
    </head>
    <body>
       





         <!-- bootstrap js 新增 -->
         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
             integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
             crossorigin="anonymous">
         </script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
             integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
             crossorigin="anonymous">
         </script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
             integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
             crossorigin="anonymous">
         </script>
         <!-- bootstrap js end 新增 -->
    </body>
</html>

想要啥 都複製貼上吧（html）

我要一個導覽列

可以！

我要一個大型圖片版

可以！

我要一個小卡版面

幫你做！

我要一個麵包屑

一定行！

複製貼上完了，然後呢？

i 學習網

Re.從 0 開始的網頁製作  

關於一些 css 參數（功能）

position:    ;

  • fixed
  • relative
  • absolute

display:flex;

Lab1. navbar 和 banner1

 <!-- navbar  -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">i 學習</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">js 讓子彈飛</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">css 美觀大師</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">React 框架應用</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">html 基本架構</a>
                    </li>
                </ul>

                <!-- search -->
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">找找看！</button>
                </form>
                <!-- search end  -->
            </div>
        </nav>
        <!-- navbar end -->
        
        
        
        
        
        
        <!-- jumbotron -->
        <div class="banner1">
            <div class="jumbotron">
                <!-- 自己加的 text -->
                <div class="text">   
                    <h1 class="display-4">Bootstrap課程 </h1>
                    <p class="lead">化繁為簡，深入淺出</p>
                    <a class="btn btn-primary btn-lg" href="#" role="button">了解課程</a>
                </div>
            </div>
        </div>
        <!-- jumbotron end -->

Lab1. navbar 和 banner1

ＨＴＭＬ

.navbar{
                width: 100%;
                position: fixed;
                z-index: 2;
            }
            .banner1 .jumbotron{
                background:
                url("https://images.pexels.com/photos/39284/macbook-apple-imac-computer-39284.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") 100% 100%;
                background-size:cover;
                height: 400px;
                color: aliceblue;
                position: relative;
            }
            .banner1 .jumbotron .text{
                position: absolute;
                bottom:30px;
            }

Lab1. navbar 和 banner1

ＣＳＳ

Lab2. card

 <!-- card -->
        <div class="card-wrapper">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">微痛入門 RWD</h5>
                     
                        <p class="card-text">彈性縮放，配合各種裝置！ <br> 又稱 響應式網路設計</p>
                        <a href="#" class="card-link">維基百科</a>
                        <a href="http://lisbunny.nctu.me/" class="card-link">Lis Bunny</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Bootstrap 是啥？</h5>
                      
                        <p class="card-text">一種網站製作加速器！<br>複製貼上好棒棒！</p>
                        <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/" class="card-link">
                            官網介紹</a>
                        <br>
                        <a href="#" class="card-link">哪些網站使用 Bootstrap</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">醜話說前頭</h5>
                        
                        <p class="card-text">電鑽給你了，你卻連一般的鑽頭都不會用，這樣會受傷的！！<br>推薦以下課程</p>
                        <a href="#" class="card-link">
                            css 美觀大師
                        </a>
                        <a href="#" class="card-link">html 基本架構</a>
                    </div>
                </div>
        </div>
        <!-- card end -->

Lab2. card

ＨＴＭＬ

.card-wrapper{
                display: flex;
                justify-content: center;
              
            }
             .card-wrapper .card{
                 margin: auto;
             }

Lab2. card

ＣＳＳ

Lab3. banner2 和 breadcrumb

Lab3. banner2 和 breadcrumb

ＨＴＭＬ

<!--text-center-wrap -->
        <div class="text-center-wrap">
            <!-- banner2-->
            <div class="banner2">
            
                <!-- text-center -->
                <div class="card text-center">
                    <div class="card-header">
                        講師介紹
                    </div>
                   <div class="card-body">

                        <img class="face" src="https://i.imgur.com/VEiwZYf.jpg"
                            alt="my-face">
                        <h5 class="card-title">阿泓王</h5>
                        <p class="card-text">輔大 李敏鎬</p>
                        <a href="#" class="btn btn-primary">聯絡我</a>
                    </div>
                    <div class="card-footer text-muted">
                        2 days ago
                    </div>
                </div>
                <!-- text-center end -->

            </div>
             <!-- banner2 end -->
        </div>
        <!--text-center-wrap end  -->

        <!-- breadcrumb -->
        <nav aria-label="breadcrumb" class="big-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Lis Bunny</a></li>
                <li class="breadcrumb-item"><a href="#">Sirla</a></li>
                <li class="breadcrumb-item"><a href="#">輔大圖資系網站</a></li> 
            </ol>
        </nav>
        <!-- breadcrumb end -->

Lab3. banner2 和 breadcrumb

ＣＳＳ

.text-center-wrap .banner2{
                 margin-top: 2em;
                 display: flex;
                 justify-content: center;
                 background:
                 url("https://images.pexels.com/photos/3815585/pexels-photo-3815585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")top right/cover ;
             }
             .text-center-wrap .text-center{
                 margin: 2em;
                 width: 50%;

             }
              .text-center .card-body .face{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin-bottom: 20px;
              }

Lab4. 變成 RWD 網頁吧

Lab4.

變成 RWD 網頁吧

ＣＳＳ

/* 媒體查詢 */
@media screen and (max-width: 1000px) {

  .banner1 .jumbotron .text{
      height: 70%;
      width: 90%;
      padding: 20px;
      backdrop-filter: blur(10px);
       }
   .banner1 .jumbotron .text .btn{
       position: absolute;
       right: 10%;
       bottom: 20px;
              }
    .card-wrapper{
      display:flex ;
      flex-wrap: wrap;
    }
    .card-wrapper .card{
        margin-top: 2em;
      }

    .text-center{
        margin: 2em;
        width: 100%;
    }

    .big-breadcrumb{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

i 學習網

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>bootstrap小型專案實作</title>
        <meta name="description" content="">
        <!-- viewport RWD必備 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- bootstrap css -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
              integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
              crossorigin="anonymous">
        <!-- bootstrap css end -->

        <!-- css -->
        <style>
            /* css reset */
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
             /* css reset end */
            .navbar{
                width: 100%;
                position: fixed;
                z-index: 2;
            }
            .banner .jumbotron{
                background:
                url("https://images.pexels.com/photos/39284/macbook-apple-imac-computer-39284.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") 100% 100%;
                background-size:cover;
                height: 400px;
                color: aliceblue;
                position: relative;
            }
            .banner .jumbotron .text{
                position: absolute;
                bottom:30px;
            }
            .card-wrapper{
                display: flex;
                justify-content: center;
              
            }
             .card-wrapper .card{
                 margin: auto;
             }
            
             .text-center-wrap .banner2{
                 margin-top: 2em;
                 display: flex;
                 justify-content: center;
                 background:
                 url("https://images.pexels.com/photos/3815585/pexels-photo-3815585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")top right/cover ;
             }
             .text-center-wrap .text-center{
                 margin: 2em;
                 width: 50%;

             }
              .text-center .card-body .face{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin-bottom: 20px;
              }

             /* 媒體查詢 */
            @media screen and (max-width: 1000px) {

            .banner .jumbotron .text{
                height: 70%;
                width: 90%;
                padding: 20px;
                backdrop-filter: blur(10px);
              
            }
            .banner .jumbotron .text .btn{
                position: absolute;
                right: 10%;
                bottom: 20px;
            }
            .card-wrapper{
                display:flex ;
               flex-wrap: wrap;
               
            }
            .card-wrapper .card{
                margin-top: 2em;
            }

             .text-center{
             margin: 2em;
             width: 100%;

             }
           
            .big-breadcrumb{
                width: 100%;
               display: flex;
               justify-content: center;
            }
            }
        </style>
        <!-- css end -->
    </head>
    <body>

        <!-- navbar  -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">i 學習</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">js 讓子彈飛</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">css 美觀大師</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">React 框架應用</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">html 基本架構</a>
                    </li>
                </ul>
                <!-- search -->
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">找找看！</button>
                </form>
                <!-- search end  -->
            </div>
        </nav>
        <!-- navbar end -->

        <!-- jumbotron -->
        <div class="banner">
            <div class="jumbotron">
                <!-- 自己加的 text -->
                <div class="text">   
                    <h1 class="display-4">Bootstrap課程 </h1>
                    <p class="lead">化繁為簡，深入淺出</p>
                    <a class="btn btn-primary btn-lg" href="#" role="button">了解課程</a>
                </div>
            </div>
        </div>
        <!-- jumbotron end -->

         <!-- card -->
        <div class="card-wrapper">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">微痛入門 RWD</h5>
                     
                        <p class="card-text">彈性縮放，配合各種裝置！ <br> 又稱 響應式網路設計</p>
                        <a href="#" class="card-link">維基百科</a>
                        <a href="http://lisbunny.nctu.me/" class="card-link">Lis Bunny</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Bootstrap 是啥？</h5>
                      
                        <p class="card-text">一種網站製作加速器！<br>複製貼上好棒棒！</p>
                        <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/" class="card-link">
                            官網介紹</a>
                        <br>
                        <a href="#" class="card-link">哪些網站使用 Bootstrap</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">醜話說前頭</h5>
                        
                        <p class="card-text">電鑽給你了，你卻連一般的鑽頭都不會用，這樣會受傷的！！<br>推薦以下課程</p>
                        <a href="#" class="card-link">
                            css 美觀大師
                        </a>
                        <a href="#" class="card-link">html 基本架構</a>
                    </div>
                </div>
        </div>
        <!-- card end -->

        <!--text-center-wrap -->
        <div class="text-center-wrap">
            <!-- banner2-->
            <div class="banner2">
            
                <!-- text-center -->
                <div class="card text-center">
                    <div class="card-header">
                        講師介紹
                    </div>
                    <div class="card-body">

                        <img class="face" src="https://i.imgur.com/VEiwZYf.jpg"
                            alt="my-face">
                        <h5 class="card-title">阿泓王</h5>
                        <p class="card-text">輔大 李敏鎬</p>
                        <a href="#" class="btn btn-primary">聯絡我</a>
                    </div>
                    <div class="card-footer text-muted">
                        2 days ago
                    </div>
                </div>
                <!-- text-center end -->

            </div>
             <!-- banner2 end -->
        </div>
        <!--text-center-wrap end  -->

        <!-- breadcrumb -->
        <nav aria-label="breadcrumb" class="big-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Lis Bunny</a></li>
                <li class="breadcrumb-item"><a href="#">Sirla</a></li>
                <li class="breadcrumb-item"><a href="#">輔大圖資系網站</a></li> 
            </ol>
        </nav>
        <!-- breadcrumb end -->

       <!-- bootstrap js -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
        </script>
        <!-- bootstrap js end -->
    </body>
</html>

i 學習網 完整程式碼

參考資源

Bootstrap

廖學姊的 hackmd

z-index

backdrop-filter

flex-wrap

稍微解釋 ＣＤＮ

感謝聆聽

結合 bootstrap 製作小型專案

By Hong di Chen

Made with Slides.com

結合 bootstrap 製作小型專案

  • 143

More from Hong di Chen