JavaWEB開発05_Bootstrap

最後のレッスン内容：
何JQ：書き込みが少なく、より書き込み少ないコードを実行し、より多くのJavaScriptライブラリを行います

基本セレクター：

IDセレクター：#ID名

クラスセレクタ：クラス名

要素セレクタ：要素の名前

ワイルドカードセレクター：*ページ上のすべての要素を見つけます

セレクタ群：セレクタ、セレクタ2 [セレクタ1、セレクタ2]

レベルセレクター：

子孫セレクタ：セレクタ1セレクタ2 1つの選択次のセレクタのすべての2人の息子を見つけるために

選択肢の子要素：見つけるために1> 2セレクタを選択し、すべての子が息子をノードということです

隣接兄弟セレクタ：セレクタセレクタ1 + 2次弟に見つけるために

兄弟セレクタ：セレクタ1セレクタ2は、すべての兄を探します

（：）（$（ "div要素"）の兄弟、すべての兄弟を検索します。）

属性セレクタ：

选择器 div
选择器[title]
选择器[title='test']
选择器[title='test'][style]

基本フィルタ：選択：フィルタ$（ "div要素：第一"）

：まず：最初の要素を識別するために

：最後は最後の要素を見つけます

：さえも、インデックスを見つけます

：奇数は奇数見つけるために

：Gtの（インデックス）より大きい、より大きい

：以下のLtの（インデックス）

：式（インデックス）に等しいです

フォームセレクター：

：全てのエントリ、テキストエリア選択ボタンを識別するための入力

：パスワード

：テキスト

：ラジオ

フィルターフォームオブジェクトのプロパティ

：選択しました

：チェックします

一般的な機能：

プロパティの小道具（）プロパティ

あなたが取得されたパラメータを渡す場合

小道具（ "SRC"、 "../ IMG / 1.JPG"）;

画像のパス

ATTR：操作はいくつかのカスタムプロパティ<IMG ABC = '123' />

小道具：要素の固有の特性を操作するために使用通常、あなたがプロパティを操作するために小道具を使用することをお勧めします

CSS（）; CSSスタイルの変更

addClass（）：クラスのスタイルを追加します

removeClass（）：削除

ぼかし：バインディングを失うフォーカス

焦点：バインディングのgetフォーカスイベント

クリックしてください：

DBLCLICK

変更

追記：彼の息子に追加

appendTo：誰かの家に自分自身を追加します

プリペンド：自分の子ノードの前に子ノードを追加します

後：彼の背中に弟を追加

前：自分の目の前で兄を追加

$（ "オブジェクトの配列"）.each（機能（インデックス、データ））

$ .each（編曲、機能（インデックス、データ））

フォームバリデーションケース

テクニカル分析

トリガー：トリガーイベントが、同様のビューは、このブラウザのデフォルト動作の入力ボックスにカーソルを移動し実行します
triggerHandler：イベントに対応するだけでのみトリガ機能
（）であります

ステップ解析

まず必要なの、小さな赤いドットを追加するために、尾を追加
ユーザーが入力した情報を取得し、対応するチェックを行います
イベント：焦点は、キーリフト、フォーカスを失いました
イベントフォームの送信

コードの実装

jQueryの部分ページ・リフレッシュを使用して要求を送信します

データ交換フォーマット：

JSON

XML

JSONとは何ですか
JSON（JavaScriptのオブジェクト表記）は、軽量のデータ交換フォーマットです。それが基づいているECMAScriptのプロモーターを設定します。テキスト形式の言語の完全に独立してJSONでなく、（を含むCの家族の習慣に似て使用される言語C、C ++、C＃、Javaのは、JavaScript、Perlの、パイソンなど、）。これらのプロパティは、JSONの理想的なデータ交換言語作ります。読み込みと書き込み、だけでなく、簡単にマシンを生成し、解析するための簡単な（一般的にネットワークの伝送速度を向上させるために使用されます）。

JSON形式

JSONオブジェクト

{ key1:value}   
{"username":"zhangsan","password":"123"}

JSON配列

[{ key1:value},{ key1:value},{ key1:value}]

使用ブートストラップが応答ページを開発します

要求分析

応答ページを開発。彼はユーザーエクスペリエンスを強化するために、さまざまなデバイス上で正しく表示されることができるようになりましょう

テクニカル分析

BootStap概要

ブートストラップとは何ですか
役割は何であるブートストラップ
- 開発者の生産性を向上させることができ、コピー＆ペースト

応答ページとは何ですか
- ユーザーの利便性を向上させる、異なるディスプレイ解像度の異なるスタイルに適応

中国のネットワークのブートストラップ
- http://www.bootcss.com
ダウンロードブートストラップ
ブートストラップ構造
- グローバルCSS
  - ブートストラップin'veは、CSSスタイルシートのセットを定義し
- パッケージ
  - ブートストラップ定義されたボタンのセット、ナビゲーションおよび他の成分
- JSプラグイン
  - JSブートストラップがデフォルトによる効果の様々な構造を有するプラグインのセットを定義します

のスターターブートストラップ

