ブートストラップのカスタマイズ (2) あまり基本的でない syntax_html/css_WEB-ITnose

数日前、less について調べて一日を費やしましたが、最近は他のことをいじっていて、プロジェクトも進行中です。今日は、less の基本的な構文を整理するために時間を割きます。 「全員で共有」で実際の経験を共有します。

この記事では、less の基本的な構文から始めて、ブートストラップの論理構造を使用して、less の構文を整理し、将来の実戦での迅速な開発を容易にします。

1. 変数

多くのバックグラウンド編集構文と同様に、less にも独自の変数がありますが、less の変数はより正確には定数であり、一度割り当てられると変更されることはありません。

@font-size：14px;

p{font-size:@font-size}

-->p{font-size:14px}

前に述べたように、ブートストラップソースコード このファイルはすべての変数を定義しており、他のコンポーネントに対応するlessファイルはそれらで定義された変数を使用し、一元的に管理されます。

variables.less は以下のようになります。ブートストラップを単純にカスタマイズしたい場合は、いくつかの変数定義を変更するだけです。

2. 注釈

なしの注釈は、多くのバックエンド言語と同じです。

行コメント: //xxxx

ブロックコメント: /*xxxx

ブートストラップはこれを最大限に活用します。 bootstrap.less のソース コードを見てください。

前に述べたように、ブートストラップ ファイルはすべてのlessファイルを導入し、最終的にこのファイルを直接コンパイルします。

ソース コードを見ると、最初の参照が variables.less であり、これがすべての変数の定義であることがわかります。

次に、mixins.less が導入され、mixins.less は後のコンポーネントlessで使用されるすべてのミキシング関数定義をインポートします。

これは、C# などのバックエンド言語が最初にクラス ライブラリをインポートすることに相当します。

4. ミックス

.border{

border:1px ソリッドソリッド;

}

.header{

height:200px;

.border;

}

--> .header{

、境界線: 1px ソリッドソリッド; 持つこと- 持つこと、あること、存在すること、存在すること、存在すること、存在すること、'-'-スルースルーオーバースルー--、。

5. ネストされた

.header{

xxx;

.header-body{

xxx2;

}

& :hover{

xxx3;

}

}

-->

.header{xxx}

.header .header-body{xxx1}

.header .header-footer{xxx2}

.header:hover{xxx3}

賢い人ならおそらくできるでしょう「&」の役割を参照してください。& は親セレクターを表し、jquery の .parent() メソッドに相当します。

ネストはブートストラップのどこにでも見られます。以下は .btn ボタン スタイルの例です。

5. メディア クエリ

Bootstrap が非常に成功しているのは、メディア クエリと切り離せないレスポンスのサポートが主な理由です。

@media(min-width>768px){

ssss;

}

@media(min-width>970px){

ssss;

}

grid.less 応答ブレンドのプロパティも画面ごとに異なります。

下の写真に示すように。

6. 関数

他のプログラミング言語と同様に、less にも独自の関数ライブラリがあります。

例:

darken(@color,@amout)//色の明るさを特定の値だけ下げる

パラメータ:

@color: カラーオブジェクト (カラーオブジェクト)

@amount: パーセント0-100%

戻り値: Color(color)

たとえば、ブートストラップのデフォルトのリンクホバースタイルでは、明るさが 15% 減少します。

写真の通り。

7. 操作

任意の数値、色、変数を操作できます。以下に 2 つの例を示します:

@base: 5%;

@filler: @base * 2;//Multiplication

@other: @base + @filler;//Addition

color: #888 / 4 ;/ /Division

background-color: @base-color + #111;

height: 100% / 2 + @filler;//操作が少ないことのもう一つの特徴は、ユニットを自動的に実行できることです。これは多くのバックエンド プログラミング言語にはない機能であり、賞賛に値します。

@var: 1px + 5;

この例では、Less は最終出力結果でこの単位を使用します - 6px

ブートストラップの典型的なアプリケーションは、さまざまな画面端末デバイスの幅が定義された幅に等しいことです。 width + グリッド フロー幅。このグリッド フロー幅は左右のパディングとして使用されます。

8. 名前空間

#bundle {

.button {

display: block; border: 1px plain black; &:hover { background-color: white }

}

。 tab { ... }

.quote { ... }

}

今度は #header a に .button クラスを混ぜたいと思います。

私が前に述べたことを混ぜることを考えた生徒もいますが、これには名前空間の問題が関係します。これは、C# などの言語ライブラリのメソッドと同じです。現時点では、同じメソッドが 2 つのクラス ライブラリで定義されている可能性があります。名前空間によって区別する必要があります。これは Java パッケージに似ています。

さて、現時点ではこのように使用する必要があります。

#header a {

color: orange;

#bundle > .button;

}

9. 言語のメンバー変数に相当します。 C# やローカル変数 、そのような言語に精通している場合は、この知識ポイントをスキップできます。

@var: red;

#page {

@var:white;

ブートストラップでよく使われるポイントはおそらく 1 ～ 7 ポイントで、最後の 2 ポイントは少し役に立ちません。

もちろん、これらの 9 つのポイントは、less の最も基本的な構文にすぎません。これらを使用してより良いブートストラップ テーマをカスタマイズしたい場合は、それだけでは十分ではありませんが、単純な基本的な変更は簡単に行うことができます。

夜に運動するのは少し大変です、天気はとても暑いです、そしてここまで起きていて少し疲れているので、いくつかの例は公式の例を使用しています、申し訳ありません。

みんなが幸せに遊び、幸せに学べることを願っています。

次の記事ではlessのより高度な構文を説明しますので、お楽しみに

この記事を転載する場合は出典を明記してください