Anonim

美しいWebサイトを作成するためにTwitterによって開発されたフレームワークであるBootstrapを聞いたことがないなら、あなたは見逃しています! Bootstrapを使用すると、CSS(Cascading Style Sheets)の知識がなくても、Webサイトを非常にすばやく簡単に設計できます。 Webのプログラミングに慣れていない場合、Bootstrapの仕組みを学習するためにCSSについて知る必要はありません。 必要なのは、単一のHTMLドキュメントだけです。 Bootstrapを見て、それが何であるか、どのように機能するか、構築するすべてのWebサイトに適しているかどうかを示します。

Bootstrap APIをHTMLファイルに挿入する

Bootstrapをメインプロジェクトファイルに挿入するためのオプションがいくつかあります。 最初のオプションは、必要なすべてのブートストラップファイルをプロジェクトに挿入することです。 これを行うには、パッケージをダウンロードしてプロジェクトフォルダーにアップロードします。 もちろん、プライマリBootstrap CSSファイルをドキュメントにリンクする必要があります。 Bootstrapの公式Webサイトには、これを行う方法に関する段階的なガイドがあります。

もう1つのオプションは、パッケージのダウンロードをスキップして、コンテンツ配信ネットワーク(CDN)を使用することです。 CDNを使用すると、プライマリブートストラップファイルをダウンロードせずにHTMLドキュメントにリンクできます。 もちろん、これはプロのウェブサイトにとって必ずしも良いことではありません。そのサーバーがダウンした場合、ビジネスやポートフォリオのページを離れて運命に追いつくのは速すぎません。 プロジェクトにファイルを置くのが最善ですが、学習の目的のために、CDNは問題なく動作します。

BootstrapをHTMLドキュメントに挿入するには、次のコードを HTMLドキュメントのタグ:

それらのリンクがそのheadタグに挿入されると、Bootstrapクラスの使用を開始する準備がすべて整うはずです。 ドキュメントは次のようになります。

ブートストラップとクラス

ブートストラップ要素はクラスに分類されます。クラスは、マークアップに挿入できる事前に記述されたCSSの束です。 マークアップにクラスを挿入するのは簡単です。使用するクラスの名前を知り、前の記事で説明したようにclass =” classname”値を使用してHTML要素の1つに適用するだけです。

難しいのは、それらのすべてがどのように連携して美しいものを作成するかを理解することです。 Bootstrapで利用可能なさまざまなクラスはすべて、公式ドキュメントから直接確認できます。 今、Bootstrapをマスターすることは別の話です。 それは私たちや他の誰かがあなたに教えることができるものではありません。 チュートリアルごとにチュートリアルを見ることができますが、フレームワークの使用に慣れるためには、多くの試行錯誤が伴います。 そして、それはあなた自身のプロジェクトでそれを実際に取得する必要があります。

そのことを念頭に置いて、Atomまたは他のテキストエディターを使用してコンピューターで独自のHTMLプロジェクトを開始し、HTMLクラスとCSSクラスの内容を確認してから、Bootstrapで遊んでみてください。 また、十分なマークアップを知っている場合は、テスト演習として独自のポートフォリオWebサイトを作成することもできます。

BootstrapはすべてのWebサイトで実行可能なオプションですか?

ブートストラップは優れたフレームワークですが、作成するすべてのWebサイトで実行可能なオプションですか? 開発者とプロジェクトの要件に本当に依存します。 多くのプロフェッショナルな環境では、使用しているテクノロジーを選択することはほとんどありません。これは主にプロジェクトマネージャー次第だからです。 プロジェクトマネージャーがBootstrapの使用を選択した場合、大量のカスタムCSSと組み合わせることもできます。 これが、一般的にあなたのウェブサイトをユニークで、Bootstrapを使用する他のウェブサイトとは異なるものにします。

個人的には、Bootstrapが すべての Webサイトに最適なオプションだとは思いません。 確かに、それはいくつかの近道を助けて提供することができますが、私は最終的に、CSSをゼロから設計することが、主にあなたが持っている制御のために最良のルートであるとわかりました。 ただし、Webプログラミングを始めたばかりの場合は、Bootstrapを使用することは悪くありませんが、キャリアに依存しないでください。

あなたが初心者開発者である場合、ポートフォリオのすべてのプロジェクトにBootstrapを使用しないでください。 APIに習熟しているかもしれませんが、CSSの使用方法を完全に知っているわけではありません。 とはいえ、ポートフォリオに両方を適切に混在させることは良いことです(または、Bootstrapを簡単にピックアップできるため、CSSのみを使用することもできます)。

閉鎖

これが、Bootstrapの概要です。 前述したように、独自のHTMLプロジェクトを開始し、さまざまなクラスのいくつかを要素に追加して、フレームワークで遊んでみることをお勧めします。 Bootstrapが提供するさまざまなコンポーネントのすべてを、説明とコード例とともにここで見つけることができます。

ブートストラップは本当にすてきなツールですが、それだけに頼らないことを忘れないでください! フレームワークに精通し、フレームワークの使い方を知っているのは良いことですが、CSSに飛び込んで、舞台裏で何が起こっているのかを本当に理解してください。 それだけでなく、CSSの確固たる知識はBootstrapを大いに称賛し、独自のカスタマイズで真にユニークで美しいWebサイトを作成できるようにします。

ブートストラップを使用して美しいWebサイトを作成する方法