Bootstrap (1)

25440 ワード
bootstrap テキストリンク
Bootstrap(1)(5版)
1.概要bootstrap?ブートホーム>docs>コンポーネント
components
button type button class btn btn primary
クラス名を使用してボタンを簡単に作成できます.何の操作も必要ありません.
2.CDNプロジェクトの作成
ホーム>概要>クイックスタート
CSS
cdn.jsdelivr.net
JS
bootstrap은 외부에서 pooper js 패키지 가져와서 활용
- bundle은 외부 popper js를 부트스트랩과 패키지와 묶어서 JS 제공
- separate는 popper와 묶을 필요 없는 별도의 부트스트랩 제공
popperjs
  • ポップアップウィンドウ
  • ポップアップメニュー位置情報によりスクロール
    • .
    html
    link href = CSS
script src = JS
    components 삽입ホームページ>docs>コンポーネント>ドロップダウンリスト>ボタンコピー
    bodyに貼り付け
    div class = dropdown ~
    3. Dropdownsdropdowns
  • マルチボタン
  • 分割ボタン
    • list
  • 単純プロジェクト
  • アクティブクラスを追加すると、青色
    • が有効になります.
  • aria-current:Webアクセス性(必要に応じて貼り付け)
  • 無効項目:
    • 無効
    4.スタイル양식ホームページ>docs>forms>overview、form control、input group
    フォームの入力と発行
    form control
  • sizing
  • disabled
  • readonly
  • ファイル入力(タイプ="file"はファイル入力を表す)
    • input group
  • sizing
  • multiple inputs
  • button addons
  • buttons with dropdowns
    • 5.モデルModalホーム>docs>コンポーネント>モード(Home>docs>Components>Mode)
    live demo
  • ポップアップメニューなどの
  • data-bs-toggle:htmlのdataというグローバル属性bootstrap toggle(データ・ローダ)として指定された属性部分モード(値)
  • data-bs-target:target,html cssの#はidセレクタ
    このアイデンティティを持つ要素をターゲットとして
    • をモードとして出力する
  • header/body/footer,
    • JAvaコード
    var  myModal = document.getElementById('myModal')
 = let/const myModal = document.querySelectorAll('myModal')
myModal.addEventListener('shown.bs.modal', function() {
  myInput.focus()
})
  • mymodalアイデンティティ値を見つけてmymodal変数に入れ、mymodalの一部のイベントリスナーでイベントを接続します.このイベントが発生した場合、2番目のパラメータ関数は=myInputにコールバックします.focus()
    • livedemo->htmlのコピー
    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">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script defer src="./main.js"></script>
</head>
<body>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>
    main.js
    const emailInputEl = document.querySelector('#exampleInputEmail1')
const modalEl = document.querySelector('#exampleModal')
modalEl.addEventListener('shown.bs.modal', function() {
  emailInputEl.focus()
})
    <script defer src="./main.js"></script>:deferは、htmlボディをすべてロードした後にjsを実行する必要があります.shown.bs.modal:docs-modalにイベントリストがリストされています
    Vue 2のコンポーネント間伝達パラメータ(関数に相当)遊び方(親子関係伝達と無関係伝達方法)
    Compledre std::StringRunviewデC++ 17