Latest web development tutorials
×

Bootstrap コース

Bootstrap コース Bootstrap 簡単な紹介 Bootstrap 設置環境

Bootstrap CSS

Bootstrap CSS 概要 Bootstrap グリッド方式 Bootstrap 組版 Bootstrap コード Bootstrap テーブル Bootstrap フォーム Bootstrap プッシュボタン Bootstrap 絵 Bootstrap 補助クラス Bootstrap レスポンシブユーティリティ

Bootstrap レイアウトコンポーネント

Bootstrap フォントのアイコン Bootstrap ドロップダウンメニュー Bootstrap ボタングループ Bootstrap ボタンのドロップダウンメニュー Bootstrap 入力ボックスグループ Bootstrap ナビゲーション要素 Bootstrap ナビゲーションバー Bootstrap パン粉 Bootstrap ページング Bootstrap ラベル Bootstrap バッジ Bootstrap 大画面 Bootstrap ページタイトル Bootstrap サムネイル Bootstrap 警告 Bootstrap プログレスバー Bootstrap マルチメディアオブジェクト Bootstrap 一覧グループ Bootstrap パネル Bootstrap Wells

Bootstrap ウィジェット

Bootstrap プラグインの概要 Bootstrap 転移効果 Bootstrap モーダルボックス Bootstrap ドロップダウンメニュー Bootstrap スクロールモニター Bootstrap タブ Bootstrap ツールヒント Bootstrap ポップアップボックス Bootstrap 警告ボックス Bootstrap プッシュボタン Bootstrap 折り畳みます Bootstrap 回転木馬 Bootstrap 追加のナビゲーション

Bootstrap 他の

Bootstrap UI エディタ Bootstrap V2 コース Bootstrap HTML コーディング規約 Bootstrap CSS コーディング規約

ブートストラップのプロフィール

ブートストラップとは何ですか?

ブートストラップは、WebアプリケーションとWebサイトを迅速に開発するためのフロントエンドのフレームワークです。 ブートストラップは、HTML、CSS、JAVASCRIPTのに基づいています。

歴史

Twitterのマーク・オットージェイコブソーントン開発によってブートストラップ。 ブートストラップは、GitHubのオープンソース製品に公開された2011年8月です。

なぜブートストラップ?

  • モバイルファーストは:以降ブートストラップ3は、フレームワークスタイルのモバイルデバイスの優先順位の図書館を含んでいます。
  • ブラウザのサポート:すべての主要なブラウザはブートストラップをサポートしています。

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • 限り、あなたは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>

»をお試しください

それがどのように動作するか確認するために、「お試し」ボタンをクリックします。