ヘッダファイルの導入に関連します

        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="../css/bootstrap.css" />
        
        <!--需要引入JQuery-->
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script type="text/javascript" src="../js/bootstrap.js" ></script>
        
        <meta name="viewport" content="width=device-width, initial-scale=1">

ブートストラップレイアウトコンテナ

.container レイアウトに応じて、容器を固定して支持するためのクラス幅。

<div class="container">
  ...
</div>

.container-fluid クラスの幅の100％は、容器の全体のビューポート（ビューポート）を占めます。

<div class="container-fluid">
  ...
</div>

拡張チェックアウトフォーム：

トリガー：トリガーブラウザのデフォルトの動作

triggerHandler：トリガーされません。

ある：裁判官

見つける：検索

黄李：

軽量のデータ交換フォーマット：JSONは何

JSON对象：{ "ユーザ名"： "zhangsan"}

JSON数组：[{ "ユーザ名"： "zhangsan"}、{ "ユーザ名"： "zhangsan"}、{ "ユーザ名"： "zhangsan"}]

AJAX非同期要求：

同期および非同期

行

ブートストラップグリッドシステムは動作します：
- 「行（行）」に含まれなければならない .container （固定幅）または .container-fluid （幅の100％）（aligment）に適した構成を付与するために、補体（パディング）。
- 「ライン（行）」水平方向のグループ「の欄（カラム）」を作成することによって。
- コンテンツは、「カラム（欄）」、及び線としてのみ「の列（カラム）」（行）「直接の子要素に格納されるべきです。
- 同様に .row して .col-xs-4 、この事前に定義されたクラスはすぐにグリッドレイアウトを作成するために使用することができます。ソースで定義されたミックスインのブートストラップは、意味的なレイアウトを作成するために使用することができます。
- 「カラム（欄）」によって設定 padding カラムとカラムの間の間隔（樋）を作成し、プロパティを。提供することにより、 .row 負の値を設定する要素 margin のために相殺するために、 .container 要素の集合を padding、それが間接的に「ライン（行）」に含まれる「カラム（欄）は、」によってオフセットpadding

ブートストラップグリッドシステム
- 応答デザイン：このデザインは、メディアに依存しているクエリCSS3
- グリッドのスタイル：
  - 1200スタイルよりも解像度の大きいを使用してLG電子装置
  - デバイスの解像度は、使用992 <スタイル1200、MDよりも大きいです
  - デバイスの解像度は、使用して768 <992 SMのスタイルよりも大きく、
  - スタイルXSを使用してデバイスの解像度未満768
ブートストラップグローバルCSS
- これは、CSSのセットを定義します
  - ページ要素で定義されています
  - リスト要素、フォーム、ボタン、画像...

ステップ解析

コードの実装

使用ブートストラップがホームのレイアウト

要求分析

私たちのホームを最適化するために、ブートストラップの使用

テクニカル分析

ステップ解析

新しいHTMLページを作成します。ブートストラップは、JSとCSSの導入に関連します

事業部全体を定義し、全体を8つのセクションに分かれているのdiv

ディスプレイの完全な内容の部分も

