ホームページ > ウェブフロントエンド > jsチュートリアル > BootStrap 学習の旅を始めましょう_JavaScript スキル

BootStrap 学習の旅を始めましょう_JavaScript スキル

WBOY
リリース: 2016-05-16 15:02:24
オリジナル
1562 人が閲覧しました

この記事では、Bootstrap が広く普及している 11 の理由をまとめています。 Twitter Bootstrap をまだ使用したことがない場合は、ぜひ試してみることをお勧めします。私がそれを知ったのは最近のことですが、2 日前に Microsoft がリリースした VS2013 の正式版に、BootStrap 3.0 バージョンが追加されました。Microsoft も BootStrap の威力を認識しており、非常に優れていたので使用しました。それも学ぶために。ここでは VS2013 更新プログラムについて簡単に説明します。興味がある場合は、Visual Studio 2013 更新プログラムの内容の紹介をご覧ください。

diaos の間でブートストラップが人気がある理由は何ですか?

1. 時間を節約します

Bootstrap を使用すると、より多くの時間をかけてお金を稼ぐことができます。 Bootstrap ライブラリには、Web サイトに活気を与えることができる既製のコード スニペットが多数含まれています。 Web 開発者はコーディングに時間と労力を費やす必要がなくなり、適切なコードを見つけて適切な場所に挿入するだけで済みます。また、CSSはLESSで記述されており、多くのスタイルやデザインがデザインされています。

2. カスタマイズ

Bootstrap の重要な側面は、それを独自のものにできることです。フレームワークの必要な部分を保持し、不要な部分を破棄できます。 Bootstrap を全体として使用すると、開発するプロジェクトをニーズに応じて調整できます。

3. 設計要素

グリッドシステム

ページをレイアウトする場合、多くの場合、適切なグリッドが必要になります。プラットフォームのグリッドを使用する必要はありませんが、使用すると作業がはるかに簡単になります。デフォルト モードでは、プラットフォームは 16 列のグリッド (幅 960 ピクセル) を提供します。各列の幅は 40 ピクセルで、各列の左右に 10 ピクセルの隙間があり、各グリッドの最も外側に 20 ピクセルのマージンがあります。必要に応じて、行数とギャップ サイズを変更できます。スタイルはすでに開発されているので、開発者は HTML 内の適切な場所に適切なコードを挿入するだけで済みます。

少ない

LESS は開発サイクルで広く使用されています。これは CSS に基づいた高級言語であり、その目的は CSS 開発をより柔軟かつ強力にすることです。 LESS のミックスインと CSS 操作を使用してインライン グリッドをカスタマイズできます。 Bootstrap は、多数の一般的な CSS3 機能を使用して、すべての Web サイトに統一されたブラウジング エクスペリエンスを提供します。

JavaScript

Bootstrap は、基本的なアーキテクチャとスタイルを超えた JavaScript ライブラリを提供します。 Bootstrap を通じて、開発者はウィンドウ警告ボックス、ツールヒント ボックス、スクロール バー、ボタンなどを簡単に操作できます。 Bootstrap の最も優れた点は、スクリプトの作成について心配する必要がなくなることです。

4. 一貫性

Twitter が最初にこのツールを開発した主な理由は、異なるブラウザ間での開発者のプロジェクト間の不一致でした。これにより、フロントエンド開発とエンド ユーザー インターフェイスの間で多くの問題が発生します。ブートストラップは、さまざまなプラットフォーム上でインターフェイスの均一性を保証します。 IE、Chrome、Firefox では、統一されたインターフェイスが表示されます。

5. 常に最新情報を入手してください

jQuery の UI を例に挙げます。UI は 1 年に 1 回更新されます。 Bootstrap は常に改善されており、より定期的で持続可能です。 Web 開発者が新しい問題を発見すると、Bootstrap チームはすぐに問題の修正に取り組みます。

6. 統合が簡単

完成した Web サイトをさらに改善したい場合は、Bootstrap が役立ちます。たとえば、自分で作成したテーブル スタイルを統一して使用したい場合は、そのスタイルを CSS スタイル ファイルにコピーする必要があります。 Bootstrap は独自のスタイルをすぐに削除します。ここでファイルを Twitter に関連付ける必要があります。統合プロセスは非常にシンプル、便利、そして高速です。完成したら、コアコンテンツにデザインを適用できます。

7. レスポンシブ

Bootstrap は応答性の高いフレームワークです。開発作業がラップトップから iPad に移行される場合でも、iPad から Mac に移行される場合でも、作業について心配する必要はありません。なぜなら、Bootstrap は、超高速かつ効率的に異なるプラットフォーム間の違いに適応できるからです。

8. 将来のテクノロジーとの互換性

Bootstrap には、デザインの未来と呼ばれる HTML5 や CSS3 などの特別な要素が多数含まれています。このフレームワークは将来を念頭に置いて設計および開発されているため、今後数年間で Web 開発者の参照標準となる可能性があります。

9. 競争力

Bootstrap だけがフロントエンド開発フレームワークではなく、JQuery UI、HTML5 Boilerplate などもあります。しかし、Bootstrap にとって、本当の競争相手は Zurb Foundation です。 Bootstrap 2 では、Foundation が長い時間をかけて作成した新しいツールセットが追加されています。 Bootstrap には多数のサードパーティのプラグイン、テーマ、機能、コードなどが含まれていますが、Foundation にはこれらがありません。

10. 詳細ドキュメント

Bootstrap のドキュメントは優れています。ほとんどの新しいプラットフォームには適切なドキュメントがないことが多く、Bootstrap のドキュメントは作業を開始するのに大いに役立ちます。必要な情報はすべてドキュメントから見つけることができます。

11. 特典ボス

Learning Bootstrap will not take you too much time, because it encapsulates all modular methods and architecture. From the boss's point of view, if you provide the Bootstrap framework for web developers, then they will save more learning time and get back to work quickly. This will bring better benefits to the bosses.

If you feel that Bootstrap is really helpful to you, you can visit twitter.github.com/bootstrap/ to view the framework. You can also download a compiled version, or get the Bootstrap source files including CSS and JavaScript documentation.

Visual experience

The first thing you see is the Chinese official website. If you look at it carefully, it actually has a very detailed explanation.

Next click on http://v3.bootcss.com/bootstrap3 Chinese documentation.

Continue to read belowhttp://expo.bootcss.com/There are many website examples that have been applied.

After seeing so many examples and such an excellent front-end architecture, I actually didn’t know about it, and so many websites have already used it. I can’t wait to start my learning journey.

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート