Bootstrap (2)

9654 ワード
bootstrap テキストリンク
Bootstrap (2)
1. Tooltips
docs > components > tooltips
単一/複数の部分ではなく複数の部分
初期化操作を指定する必要があります(パフォーマンス上の理由で、事前に適用する必要はありません)
  • マウスサスペンションの説明内容
    html body
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
    jsにコピー(ページ上部)
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
    2.NPMプロジェクトの作成
    NPMを使用したブートストラップの作成
    link/scriptのクリア
    npm init -y
npm i -D parcel-bundler
dev / build 각각 설정
npm install bootstrap@next
    scssフォルダの追加
    main.scss
    せつぞく
    link rel= main.scss
    dropdownをbodyセクションにコピー
    main.js(アクセス可能フォルダ)-JSのみ
    import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
    相対パスアクセス
    @import "../node_modules/bootstrap/scss/bootstrap.scss";
    長所
    1)ブートに必要なコンテンツのみ取得できます.
    2)テーマのカスタマイズ
    3.カスタムテーマの色
    component>ボタン各種色ボタン
    docs > customize > color
    theme-colors 에서 색상확인가능 (scss map으로 제공 = key value 형태)
    customize > sass
    (必須)node moodlesから個別にインポートできます.
    (オプション)
    コピーに必要な->既存のscss importに貼り付けます(完全なコードをインポートする前に、リサイクルコードをインポートしてから初期化してください!!)
    customize > color
    theme-colorをコピーしてscssを貼り付けます(これもインポート前)
    カスタマイズしたいデータを変更するだけでOK
    secondary -> yellowgreen
    components > spinners (loading animation)
    色の中のいろいろな色
    spinner-border text-secondary
    ->secondaryを変更するだけで、他のガイドバーコンポーネントの色も変更されます
    4.パフォーマンスの最適化(ツリー構造)
    1)Lean Sass imports:scss導入後最大d使用可能
    import~
    関数は、変数を事前にインポートする必要があります.
    レイアウトと構成部品のインポートと使用(ボタン、ドロップダウンメニューなど)
    2) Lean JavaScript
    JSDefault exports(デフォルトエクスポート)
    import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
    SCSS(エラーが発生し、そのまま)
    @import "../node_modules/bootstrap/scss/bootstrap.scss" 대신에
@import "../node_modules/bootstrap/scss/drop"  // 특정한 스타일만 가져와서 (5버전 성숙도 떨어짐, 그래서 위에가 좋음)
    JS(性能差が大きい)
    import bootstrap from 'bootstrap/dist/js/bootstrap.bundle' // 묶여진 JS파일 사용하는 것
import bootstrap from 'bootstrap/js/dist/dropdwon' // 따로 import
    components > dropdowns > via JS
    初期化コードをコピーしてimportの下に貼り付けます
    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
    単一の機能のみをインポートするため、オブジェクトデータ変数として使用できません.
    (new bootstrap.Dropdownは使用できません)
    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new Dropdown(dropdownToggleEl)
    Dropdown importを直接コンストラクション関数として使用するように変更최적화var->constの変更
    削除var dropdownList = (未使用)
    しかし、エラーが発生しました!
    popper jsをインストールする必要があるので
    npm i @popperjs/core
    초기화ボタン初期化切り替え方法(イベント)/ほとんどXが必要
    ほとんどspinner初期化Xが必要ですmodal 초기화via JS
    main.js
    var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
    import Modal from 'bootstrap/js/dist/modal'
new Modal(document.querySelector('#exampleModal'), {
  backdrop: 'static'})
    モードの作成時にオプションを追加
    docsで表示可能
    背景:背景を選択しても閉じません
    • ステップ関数SNS SDK統合によるエラー処理
    Wifiソース学習のwifiリスト