学習のまとめ
学習総括プロセス Grid Systemの原理とページレイアウト方式応答設計 チュートリアルの使用 Webデザイン知識を身につけなければならない学習原則インタフェース設計の原則 Bootstrap知識 注意事項開発ツール 参考資料資料入門指導日常参考 説明 快速構築 プロセス
Grid Systemの原理とページレイアウト方式
おうとうしきせっけい
ページは1セットしか設計されていませんが、PC、タブレット、さまざまな携帯電話で一致した体験を得ることができます.
グリッド・システムは、画面を類似の表に分割します.各行には12列以下が必要です.
.cl-sm-は小さなスクリーンタブレット(≧768 px)、col-md-*は中程度のスクリーンデスクトップディスプレイ(≧992 px)を表します.
例: <div class="row">
<div class="col-md-8 col-xs-12">.col-md-8div>
<div class="col-md-4 col-xs-6">.col-md-4div>
div>
どういう意味かはっきりしなければならない.
チュートリアルの使用
Webデザイン
ターゲットサイトの構成を分析します.主に、どのコンポーネントから構成されているかを分析します. ターゲットWebサイトのグリッド状況を分析します.は4つのサイズのスクリーンに対してどのようにグリッドを設計すべきかが、初心者は直接使用することができる.col-md-練習 フォント、色を統一します. 最後の知識を身につけなければならない
学習の原則.
明確な学習目標と路線がある.
単純なインタフェースを迅速に構築するだけで、さまざまな細部を顧みず、インタフェースの効果だけに関心を持っています.
深く勉強するにはまず上の方法で勉強して、それから細部に対して、それから大規模なウェブサイトはフロントエンドのインタフェースに対する要求が高くて、Bootstrapで解決できないで、あきらめましょう~~
インタフェース設計の原則
フロント開発者であろうとなかろうと、いくつかの原則がわかります.アリの金の服の設計のプラットフォームは位置合わせして、繰り返して、対比して、配置します
Bootstrapの知識
1. CSS ， Bootstrap.js。（ ）
2. Bootstrap *.min.css *.css
2. container container-fluid
2. ，
2.
4.
注意事項
はBootstrapを導入すべきである.jsより前にjQueryをインポートする.js 複数のdivが1行に並んでいる場合、Bootstrapは各divのコンテンツに基づいて異なる高さを決定するので、すべてのdivは上部が平らで、下部がコンテンツ長によって決定される. *直接修正しないでください*Bootstrap.css(特定のスタイルBootstrapをカスタマイズしない限り)は、自分のCSSで上書きする必要があります.そうしないと、後日、Webサイトのメンテナンスに大きなトラブルをもたらします. JavaScriptとjQueryの基礎知識を身につけてこそ、複雑なWebコンポーネントの一部を実際に使用することができますが、簡単なWebページの迅速な構築には影響しません.
Bootstrap中国語網はBootstrapのために独自の無料CDN加速サービスを構築した.国内のクラウドメーカーのCDNサービスに基づいて、アクセス速度が速く、加速効果がより顕著で、速度と帯域幅の制限がなく、永久無料である. 開発ツール
Chrome(レビュー要素などの機能に詳しい)推奨Visual Studio 参考資料
資料
入門指導
ゼロから始めるBootstrap(1)TODO Bootstrap 3入門学習(上) Bootstrap学習ドキュメント(四) TODO 日常の参考
Bootstrap中国語ネット Bootstrap 4菜鳥教程 Bootstrap 3菜鳥教程 Bootstrap 3ビジュアルレイアウト説明
は一時的にBootstrap 3のコードしか生成できません.一部のBootstrap 4のコードはデバッグする必要があります.2018年6月23日20:55:36 .
高速構築アプリケーション
クイックビルド
まだ書き終わっていません.