bootstrapはmixinライブラリとしての応用モード

Bootstrapは非常に流行しているフロントエンドcssフレームワークとして,非常に多くの応用が得られている.一般的な使い方は直接download bootstrapです.cssは、cssファイルとしてhtmlのmarkupに導入する、定義されたclassを直接参照するという使用パターンに問題があります.次のシーンを考慮すると、login formを設計する必要があります.フォームにbuttonがあります.通常、html markupで使用します.btn,.btn-primaryプリセットclass.大きな問題はありませんが、html自体は表意性がありません.bootstrapで定義されたクラスを使用すると、htmlで使用しないことができます.btn,.btn-primaryがbuttonのstyleを定義するには、どんな方法がありますか?本文は1つの構想を提供して、この需要を満たすだけではなくて、またついでに生産のcssファイルのサイズを減らすことができます.
1.bootstrapをダウンロードし、解凍した後、lessディレクトリの内容を直接提出し、その他のすべての削除は、ディレクトリがbootstrapと名付けられていると仮定します(他のbootstrap以外のコード部分が削除されていることに注意してください)

bootstrap/

├── alerts.less 

├── badges.less 

├── bootstrap.less 

├── breadcrumbs.less 

├── button-groups.less 

├── buttons.less 

├── carousel.less 

└── ...               

2.上記bootstrap sourceを自分のプロジェクトに入れる

my-project/ 

└── assets/ 

    └── less 

    ├── bootstrap 

    └── style.less

3.bootstrapをmixinライブラリとして使用する予定であり、すべてのコンテンツを本番cssファイルに出力するつもりはないため、bootstrapソースファイルを任意に変更できます.さらにimport as referenceを使用してimportbootstrapを作成します.定義されたすべてのclassはmixinとして自分のプロジェクトに参照できますが、最終的な本番ファイルには出力されません.
4.style.lessにbootstrapを導入する.less

@import "bootstrap/bootstrap.less"

5.html markupでbootstrpのclassをすべて取り除くことができ、代わりに意味のあるhtml classを取り除くことができます!
例えばbootstrapは通常直接参照する.cssの場合のmarkupは:

<div class="well well-lg"> 

    <p>If you'd like to get more information, join our mailing     list</p> 

    <a href="/sign-up" class="btn btn-success">Sign up now!</a> </div> 

本明細書の方法を使用すると、適用モードは次のようになります.

// style.less 

.sign-up { .well; .well-lg; a { .btn; .btn-success; } } 



<div class="sign-up"> 

<p>If you'd like to get more information, join our mailing list</p> <a href="/sign-up">Sign up now!</a> 

</div>