コードの実装

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            准备工作:
            <meta name='viewport'>
            1.导入bootstrap css文件
            2.导入JQuery
            3.bootstrap.js
            
            4.写一个div  class = container 支持响应式的布局容器
            
        -->
        <link rel="stylesheet" href="../css/bootstrap.min.css">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--
            
        jQuery文件。务必在bootstrap.min.js 之前引入
         -->
        <script src="../js/jquery-1.11.0.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="../js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">

            <div class="row">
                <div class="col-md-4">
                    <img src="../img/logo2.png" />
                </div>
                <div class="col-md-4 hidden-xs">
                    <img src="../img/header.png" />
                </div>
                <div class="col-md-4">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <!--菜单-->
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-inverse" role="navigation">
                        <div class="container-fluid">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button>
                                <a class="navbar-brand" href="#">首页</a>
                            </div>

                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li class="active">
                                        <a href="#">手机数码</a>
                                    </li>
                                    <li>
                                        <a href="#">鞋靴箱包</a>
                                    </li>
                                    <li>
                                        <a href="#">电脑办公</a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分类 <span class="caret"></span></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#">手机数码</a>
                                            </li>
                                            <li>
                                                <a href="#">鞋靴箱包</a>
                                            </li>
                                            <li>
                                                <a href="#">电脑办公</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#">Separated link</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#">One more separated link</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <form class="navbar-form navbar-right" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="请输入要搜索的商品">
                                    </div>
                                    <button type="submit" class="btn btn-default">搜索</button>
                                </form>

                            </div>
                            <!-- /.navbar-collapse -->
                        </div>
                        <!-- /.container-fluid -->
                    </nav>
                </div>
            </div>

            <div>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../img/1.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="../img/2.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="../img/3.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
   
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

                
                
            </div>
            
            <!--最新商品这里-->
            <div class="row">
                <div class="col-md-12">
                    <h3>最新商品<img src="../images/title2.jpg"/></h3>
                </div>
            </div>
            
            <!--商品部分 -->
            <div class="row">
                <!--左边div-->
                <div class="col-md-2 hidden-sm hidden-xs">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%" />
                </div>
                <!--右边div-->    
                <div class="col-md-10">
                    <!--上面部分-->
                    <div class="row">
                        <!--中等广告图-->
                        <div class="col-md-6">
                            <img src="../products/hao/middle01.jpg" width="100%" />
                        </div>
                        
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                    </div>
                    <!--下面部分-->
                    <div class="row">
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12">
                    <img src="../products/hao/ad.jpg" width="100%" />
                </div>
            </div>
            
            
            
            
            <!--最新商品这里-->
            <div class="row">
                <div class="col-md-12">
                    <h3>最新商品<img src="../images/title2.jpg"/></h3>
                </div>
            </div>
            
            <!--商品部分 -->
            <div class="row">
                <!--左边div-->
                <div class="col-md-2 hidden-sm hidden-xs">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%" />
                </div>
                <!--右边div-->    
                <div class="col-md-10">
                    <!--上面部分-->
                    <div class="row">
                        <!--中等广告图-->
                        <div class="col-md-6">
                            <img src="../products/hao/middle01.jpg" width="100%" />
                        </div>
                        
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                    </div>
                    <!--下面部分-->
                    <div class="row">
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            
            <!--页脚广告-->
            <div>
                <img src="../image/footer.jpg" width="100%" />
            </div>
            <!--网站声明-->
            <div style="text-align: center;">
                <a href="http://www.itheima.com">关于我们</a>    
                    <a href="http://www.itheima.com">联系我们</a>    
                    <a href="http://www.itheima.com">招贤纳士</a>    
                    <a href="http://www.itheima.com">法律声明</a>    
                    <a href="http://www.itheima.com">友情链接</a>    
                    <a href="http://www.itheima.com">支付方式</a>    
                    <a href="http://www.itheima.com">配送方式</a>    
                    <a href="http://www.itheima.com">服务声明</a>    
                    <a href="http://www.itheima.com">广告声明</a>    
                    <br />
                    Copyright © 2005-2016 传智商城 版权所有
            </div>

        </div>
    </body>

</html>

五日フロントエンドコンテンツの概要

JQ方法チェックフォーム（それを行うために必要な）
JSON：（理解）
- JSONオブジェクト{}
- JSON配列[{}、{}]
$に.get（urlには、機能（データ）{}）（こちら）
ブートストラップ：ブートストラップが応答レイアウト、モバイル機器WEBの優先プロジェクトを開発するための最も人気のあるHTML、CSS、およびJSのフレームワークです。
- グローバルCSSスタイル：CSSスタイル
  - グリッド・システム：
    - 画面12個の正方形12に分割されています
    - クラス=「行」が現在の行であります
    - 数（デジタルサム各解像度は12に等しくなければならず、それが12を超える場合、新しい行） - 行をカラムcol-画面解像度の内側に配置されています
    - COL-LG-番号：ワイドスクリーン上での使用
    - COL-MD-フィギュア：メディア画面で、PCのコンピュータ
    - COL-SM-番号：タブレット
    - COL-XS-フィギュア：電話で
- コンポーネント：ナビゲーション、プログレスバー、フォント
- JavaScriptのプラグイン：カルーセル図
- コピー＆ペースト
応答は何ですか：ディスプレイには、ユーザーエクスペリエンスを向上させ、構造の解像度に応じて別のページに移動します

HTML：HTML：Webページのデザイン、ウェブの構造を決定
CSS：カスケーディング・スタイル・シートは、主にコードの再利用性を向上させ、ページ、造園やHTMLコードの分離を美化するために使用されます
ジャバスクリプト：スクリプト言語は、ユーザーとの対話を提供する、ブラウザの実行、弱い型付けされた言語（VAR i）で解釈しました
jqueryの：JavaScriptライブラリ、さらにカプセル化
- セレクター：
  - IDセレクタ
  - クラスセレクタ
  - 要素セレクタ
  - ワイルドカードセレクタ
  - パケット選択
- レベルセレクタ
  - 子孫セレクタ
  - 子要素セレクタ
  - 隣接兄弟セレクタ
  - 兄弟セレクター：すべての弟を探します
- 属性セレクタ：
  - セレクター[属性名=「プロパティ「の値]
- フォームセレクタ
  - ：入力
  - ：テキスト
  - ：パスワード

body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)

基本フィルタ
- ：最初
- ：最終
- ：さえ
- ：奇数
- ：GT
- ：LT
- ：EQ
フォームオブジェクトのプロパティ
- ：選択しました
- ：チェックします

フォームバリデーションケース

テクニカル分析

ステップ解析

コードの実装

jQueryの部分ページ・リフレッシュを使用して要求を送信します

使用ブートストラップが応答ページを開発します

要求分析

テクニカル分析

BootStap概要

のスターターブートストラップ

ステップ解析

コードの実装

使用ブートストラップがホームのレイアウト

要求分析

テクニカル分析

ステップ解析

コードの実装

五日フロントエンドコンテンツの概要

おすすめ