BootStrap の基本スタイルの紹介

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

1. 準備

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

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

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

<meta name="viewport" content="width=device-width,Initial-scale=1">

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% に設定されることです。 </p><ul class=" list-paddingleft-2"><li><p><code>.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 スペース左に移動することを示します

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

通过栅格系统的布局方式，可以很简洁的设计出自己需要的响应式布局排版，能够在不同设备上达到不同的显示效果。

通过下面的实例说明栅格布局在手机、平板、电脑设备上的动态布局的强大：

<p class="container">
 <p class="row">
   <p class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</p>
   <p class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</p>
 </p>
</p>

其中第三行的class属性值表示的意思是，在超小屏幕（<768px）上显示为12个栅格，在小屏幕（>768px）上显示为6个栅格，在中等屏幕（>=992px）上显示的为8个栅格，大屏幕上未定义，根据栅格的向后兼容，在大屏幕上显示的为中等屏幕的布局。

媒体查询

很容易理解，如下代码：

-width: @screen-sm--width: @screen-md--width: @screen-lg-min) { ... }

e.g:
p{
/* 中等屏幕（桌面显示器，大于等于 992px） 此时执行{}里面的样式*/

@media (min-width: @screen-md-min) { width:100% }

/* 大屏幕（大桌面显示器，大于等于 1200px） 此时执行{}里面的样式*/

@media (min-width: @screen-lg-min) { width:80%}}

 2、表格的常用样式

基础样式.table

带条纹区分行的表格.table-striped

带边框的表格.table-border

带鼠标悬停是区分的表格.table-hover

 

表格行显示的样式，通过设置tr的class属性值来控制，常用属性值有.info/.success/.warning/.active/.danger

 

以上がBootStrap の基本スタイルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。