ブートストラップのプロフィール
ブートストラップとは何ですか?
ブートストラップは、WebアプリケーションとWebサイトを迅速に開発するためのフロントエンドのフレームワークです。 ブートストラップは、HTML、CSS、JAVASCRIPTのに基づいています。
歴史
Twitterのマーク・オットーとジェイコブソーントン開発によってブートストラップ。 ブートストラップは、GitHubのオープンソース製品に公開された2011年8月です。
なぜブートストラップ?
- モバイルファーストは:以降ブートストラップ3は、フレームワークスタイルのモバイルデバイスの優先順位の図書館を含んでいます。
- ブラウザのサポート:すべての主要なブラウザはブートストラップをサポートしています。
- 限り、あなたはHTMLとCSSの基本的な知識を持っているとして、あなたはブートストラップを学ぶために始めることができます簡単に使用します 。
- レスポンシブデザイン:適応デスクトップ、タブレットや携帯電話の可能な応答CSSブートストラップ。レスポンシブなデザイン、利用可能な詳細については、 ブートストラップ応答デザイン 。
- また開発者は、シンプルなインタフェースが統一されたソリューションを提供して作成します。
- これは、カスタマイズが容易強力な組み込みコンポーネントが含まれています。
- また、Webベースのカスタマイズを提供します。
- これはオープンソースです。
ブートストラップパッケージの内容
- 基本的な構造は:ブートストラップは、グリッド・システムとのリンクスタイルの背景の基本的な構造を提供します。これは、塩基性部分ブートストラップ詳細に説明します。
- CSS:基本的なHTML要素のスタイル、スケーラブルクラス、および高度なグリッドシステムを定義し、グローバルなCSSの設定: ブートストラップは、以下の機能が付属しています。このセクションでは、詳細にブートストラップCSSを説明します。
- コンポーネント:ブートストラップは、というようにドロップダウンメニュー、ナビゲーション、警告ボックスのポップアップボックス、および、画像を作成するためのダース再利用可能なコンポーネントが含まれています。これは、具体的に部品のレイアウトを説明します。
- JavaScriptのウィジェット:ブートストラップは、ダースのカスタムjQueryプラグインが含まれています。あなたはすべてのプラグインを含むことができ、これらのプラグインは、個別に含めることができます。 これは、プラグ部ブートストラップ詳細に説明します。
- カスタマイズ:あなたがLESS変数とjQueryプラグインを独自のバージョンを取得するには、ブートストラップのコンポーネントをカスタマイズすることができます。
オンラインの例
ブートストラップチュートリアルサイトでは、数百の例が含まれています。
あなたは私たちのオンラインエディタオンラインエディタのコードを使用し、結果を表示するには、[実行]ボタンをクリックすることができます。
ブートストラップの例
<DIV クラス = "コンテナ">
<DIV クラス = "ジャンボトロン">
<H1> 私の最初のブートストラップページ </ H1>
<P> 応答効果を表示するには、ウィンドウのサイズをリセットします! </ P>
</ DIV>
<DIV クラス = "行">
<DIV クラス= "COL-SM-4 ">
<H3>コラム1 </ H3 >
<P> 学習は、技術だけでなく、夢だけではありません! </ P>
<P> もう一度Niubi夢をするだけでなく、スティック吸盤のような方法で、あなたを与えます! </ P>
</ DIV>
<DIV クラス= "COL-SM-4 ">
<H3>コラム2 </ H3 >
<P> 学習は、技術だけでなく、夢だけではありません! </ P>
<P> もう一度Niubi夢をするだけでなく、スティック吸盤のような方法で、あなたを与えます! </ P>
</ DIV>
<DIV クラス= "COL-SM-4 ">
<H3>コラム3 </ H3 >
<P> 学習は、技術だけでなく、夢だけではありません! </ P>
<P> もう一度Niubi夢をするだけでなく、スティック吸盤のような方法で、あなたを与えます! </ P>
</ DIV>
</ DIV>
</ DIV>
»をお試しください
より多くの例
例2ブートストラップ
<DIV > クラス = "テーブル応答性」
<表 クラス= "表table-ストライプの表は、 -bordered">
<THEAD>
<TR>
<Thの>#</目>
<Thの>名前</目>
<Thの>ストリート</目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 1 </ TD>
<TD>アンナ恐ろしい</ TD >
<TD>ブルームストリート</ TD >
</ TR>
<TR>
<TD> 2 </ TD>
<TD>デビーダラス</ TD >
<TD>ヒューストン・ストリート</ TD >
</ TR>
<TR>
<TD> 3 </ TD>
<TD>ジョン・ドウ</ TD >
<TD>マディソンストリート</ TD >
</ TR>
</ TBODY>
</表>
</ DIV>
»をお試しください
それがどのように動作するか確認するために、「お試し」ボタンをクリックします。