ブートストラップフロントエンドフレームワーク
1.モバイルデバイスの優先順位戦略
- 基本的なCSSはまずモバイルです。小さい幅を優先
- メディアのお問い合わせ。タブレットおよびデスクトップコンピュータの場合
- 漸近的に強化されました。画面サイズが大きくなるにつれて要素を追加する
2.レスポンシブレイアウト
- レスポンシブレイアウト：同じページのセットは、異なる解像度のデバイスと互換性があります
- グリッドシステム：行を平均12グリッドに分割します
- コンテナ分類：表相当
- コンテナ：両側を空白のままにします
- コンテナ流体：すべてのデバイスの幅は100％
- 定義行：以前のtrと同等、スタイル：行
- 要素を定義：異なるデバイスで要素が占めるグリッドの数を指定します。スタイル：col-device code-number of grids
- 機器分類：
- xs：超小型スクリーン携帯電話
- sm：小さな画面のタブレット
- md：中画面デスクトップモニター、ノートブック
- lg：大画面の大型モニター、デスクトップ
- 注：
- 行のグリッド数が12を超えると、超過した部分が自動的に折り返されます
- ラスタープロパティは上位互換性があります。グリッドクラスは、境界点のサイズ以上の画面幅を持つデバイスに適しています
- 実際のデバイスの幅が、グリッドクラス属性を設定するためのデバイスコードの最小値よりも小さい場合、要素は行全体を占めます
JSプラグインのピットをインポートする
エラーコード
どのようにボタンをクリックしても。ポップアップしません
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
- BootstrapのすべてのJavascriptプラグインはjQueryに依存しています
- 最初にJQuery.jsをインポートしてから、bootstrap.jsをインポートする必要があります
正确代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--Bootstrap的所有JavaScript插件都依赖于jQuery，必须放在最前-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--加载Bootstrap所有JavaScript插件-->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
