Bootstrap4公式ドキュメント|新機能の紹介

その他 2020-10-26 14:39:59 訪問数: null

目次を読む

ここに写真の説明を挿入

Bootstrapは、Web開発をより速く、より簡単にする、シンプルで直感的で強力なフロントエンド開発フレームワークです。これは、応答性の高いモバイルデバイスファーストのWEBサイトを構築するための世界で最も人気のあるフロントエンドフレームワークです。

Bootstrap4の使用を開始する

インストール

ダウンロードで紹介

  • 方法1：ソースファイルをダウンロードしてプロジェクトページにインポートし
    ます。BootstrapのSass、JavaScript、およびドキュメントのソースファイルをダウンロードして、独自のプロセスツールを使用してBootstrapをコンパイルします。ソースファイルをダウンロードする
  • 方法2：プリコンパイルされたCSSおよびJSファイル
    Bootstrap v4.5.0のプリコンパイルされたファイルをダウンロードし、プロジェクトに追加します。Bootstrapをダウンロードする
  • 方法3：BootstrapCDN
    はBootstrapCDNを使用するため、ダウンロードする必要はありません。キャッシュを使用して、Bootstrapのコンパイル済みCSSファイルとJSファイルをプロジェクトにロードします。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

注：コンパイルされたJavaScript、その前にjQueryとPopper.jsのCDNバージョンを導入することを忘れないでください

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

パッケージマネージャー

最も人気のあるパッケージマネージャーのいくつかを使用して、Bootstrapソースファイルをほぼすべてのプロジェクトにドラッグできます。パッケージマネージャーが何であっても、Bootstrapでは、SassコンパイラーとAutoprefixerが、公式にコンパイルされたバージョンと一致する設定を設定する必要があります。

  • npm
    はnpmを使用してBootstrapをNode.jsアプリケーションにインストールします。
npm install bootstrap
  • Yarn
    は、yarnを使用してBootstrapをNode.jsアプリケーションにインストールします。
yarn add bootstrap
  • RubyGems
    は次のコードをGemfileファイルに追加し、Bundler（推奨）とRubyGemsツールを使用してBootstrapをRubyアプリケーションにインストールします。
$ gem 'bootstrap', '~> 4.5.0'

//不使用 Bundler，你还可以通过以下命令安装 Bootstrap 的 gem：
$ gem install bootstrap -v 4.5.0
  • Composer
    Composerを使用して、BootstrapのSassファイルとJavaScriptファイルをインストールおよび管理することもできます。
composer require twbs/bootstrap:4.5.0
  • NuGet
    .NET開発者の場合は、NuGetを使用してBootstrapのCSSまたはSassおよびJavaScriptファイルをインストールおよび管理することもできます。
Install-Package bootstrap
Install-Package bootstrap.sass

コンテンツ

Bootstrapに含まれるコンテンツには、プリコンパイルされたバージョンとソースコードバージョンが含まれます。BootstrapのJavaScriptプラグインにはjQueryが必要であることに注意してください。

プリコンパイルされたブートローダー

ダウンロード後、次の内容で圧縮フォルダーを解凍します。

ブートストラップ/
├──CSS /
│├──ブートストラップ・grid.css
│├──bootstrap-grid.css.map
│├──ブートストラップ・grid.min.css
│├──ブートストラップgrid.min.css。マップ
│├──ブートストラップ・reboot.css
│├──bootstrap-reboot.css.map
│├──ブートストラップ・reboot.min.css
│├──bootstrap-reboot.min.css.map
│├──ブートストラップ.css
│├──bootstrap.css.map
│├──bootstrap.min.css
│└──bootstrap.min.css.map
└──JS /
├──bootstrap.bundle.js
├──bootstrap.bundle .js.map
├──bootstrap.bundle.min.js
├──bootstrap.bundle.min.js.map
├──bootstrap.js
├──bootstrap.js.map
├──bootstrap.min.js
└─ ─bootstrap.min.js.map

CSSとJS（bootstrap。）をコンパイルし、CSSとJS（bootstrap.min。）をコンパイルして合理化しました。
ソースマップ（bootstrap。*。map）は、一部のブラウザーの開発者ツールで使用できます。
バンドルされたJSファイル（bootstrap.bundle.jsはbootstrap.bundle.min.jsを最小化します）にはPopperが含まれていますが、jQueryは含まれていません。

CSSファイル

cssファイルの内容は次のとおりです。
ここに写真の説明を挿入

JSファイル

ここに写真の説明を挿入

ブートストラッププログラムのソースコード

Bootstrapソースコードのダウンロードには、コンパイル済みのCSSおよびJavaScriptアセットのほか、ソースSass、JavaScript、およびドキュメントが含まれています。より具体的には、次のものなどが含まれます。

ブートストラップ/
├──DIST /
│├──CSS /
│└──JS /
├──サイト/
│└──docs/
│└──4.5 /
│└──例/
├──JS /
└── scss /

ブラウザとデバイス

サポートされているブラウザ

Bootstrapは、すべての主要なブラウザーとプラットフォームの最新で安定したバージョンをサポートします。Windowsでは、Internet Explorer 10-11 / MicrosoftEdgeがサポートされています。
最新バージョンのWebKit、Blink、またはGeckoの代替ブラウザーを直接、またはプラットフォームのWebビューAPIを介して使用するための明示的なサポートはありません。ただし、Bootstrapは（ほとんどの場合）これらのブラウザーでも表示され、正常に実行されるはずです。より具体的なサポート情報を以下に示します。

https://github.com/browserslist/browserslist#readme
>=1％
最後の1メジャーバージョン
が死んでいない
Chrome> = 45
Firefox> = 38
Edge> = 12
Explorer> = 10
iOS> = 9
Safari> = 9
Android> = 4.4
Opera > = 30

モバイルデバイス

一般的に、Bootstrapは、主​​要なプラットフォームごとに最新バージョンのデフォルトブラウザをサポートします。
注意:プロキシブラウザ（Opera Mini、Opera Mobileのターボモード、UC miniブラウザ、Amazon Silkなど）はサポートされていません。詳細は以下のとおりです。
ここに写真の説明を挿入

デスクトップブラウザ

同様に、ほとんどのデスクトップブラウザの最新バージョンがサポートされています。詳細は以下のとおりです。
ここに写真の説明を挿入

IEブラウザ

Internet Explorer10以降をサポートします。IE9以下はサポートしません。
注：一部のCSS3属性およびHTML5要素は、IE10で完全にはサポートされていないか、完全な機能を使用するにはプレフィックス属性が必要です。IE8-9のサポートが必要な場合は、Bootstrap3を使用してください。CSS3およびHTML5機能のブラウザサポートに関する詳細情報を入手してください。…

Javascript

  1. jQuery上に構築されたオプションのJavaScriptプラグインでBootstrapに命を吹き込みます

  2. プラグインは個別に含めることができ（Bootstrapの個人用js / dist / .jsを使用）、またはbootstrap.jsまたは縮小プラグインbootstrap.min.jsの両方（両方を含まない）にすることができます。バンドラー（Webpack、summary ...）を使用する場合は、 / js / dist /.jsUMD対応ファイルを使用できます。

  3. 所有插件都依赖于jQuery（这意味着必须在插件文件之前包含jQuery ）

データ属性APIを無効にする

データ属性APIを無効にするには、ドキュメント名前名のすべてのイベントのバインドを解除する必要があります。data-apiは次のとおりです。

$(document).off('.data-api')

特定のプラグインを見つけるには、以下に示すように、名前名としてプラグインの名前とdata-api名前付けを含めるだけです。

$(document).off('.alert.data-api')

イベント

Bootstrapは、ほとんどのプラグインの唯一の操作のためのカスタムイベントを提供します。すべての無限のイベントはpreventDefault()機能を提供します。これにより、アクションが開始する前に実行を停止することができます。イベントハンドラから戻ると、falsepreventDefault（）も自動的に呼び出されます。

$('#myModal').on('show.bs.modal', function (e) {
    
    
  if (!data) {
    
    
    return e.preventDefault() // stops modal from being shown
  }
})

プログラマティックAPI

JavaScriptAPIを介してすべてのBootstrapプラグインを使用します。すべてのパブリックAPIは単一のリンク可能なメソッドであり、一連のアクションを返します。

$('.btn.danger').button('toggle').addClass('fat')

// 所有方法都应接受可选的options对象，以特定方法为目标的字符串或不包含任何内容（以默认行为启动插件）：如下
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({
    
     keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

各プラグインは、Constructorプロパティで元のコンストラクターも公開します$.fn.popover.Constructor。特定のプラグインインスタンスを取得する場合は、次の要素から取得します$('[rel="popover"]').data('popover')。

非同期機能と変換

すべてのプログラミングAPIメソッドは非同期であり、遷移の開始後、終了前に呼び出し元に戻ります。

変換が完了した後に操作を実行するために、対応するイベントをリッスンできます。

$('#myCollapse').on('shown.bs.collapse', function (e) {
    
    
  // Action to execute once the collapsible area is expanded
})

さらに、遷移コンポーネントへのメソッド呼び出しは無視されます。

$('#myCarousel').on('slid.bs.carousel', function (e) {
    
    
  $('#myCarousel').carousel('2') // 1完成后将滑向2
})

$('#myCarousel').carousel('1') // 
$('#myCarousel').carousel('2') // 被忽视

デフォルト設定

プラグインのConstructor.Defaultオブジェクトを変更することにより、プラグインのデフォルト設定を変更できます。

$.fn.modal.Constructor.Default.keyboard = false

テーマ

新しい組み込みのSass変数を使用してBootstrap4をカスタマイズし、グローバルスタイル設定を実装して、テーマ設定とコンポーネントの変更を容易にします。Bootstrap 3では、テーマは主にLESSの変数、カスタムCSS、およびdistファイルに含まれる個別のテーマスタイルシートに置き換えられています。少しの努力で、コアファイルに触れることなくBootstrap3の外観を完全に再設計できます。Bootstrap 4は、なじみのある、しかしわずかに異なるアプローチを提供します。
現在、テーマ設定は、Sass変数、Sassマッピング、およびカスタムCSSを介して行われます。専用のテーマスタイルシートはもうありません。代わりに、組み込みのテーマを有効にして、グラデーションやシャドウなどを追加できます。

サス

ソースSassファイルを利用して、変数、マップ、ミックスインなどを利用します。Bootstrapのビルドでは、ブラウザの丸めの問題を防ぐために、Sassの丸めの精度が6（デフォルトは5）に引き上げられました。
… bootstrap4についてもっと学び、bootstrap4の公式ドキュメントについてもっと
学びましょう...

おすすめ

転載: blog.csdn.net/weixin_43853746/article/details/107946439
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com