ホームページ >ウェブフロントエンド >H5 チュートリアル >BootStrap の基本スタイルの紹介

BootStrap の基本スタイルの紹介

PHPzオリジナル: 2017-10-16 10:16:213826ブラウズ

Bootstrapの基本スタイルの使い方

1. 準備

1. レスポンシブレイアウト

Bootstrapは、さまざまなデバイスサイズの表示モードに自動的に適応できるレスポンシブレイアウトフレームワークです。 :

[関連する推奨事項: ブートストラップチュートリアル]

c9bdfcd264f6bdb5e162254806b4786e

whereInitial-scale = 1 はスケーリング率が 1 であることを意味します。

2. bootstrap.css

を導入すると、ローカルにインポートするために bootstrap.css ファイルをダウンロードできます。CDN インポート方法は次のとおりです。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用 CDN の利点と欠点: 1. ネットワーク環境に導入する必要があります。2. ローカルサーバー上にファイルがある場合、読み込み速度が非常に速くなります。 CDN は青島のサーバー上に bootstrap.css ファイルを持っているため、青島地域のユーザーはファイルをすぐにインポートします。そうでない場合は、処理が遅くなり、読み込みの遅延が長くなります。 3. Webstorm ソフトウェアにはコードプロンプトがありません。 CDN を使用して CSS ファイルをロードする場合、コードプロンプトが必要な場合は、bootstrap.css をダウンロードしてローカルに再導入することをお勧めします。

3、bootstrap.js と jQuery.js を導入します

bootstrap.js と jQuery.js ファイルをローカルにダウンロードしてローカルにインポートすることも、CDN を使用してインポートすることもできます。CDN インポート方法は次のとおりです。

<!-- jQuery 某些bootstrap插件需要使用 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 所有的bootstrap插件都需要引入 -->
<script src="js/bootstrap.min.js"></script>

注: ページをレンダリングするブラウザのパフォーマンスを向上させるために、js ファイルの導入部分を body タグの最後に配置するようにしてください。

2. 開発で一般的に使用されるスタイル

1. グリッドシステム

Bootstrap は、画面またはビューポートのサイズが大きくなると、自動的に最大 12 列に分割されます。

適切な配置と配置を行うには、「行」は .container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります。パディング。流体レイアウトコンテナ (.container-fluid)、最も外側のレイアウト要素 .container を .container-fluid code> に変更します。固定幅のグリッドレイアウトを 100% 幅のレイアウトに変換できます。 .container との違いは、コンテナの最大幅が常にデバイス画面の 100% に設定されることです。

.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。流式布局容器（.container-fluid），将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。与.container的区别就是将container的最大宽度始终设置为设备屏幕的100%。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4グリッドシステムの列は、1 から 12 までの値を指定することでその範囲を表します。たとえば、3 つの .col-xs-4 を使用して、3 つの等しい幅の列を作成できます。
「行」に含まれる「列」が12を超える場合、余分な「列」の要素はまとめて別の行に配置されます。

コードスニペットは次のとおりです:

<p class="container">
//将一行按照8:4分成两列
  <p class="row">
    <p class="col-md-8">.col-md-8</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//将一行三等分为三列
  <p class="row">
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//将一行等分为两列
  <p class="row">
    <p class="col-md-6">.col-md-6</p>
    <p class="col-md-6">.col-md-6</p>
  </p>
</p>

グリッドパラメーター

次の表から、Bootstrap のグリッドシステムがさまざまな画面デバイスでどのように動作するかを詳しく確認できます。

互換モードには下位互換性があります。例えば、.col-md-を使用した場合でも、大画面では中画面レイアウトで配置され、小画面や超小画面ではスタック方式で配置されます。 .col-xs- が設定されている場合、グリッドシステムは下位互換性があるため、それに設定されている組版レイアウトがすべてのデバイスに表示されます

グリッドレイアウトは左フローティングレイアウト方式を使用し、フローティングをクリアできます。クラス属性値を .clearfix ;

.col-md-offset-5 として定義して、グリッドの左 5 スペース .col-md-push-3 を設定します。これは、グリッドが右に 3 スペース移動することを意味します。 .col-md-pull-3 グリッドを変更して 3 スペース左に移動することを示します