WebデフォルトHTML/CSS-クローンエンコーディング


📌 クローンコード?
  • の実際のサービスは同じです.
  • Googleクローンコード


    📌 実装が必要な機能
  • 検索ウィンドウ
  • Google検索ウィンドウと連動
  • 次のアイコン
  • をクリックして
  • にリンクします.

    Bootstrapとは?


    jQueryベースのオープンソースWebフレームワーク、
  • ツイッターから開始
  • は、モバイル優先のWebプロジェクトを開発するために最も人気のあるHTML、CSS、JSフレームワークです.
  • ライブラリとフレームワーク

  • ライブラリ
  • 簡単で使いやすいツールのセット.
    つまり、再利用する機能を使用して、重複コードの作成を排除することができます.
    クラスまたは機能として作成し、必要な場所で呼び出して使用します.
    作成者の意図に基づいてリポジトリを使用するかどうかを決定できます.また、新しいリポジトリを作成する際に厳格なルールはありません.作成の意図に基づいてリポジトリを作成するだけです.
  • フレーム(フレーム)
  • 上記のライブラリの概念を含み、必要な機能のみを実現します.
    迅速な開発に集中するための基本機能
    この機能だけでは実行できないため、機能を追加する必要があります.
    リポジトリとは異なり,開発は著者の意図ではなくフレームワークに依存する.
    したがって、フレームワークは既存の定義されたルールを守らなければならない.

    MISSION


    実習。


    html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <div id="liveAlertPlaceholder"></div>
        <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
    
        <script>
            var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
            var alertTrigger = document.getElementById('liveAlertBtn')
    
            function alert(message, type) {
                var wrapper = document.createElement('div')
                wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
    
                alertPlaceholder.append(wrapper)
            }
    
            if (alertTrigger) {
                alertTrigger.addEventListener('click', function () {
                    alert('alert BOOTSTRAP 실습 성공!', 'success')
                })
            }
        </script>
    </body>
    </html>

    実習。


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <div class="card" style="width: 18rem;">
            <img src="../img/성공.PNG" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
       </div>
    </body>
    </html>
    ※dropdownはコピー済みですが、起動していません…
    実習1のようにjsのようなコードがあるか確認しましたが見えません...どうしてだめなの?