ホームページ > ウェブフロントエンド > jsチュートリアル > ブートストラップを使用して、pages_javascript スキルを迅速に作成するための予備的な使用

ブートストラップを使用して、pages_javascript スキルを迅速に作成するための予備的な使用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:12:29
オリジナル
1207 人が閲覧しました

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

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

1

2

npm install -g bower // 安装

bower help // 查看帮助

ログイン後にコピー

YY はこちら:

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

2. ブートストラップと jquery をインストールします

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

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

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

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

1

2

3

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ファイルを作成し、そこに共通のコードを書き込みます。

1

2

3

4

5

6

7

8

9

10

doctype html

html

 head

 title= title

 link(rel='stylesheet', href='/stylesheets/style.css')

 include ./includes/head

 body

 include ./includes/header

 h1= title

 block content

ログイン後にコピー

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

次に、このテンプレート レイアウトが適用されるページにエクステント レイアウトを追加します。以下のように:

1

2

3

extends ../layout

block content

 p Welcome to #{title}

ログイン後にコピー

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// index.jade

extends ../layout

 

block content

 .container

 .row

  h1= title

  small 图书列表

  each item in books

  .col-md-3.col-xm-6

   .thumbnail.text-center

   a(href='/books/#{item._id}')

    img(src='#{item.poster}',alt='#{item.title}')

   .caption

    h3= item.title

    .btn-group

    a.btn.btn-primary(href='/books/#{item._id}') 查看详情

    a.btn.btn-primary(href='#{item.buyUrl}') 购买书籍

ログイン後にコピー

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// detail.jade

extends ../layout

 

block 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}

ログイン後にコピー

Bootstrap についてもっと知りたい友達は、「bootstrap 学習チュートリアル」 をクリックして詳細に学習できます。

上記の 2 つのページは、ブートストラップの最も基本的なレイアウトです。この記事では、興味のある友人が引き続き学習して議論できるようにします。

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