ブートストラップを初めて使用して、pages_html/css_WEB-ITnose を迅速に作成する

1. bower フロントエンド パッケージ マネージャーをインストールします。

bower は、JavaScript、CSS、HTML およびその他のフレームワークのインストール、更新、アンインストールを容易にするフロントエンド パッケージ マネージャーです。リソース間の相互依存関係を解決します。

npm install -g bower   // 安装bower help   // 查看帮助

YY ここで:

npm は、Express のインストールに使用される、node.js のパッケージ マネージャーです。 -generator、supervisor、bower およびその他のソフトウェア。bower はフロントエンド フレームワークのソフトウェア パッケージであり、bootstrap や jquery などのいくつかの依存パッケージがインストールされます。ふと気づいたらバッグが絡み合っていて、だんだん酔ってきました。本当に水深が深すぎて、Web開発を学ぶのは簡単ではありません。少し悲しいです。しかし、卵はまだあり、いつものように私の心は卵を待ち望んでいます。

2. bootstrap と jquery をインストールします

もちろん、bootstrap と jquery を直接ダウンロードしてプロジェクト ドキュメントに追加することもできます。パッケージ マネージャーをインストールする必要はありません。簡単な問題は自分で解決することもできますが、依存関係を自動的に解決するには、Web サイトを迅速に構築する必要があります。また、独自のプロジェクトを公開する場合、すべてのフレームワーク パッケージをまとめて公開する必要はなく、関連する json ファイルをプロジェクトに配置するだけで、他のユーザーが依存関係を一目で確認できるため、迅速なビルドが容易になります。

bower を使用する場合は、依存関係があるため、bower がブートストラップをインストールするだけで jquery が自動的にインストールされます。

3. テンプレート エンジンにブートストラップと jquery を導入します

ブートストラップと jquery をプロジェクトにインストールまたは配置したら、次のステップは、ビュー フォルダー内のファイルでそれを参照することです。で head.jade ファイルを作成します。名前が示すように、HTML の head タグにコンテンツを配置します。次のコード:

link(href='/bootstrap/dist/css/bootstrap.min.css',rel='stylesheet')script(src='/jquery/dist/jquery.min.js')script(src='/bootstrap/dist/js/bootstrap.min.js')

head.jade を作成したら、必要なすべてのページに include head.jade を追加します。

4. テンプレートレイアウトを使用する

基本的にすべてのページに head.jade をインクルードする必要があるため、すべてのページに include head.jade を記述することはできませんので、レイアウトドキュメントのlayout.jade についてです。働くこと。別のlayout.jadeファイルを作成し、そこに共通のコードを書き込みます。

doctype htmlhtml  head    title= title    link(rel='stylesheet', href='/stylesheets/style.css')    include ./includes/head  body    include ./includes/header    h1= title    block content

上記のように、一部の独立したモジュールは include ステートメントを通じてロードできます。最後の文ブロックのコンテンツはテンプレート レイアウトの鍵となります。は、テンプレート内で、このテンプレート レイアウトの違いが適用されるページをここに挿入することを意味します。

あとは、このテンプレートレイアウトが適用されているページにエクステントレイアウトを追加すればOKです。以下のように:

extends ../layoutblock content  p Welcome to #{title}

注: 拡張テンプレート ファイルおよびインクルード コードで使用されるファイルには相対パスを使用するようにしてください。

5. ページの編集を開始します

準備はほぼ完了したので、次のステップでは、jade 構文とブートストラップ スタイルを使用してページを編集します。ホームページ（index）と詳細ページ（detail）を簡単に書いてみましょう。

// index.jadeextends ../layoutblock content  .container    .row      h1= title        small 图书列表      each item in books        .col-md-3.col-xm-6          .thumbnail.text-center            a(href='/detail/#{item._id}')              img(src='#{item.poster}' ,alt='#{item.title}')            .caption              h3= item.title              .btn-group                a.btn.btn-primary(href='/detail/#{item._id}') 查看详情                a.btn.btn-primary(href='#{item.buyUrl}') 购买书籍

// detail.jadeextends ../layoutblock content  .container    .row      h1= title        small= book_title      .col-md-9.col-sm-9        .thumbnail          img(src='#{book_poster}')          .caption            p= book_info            a.btn.btn-primary(href='#{book_buyUrl}') 购买书籍      .col-md-3.col-sm-3        h3 作者        p #{book_author}        h3 出版年月        p #{book_year}年        h3 页数        p #{book_pages}页        h3 定价        p ￥#{book_price}

上記このページはブートストラップの最も基本的なレイアウトです。ブートストラップを詳しく学ぶには、ブートストラップ チュートリアル |