ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 拡張チュートリアル ブートストラップ

JavaScript 拡張チュートリアル ブートストラップ

高洛峰
リリース: 2016-11-23 10:20:10
オリジナル
1009 人が閲覧しました

ブートストラップの概要
ブートストラップとは何ですか?
Bootstrap は、Web アプリケーションと Web サイトを迅速に開発するためのフロントエンド フレームワークです。ブートストラップは HTML、CSS、および JAVASCRIPT に基づいています。
歴史
Bootstrap は Twitter の Mark Otto と Jacob Thornton によって開発されました。 Bootstrap は、2011 年 8 月に GitHub でリリースされたオープンソース製品です。
なぜブートストラップを使用するのですか?
モバイル ファースト: Bootstrap 3 以降、フレームワークにはライブラリ全体にモバイル ファースト スタイルが含まれています。
ブラウザのサポート: すべての主要なブラウザがブートストラップをサポートしています。
Internet Explorer Firefox Opera Google Chrome Safari
始めるのは簡単: HTML と CSS の基本的な知識があれば、Bootstrap の学習を始めることができます。
レスポンシブデザイン: Bootstrap のレスポンシブ CSS は、デスクトップ、タブレット、携帯電話に適応できます。レスポンシブ デザインの詳細については、「ブートストラップ レスポンシブ デザイン」を参照してください。
レスポンシブ デザイン
開発者にインターフェイスを作成するためのシンプルで統合されたソリューションを提供します。
強力な組み込みコンポーネントが含まれており、カスタマイズが簡単です。
Webベースのカスタマイズも提供します。
オープンソースです。
Bootstrap パッケージの内容
基本構造: Bootstrap は、グリッド システム、リンク スタイル、背景を備えた基本構造を提供します。これについては、ブートストラップの基本構造セクションで詳しく説明します。
CSS: Bootstrap には、グローバル CSS 設定、基本的な HTML 要素スタイルの定義、拡張可能なクラス、および高度なグリッド システムの機能が付属しています。これについては、「ブートストラップ CSS」セクションで詳しく説明します。
コンポーネント: Bootstrap には、画像、ドロップダウン メニュー、ナビゲーション、アラート ボックス、ポップアップ ボックスなどを作成するための再利用可能なコンポーネントが十数個含まれています。これについては、「レイアウト コンポーネント」セクションで詳しく説明します。
JavaScript プラグイン: Bootstrap には、12 を超えるカスタム jQuery プラグインが含まれています。すべてのプラグインを直接含めることも、個別に含めることもできます。これについては、ブートストラップ プラグインのセクションで詳しく説明します。
カスタマイズ: Bootstrap コンポーネント、LESS 変数、jQuery プラグインをカスタマイズして、独自のバージョンを取得できます。
オンライン例
このサイトのブートストラップ チュートリアルには何百もの例が含まれています。
オンラインエディターを使用してオンラインでコードを編集し、実行ボタンをクリックして結果を確認できます。
ブートストラップの例

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小,查看响应式效果!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>学的不仅是技术,更是梦想!</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>学的不仅是技术,更是梦想!</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>学的不仅是技术,更是梦想!</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
    </div>
  </div></div>
ログイン後にコピー


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