Bootstrapをカスタマイズして自分のサイトを開発する6つの方法
5335 ワード
BootstrapというCSSフレームワークに対して、多くのプログラマーはjQueryを軽蔑するような軽蔑の態度を持っている.確かに、このフレームワークを使わなくても、手書きで書くか、JSフレームワークのテンプレートを借りて、同じようにページを書くことができます.ページの精良さ、二次開発ができるかどうか、主流のブラウザが完全に互換性があるかどうか、多重化できるかどうか、拡張できるかどうかは、開発者の個人能力にかかっています.もし一部の人が会社の高額の給料や甲の高額の報酬を持っていたら、ハンマーの商売をしていて、コードは多重化できなくて、拡張できなくて、二次開発できなくて、ブラウザは完全に互換性がなくて、彼はただとても速い胡七八が1セットのページを集めて、オンラインに対応して、それからスマートにBootstrapを軽蔑して、私はこのような人に2つの字を言うしかありません:ほほほ.
本題に戻ると、Bootstrapをカスタマイズする方法は、簡単から複雑まで、大体次のようなものがあります.前のいくつかの方法は簡単ですが、実際には十分です.また、本明細書に記載されているBootstrapのバージョンは実は少し乱れています.v 4版はAlphaの段階で、本明細書に記載されている公式サイトのページはv 3なので、ソースコードを話す場合はv 4を話しています.公式サイトのページはv 3を対象にしています.v 4が2016年以内または2017年第1四半期に正式に発表されると信じています.このとき、本明細書を読むのが正常です.今は間に合わせに見ましょう.
一、公式サイトからコードを写す
公式サイトのドキュメントから直接コードクリップを写し、必要なコンポーネントはcopyのコンポーネントのコードで、HTMLを少し修正して完成します.作成されたページは、約DEMO級か、企業のホームページサイト級です.
二、公式サイトを利用してコンポーネントを減算してカスタマイズする
ここではSassが分からないと仮定しているので、公式サイトのCustomize and download機能を利用してBootstrapをカスタマイズするしかありません.ここでカスタマイズは、コンポーネントの減算カスタマイズと変数の変更カスタマイズの2つに分けられます.
まずコンポーネントを減算カスタマイズすると、Common CSS、Components、JavaScript components、jQuery pluginsを減算し、ページの下の変数はすべてデフォルトを維持します.このカスタマイズは、CSSファイルとJSファイルのバイト数を減らすことを意味するカスタマイズ可能なアイテムがそれぞれ表す意味を理解する必要があります.
変数のカスタマイズを変更するには、これらの変数の値を理解するためにSassを学ぶ必要があります.しかし、Sassを把握している場合は、公式ページで変数を変更する必要はありません.非常に効果的ではありません.この第5節を見るだけです.
三、ネット上の優秀なテンプレートをセットする
インターネット上の優れたテンプレートを直接使用します.あなたがしばらく自分でテンプレートを作る能力がない时、インターネットを利用して优秀なテンプレートを探すのは良いアイデアで、GitHub、Googleの上でBootstrap templateを検索して多くの逸品があって、downが下りてきた后に、ブロック、コンポーネントを位置をずらして引っ越して、自分のために使う新しいページになりました.
四、またCSSファイルを作成してBootstrap或いはテンプレートを上書きするCSS声明
このカスタマイズ方式は、Bootstrapやテンプレートの関連ファイルを順番にロードした後、別のCSSファイルをロードすることです.この開発方式は、アーキテクチャの簡単なウェブサイトの開発を満たすことができます.Sassをマスターした後も、この方法でウェブサイトを開発することができます.ただし、明らかな欠点は、別のCSSファイルがより多くのHTTPリクエストを生成し、より多くのファイルがロードされていることであり、もちろん大手サイトが採用すべき方法ではありません.
五、Sassによるコンポーネントの削減及び変数値の修正
SassおよびコンストラクションツールGruntを使用するチュートリアルでは、Bootstrap v 4のコンストラクションを例にGruntの使用を練習してください.ここでは、SassとGruntを熟知していると仮定しているので、コンポーネントを削除し、変数値を変更するプロセスだけを説明します.
1、Sassによるコンポーネントの削減各種CSSコンポーネントを削除: CSSコンポーネントセットのJSコンポーネント、jQueryコンポーネントの削除:公式に推奨されているのはGruntですべてのJSコンポーネントを統合することです.もちろん、Gruntを学ぶ必要があります.Gruntを勉強したくない場合は、公式サイトのカスタマイズページを利用してカスタマイズすることもできます.
2、Sassで変数を修正する
1、どの変数を修正できますか?
公式サイトのCustomize and downloadでは、どの変数を修正できるかを明確に見ることができます.または、
2、変数名によって、私はどのように変数が指すCSS属性値を明らかにしますか?
方法1、字面から推測する.そうですね.変数名は具体的なクラス名や要素名ではなく、クラス名や要素名よりも具体的なので、良いアイデアだと思います.例えば
方法2、Bootstrapソースファイルのcustomizeから.min.jsファイルで変数名を検索します.例えば
3、Sassを利用して変数をリセットする方法:
Bootstrap公式案は
Bootstrap overrides Copy variables from
したがって、
変数の修正がOKになったら,Gruntを用いて生産環境に必要なcssとjsファイルを生成することができる.
六、自分でテンプレートを書く
Bootstrap利用者の究極の形態:自分でテンプレートを書くことができる.
多くの人がBootstrapを軽蔑している主な原因は、bsで作られたページを一目で見ることができ、bsで作られていることがわかります.だから、Bootstrapテンプレートであることが見えない能力が必要です.
優秀なテンプレートファイルから、テンプレートプロジェクトは次のいくつかのフォルダに分けることができます.私の例は参考にするだけで、標準ではありません.
boostrap-bsソースファイルを保存し、distフォルダ内のファイルはあなたが先にカスタマイズし、後にコンパイルしたcssとjsファイルであり、もちろんカスタマイズしないことを選択することもできますが、CSSファイルを別途書いてbsをカバーする声明を書くこともできます.数Kの体積を増やすことができますが、よりよく維持され、数Kの体積の増加は大きな問題ではありません.pages-あなたのテンプレートhtmlは、ページ名でファイルを分けます.js-あなたのテンプレートjsファイルは、モジュール別にファイルを分割し、commonフォルダで共通ファイルを置くことができます.css-あなたのテンプレートcssファイル、モジュールによってファイルを分けて、1つのcommonフォルダが公共のファイルを置くことができます.img-あなたのテンプレートに関連する画像は、モジュール分子フォルダによって、commonフォルダに共通ファイルを置くことができます.plugins-サードパーティ製プラグイン、コンポーネントのフォルダを格納し、内部にプラグイン名、コンポーネント名でフォルダに名前を付けます.
cssのカスタマイズについて強調しますが、カスタマイズはbs自体のcss変数値を変更する部分と、テンプレート専用のcssを書く部分の2つの部分に分かれています.実践から見ると、この2つの修正は同時に行わないで、まずテンプレート専用のcssだけを書いて、1、2ページを作って、自分のテンプレートが統一された合理的な風格を形成した後、bsのcss変数に対する修正をまとめて、それからbsのcss変数を変更することができます.
cssクラスのネーミングは、できるだけBEM仕様に従ってネーミングします.
bsのjsコンポーネントでは、bs自体のjsコンポーネントをできるだけ修正しないで、bsにないjsコンポーネントを補充するだけで、例えばより華やかな焦点図効果、よりきれいなオルガン効果などがあります.いくつかのbsの公式jsコンポーネントが確かに使いにくいか醜いと思っている場合は、加工する必要はありませんが、直接別のものを書くことができます.公式のコンポーネントは直接減らせばいいです.
私たちは自分でテンプレートを書くことができてトップページを作ることから始めて、トップページはトップナビゲーションを作ることから始めて、Bootstrapで作ったナビゲーションであることを見ることができなくて、次はBANNERモジュールを作ることができて、BANNERの下のナビゲーションモジュールを作ることができて、それから本文の第1スクリーン、第2スクリーンで、フッターモジュールまで.
例えばトップページはindexと名付けられています.html、上部ナビゲーションはheader要素を使用し、内部でコードを段階的に構築します.次にnav要素、次いでwrap要素、次いでfooter要素、最後にfixed要素(浮遊、ポップアップ層などに用いられる)について詳しくは述べない.
皆さんのご成功を祈ります.
本題に戻ると、Bootstrapをカスタマイズする方法は、簡単から複雑まで、大体次のようなものがあります.前のいくつかの方法は簡単ですが、実際には十分です.また、本明細書に記載されているBootstrapのバージョンは実は少し乱れています.v 4版はAlphaの段階で、本明細書に記載されている公式サイトのページはv 3なので、ソースコードを話す場合はv 4を話しています.公式サイトのページはv 3を対象にしています.v 4が2016年以内または2017年第1四半期に正式に発表されると信じています.このとき、本明細書を読むのが正常です.今は間に合わせに見ましょう.
一、公式サイトからコードを写す
公式サイトのドキュメントから直接コードクリップを写し、必要なコンポーネントはcopyのコンポーネントのコードで、HTMLを少し修正して完成します.作成されたページは、約DEMO級か、企業のホームページサイト級です.
二、公式サイトを利用してコンポーネントを減算してカスタマイズする
ここではSassが分からないと仮定しているので、公式サイトのCustomize and download機能を利用してBootstrapをカスタマイズするしかありません.ここでカスタマイズは、コンポーネントの減算カスタマイズと変数の変更カスタマイズの2つに分けられます.
まずコンポーネントを減算カスタマイズすると、Common CSS、Components、JavaScript components、jQuery pluginsを減算し、ページの下の変数はすべてデフォルトを維持します.このカスタマイズは、CSSファイルとJSファイルのバイト数を減らすことを意味するカスタマイズ可能なアイテムがそれぞれ表す意味を理解する必要があります.
変数のカスタマイズを変更するには、これらの変数の値を理解するためにSassを学ぶ必要があります.しかし、Sassを把握している場合は、公式ページで変数を変更する必要はありません.非常に効果的ではありません.この第5節を見るだけです.
三、ネット上の優秀なテンプレートをセットする
インターネット上の優れたテンプレートを直接使用します.あなたがしばらく自分でテンプレートを作る能力がない时、インターネットを利用して优秀なテンプレートを探すのは良いアイデアで、GitHub、Googleの上でBootstrap templateを検索して多くの逸品があって、downが下りてきた后に、ブロック、コンポーネントを位置をずらして引っ越して、自分のために使う新しいページになりました.
四、またCSSファイルを作成してBootstrap或いはテンプレートを上書きするCSS声明
このカスタマイズ方式は、Bootstrapやテンプレートの関連ファイルを順番にロードした後、別のCSSファイルをロードすることです.この開発方式は、アーキテクチャの簡単なウェブサイトの開発を満たすことができます.Sassをマスターした後も、この方法でウェブサイトを開発することができます.ただし、明らかな欠点は、別のCSSファイルがより多くのHTTPリクエストを生成し、より多くのファイルがロードされていることであり、もちろん大手サイトが採用すべき方法ではありません.
五、Sassによるコンポーネントの削減及び変数値の修正
SassおよびコンストラクションツールGruntを使用するチュートリアルでは、Bootstrap v 4のコンストラクションを例にGruntの使用を練習してください.ここでは、SassとGruntを熟知していると仮定しているので、コンポーネントを削除し、変数値を変更するプロセスだけを説明します.
1、Sassによるコンポーネントの削減
scss\bootstrap.scssファイルはBootstrapのメインファイルであり、削除したいコンポーネントを//で注釈すればよい.2、Sassで変数を修正する
1、どの変数を修正できますか?
公式サイトのCustomize and downloadでは、どの変数を修正できるかを明確に見ることができます.または、
scss\_variables.scssを開くと、すべての変数が表示されます.2、変数名によって、私はどのように変数が指すCSS属性値を明らかにしますか?
方法1、字面から推測する.そうですね.変数名は具体的なクラス名や要素名ではなく、クラス名や要素名よりも具体的なので、良いアイデアだと思います.例えば
@font-size-h6とはどういう意味ですか.推測するとh 6要素のフォントサイズに違いありませんが、実はそうです.次に、@font-size-h6のデフォルト値はceil((@font-size-base * 0.85))であり、すなわち@font-size-baseの値(14 px)に0.85を乗じて11.9 pxを得、ceil演算、すなわち上向きに整数計算して12 pxを得る.あなたのプロジェクトのh 6要素のフォントサイズを@font-size-baseの値(14 px)と同じに変更したい場合は、@font-size-baseに変更してカスタマイズが完了しても構いません.方法2、Bootstrapソースファイルのcustomizeから.min.jsファイルで変数名を検索します.例えば
@breadcrumb-padding-verticalは、それが表す属性値が分からない場合、customizeで使用できます.min.jsファイルで検索すると、2つの場所が見つかります.1つ目は.breadcrumb {padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;}で、2つ目は@breadcrumb-padding-vertical: 8px;です.breadcrumb要素の上下の内側間隔、デフォルト値は8 pxです.カスタマイズに成功しても、あなたが望む値に変更します.3、Sassを利用して変数をリセットする方法:
Bootstrap公式案は
@breadcrumb-padding-verticalを修正し、公式の注釈を見てみましょう.Bootstrap overrides Copy variables from
scss\_custom.scss to this file to override default values without modifying source files. したがって、
_variables.scssファイルからすべてのコンテンツを本ファイルにコピーし、変数のデフォルト値を複写することができます.変数の修正がOKになったら,Gruntを用いて生産環境に必要なcssとjsファイルを生成することができる.
六、自分でテンプレートを書く
Bootstrap利用者の究極の形態:自分でテンプレートを書くことができる.
多くの人がBootstrapを軽蔑している主な原因は、bsで作られたページを一目で見ることができ、bsで作られていることがわかります.だから、Bootstrapテンプレートであることが見えない能力が必要です.
優秀なテンプレートファイルから、テンプレートプロジェクトは次のいくつかのフォルダに分けることができます.私の例は参考にするだけで、標準ではありません.
boostrap-bsソースファイルを保存し、distフォルダ内のファイルはあなたが先にカスタマイズし、後にコンパイルしたcssとjsファイルであり、もちろんカスタマイズしないことを選択することもできますが、CSSファイルを別途書いてbsをカバーする声明を書くこともできます.数Kの体積を増やすことができますが、よりよく維持され、数Kの体積の増加は大きな問題ではありません.pages-あなたのテンプレートhtmlは、ページ名でファイルを分けます.js-あなたのテンプレートjsファイルは、モジュール別にファイルを分割し、commonフォルダで共通ファイルを置くことができます.css-あなたのテンプレートcssファイル、モジュールによってファイルを分けて、1つのcommonフォルダが公共のファイルを置くことができます.img-あなたのテンプレートに関連する画像は、モジュール分子フォルダによって、commonフォルダに共通ファイルを置くことができます.plugins-サードパーティ製プラグイン、コンポーネントのフォルダを格納し、内部にプラグイン名、コンポーネント名でフォルダに名前を付けます.
cssのカスタマイズについて強調しますが、カスタマイズはbs自体のcss変数値を変更する部分と、テンプレート専用のcssを書く部分の2つの部分に分かれています.実践から見ると、この2つの修正は同時に行わないで、まずテンプレート専用のcssだけを書いて、1、2ページを作って、自分のテンプレートが統一された合理的な風格を形成した後、bsのcss変数に対する修正をまとめて、それからbsのcss変数を変更することができます.
cssクラスのネーミングは、できるだけBEM仕様に従ってネーミングします.
bsのjsコンポーネントでは、bs自体のjsコンポーネントをできるだけ修正しないで、bsにないjsコンポーネントを補充するだけで、例えばより華やかな焦点図効果、よりきれいなオルガン効果などがあります.いくつかのbsの公式jsコンポーネントが確かに使いにくいか醜いと思っている場合は、加工する必要はありませんが、直接別のものを書くことができます.公式のコンポーネントは直接減らせばいいです.
私たちは自分でテンプレートを書くことができてトップページを作ることから始めて、トップページはトップナビゲーションを作ることから始めて、Bootstrapで作ったナビゲーションであることを見ることができなくて、次はBANNERモジュールを作ることができて、BANNERの下のナビゲーションモジュールを作ることができて、それから本文の第1スクリーン、第2スクリーンで、フッターモジュールまで.
例えばトップページはindexと名付けられています.html、上部ナビゲーションはheader要素を使用し、内部でコードを段階的に構築します.次にnav要素、次いでwrap要素、次いでfooter要素、最後にfixed要素(浮遊、ポップアップ層などに用いられる)について詳しくは述べない.
皆さんのご成功を祈ります.