DjangoのWeb開発シリーズ(6)ブートストラップのフロントページ

序文

前のセクションでは、動的なデータのレンダリングがフロントページに戻され達成するためのテンプレートの構文を使用することを学んだが、ページは醜い見て耐えることができなかった、何のCSSのドレスあまりにも単調ではありません。バックエンドの開発に関してJSが書き込むことがCSSの\を掘るか、経験不足、フロントエンドとは、プロのスタッフが存在しない場合、最良の方法は、既製CSSフロントエンドのフレームワークを導入することで、ブートストラップは最高のCSSではありませんでした一つのフレーム。

二つのDjangoプロジェクトは、ブートストラップを導入しました

1)https://v3.bootcss.com/getting-started/#downloadブートストラップブートストラップダウンロードからダウンロードブートストラップ本番環境へのダウンロードのために選択され; 2)解凍とDjangoに配置されたブートストラップブートストラップ・ダウンロード・パスの後に配置次のような、静的ディレクトリ(特別静的ファイルに指定された新)、経路に配置されたsettings.py、

STATIC_URL = '/静的/' STATICFILES_DIRS = [os.path.join(BASE_DIR、 "静的")、

ブートストラップCSSの3)HTML紹介:

<リンクREL = "スタイルシート" のhref = "/静的/ブートストラップ3.3.7-DIST / CSS / bootstrap.min.css">

JS:

<スクリプトSRC = "/静的/ bookms / JS / jQueryの-3.3.1.min.js"> </ SCRIPT> <スクリプトSRC = "/静的/ブートストラップ3.3.7-DIST / JS / bootstrap.min.js 「> </ SCRIPT>

注意:jQueryのに依存してブートストラップ、導入する必要があります。

ブートストラップの三つの機能

これが最初の接触ブートストラップがある場合は、地獄は、それがどのようなものです不思議に思われるかもしれませんか?なぜそれを行いますか?Twitterのブートストラップは、HTMLクラス名のコントロールを使用することにより、背の高い上のほとんどのコントロールをカプセル化する民意は、ページはかなり一緒に見えるように、コントロールのパッケージを導入することができるようになります、フロントエンドのテストフレームワークを開始しました。また、このページは応答レイアウトで、一度に自動的に適応されますPC、携帯電話、タブレット、その他のデバイスを記述します。巨人の肩の上、それは突然、非常に簡単に感じられません。

IV用のブートストラップ

ブートストラップは、多くのパッケージ化制御、リファレンスhttps://v3.bootcss.com/components/、ページの言葉を借りる[コンポーネント]ページで、「フォントのアイコンを含む多数の再利用可能なコンポーネント、プルダウンメニュー、ナビゲーションを提供しています、警告ボックスのポップアップボックス、および大いに多く。 " ここで使用ブートストラップ・ページナビゲーション・コンポーネント・ライブラリ管理システムは、次のとおりです。

6.png


わずかに変更され、それが私たちの使用するためのものです:

7.png

説明、htmlページ紹介CSS \ JSの第二部によると、ブートストラップを使用している場合があります。


他の

学ぶためのpython、株式、為替については、私は、マイクロチャネル公共数開く[小] Pythonコミュニティを、そして興味の友人は、次の焦点を合わせることができ、一緒のpythonを学んで、私たち自身の小さな円を構築、参加することを歓迎します。


おすすめ

転載: blog.51cto.com/2681882/2412695