ブートストラップのチュートリアル


ブートストラップ4チュートリアル


ブートストラップ モバイルレスポンシブウェブサイトをより迅速かつ簡単に構築するのに役立つフロントエンドフレームワークです。最初にTwitterで開発されたBootstrapは、Webアプリケーションの開発からWordPressテーマまで、あらゆるものに使用されています。また、完全に無料で用途が広く、直感的です.

Bootstrapを使用すると、標準のHTMLから複雑なWebページを作成し、ニーズに合わせてカスタマイズできます。 Bootstrapには、カルーセル、ボタン、ツールチップなどの追加機能を提供できる多数のjQueryプラグインも付属しています.

最後に、重要なことですが、時間とエネルギーを節約できるWebページを作成するための多くのショートカットが提供されます。必要なのは、レスポンシブ、モバイルファースト、最新のすべてのブラウザーと互換性のある、作成するHTMLおよびCSSの基本的な理解です。.

PS. ブートストラップは完全な初心者にとって完璧なオプションではありません。 HTMLとCSSの知識があると役に立ちます。または、ウェブサイトビルダーまたはWordPressを使用してウェブサイトを作成することもできます.

Bootstrapを使用してWebサイトを作成する方法(目次):

  1. ステップ1: セットアップと概要
    1. HTMLページを作成する
    2. CDN経由でブートストラップをロードするか、ローカルでホストする
    3. jQueryを含める
    4. ブートストラップJavaScriptの読み込み
    5. まとめて
  2. ステップ2: ランディングページをデザインする
    1. ナビゲーションバーを追加する
    2. カスタムCSSを含める
    3. ページコンテンツコンテナを作成する
    4. 背景画像とカスタムJavaScriptを追加する
    5. オーバーレイを追加する
    6. ページタイトルと本文テキストを含める
    7. CTAボタンを作成する
    8. 3列のセクションを設定する
    9. お問い合わせフォームを追加
    10. 2列のフッターを作成する
    11. メディアクエリを追加する
    12. ウェブサイトをライブに

Bootstrapを使用してWebサイトを作成するための合計時間: 3〜4時間.
スキルレベル: 初級から中級

ステップ1:セットアップと概要


ブートストラップを使用するには、まずそれを開発環境(別名Webページ)に統合する必要があります。そのため、2つの異なる可能性があります。リモートでロードするか、ローカルでBootstrapをダウンロードして使用します。ただし、どちらの場合も、最初にそれをロードするために何かが必要です.,

1. HTMLページを作成する

最初のステップとして、Bootstrapを使用するベースとしてシンプルなHTMLテンプレートを作成します。そのためには、まず、コンピューターまたはサーバーにプロジェクトファイル用のフォルダーを作成します。この場合は、単にそれを呼び出します ブートストラップ. ここで、新しいテキストファイルを作成して呼び出します index.html. 任意のテキストエディターで開きます(例:. メモ帳++)、次に以下のコードを貼り付けます.





ブートストラップチュートリアルのサンプルページ








先に進む前にファイルを保存することを忘れないでください!

2a。 CDNを介してブートストラップをロード

すでに説明したように、Bootstrapは主にスタイルシートとスクリプトで構成されています。そのため、カスタムフォントなどの他のアセットと同様に、Webページのヘッダーとフッターに読み込むことができます。フレームワークは、そのためのCDN(コンテンツ配信ネットワーク)アクセスパスを提供します。あなたはそれを見つけることができます ブートストラップダウンロードページ, さらに下.

Bootstrapをページに組み込むには、以下のコードを テンプレートのセクション.

これでファイルを保存すると、それを開くブラウザーは自動的にBootstrapアセットをロードします.

多くのユーザーはすでにフレームワークをブラウザーのキャッシュに持っているため、リモート方式を使用することは良い考えです。その場合は、サイトにアクセスしたときに再読み込みする必要がないため、ページの読み込み時間が短縮されます。結果として、これはライブサイトに推奨される方法です.

ただし、実験や開発の場合、またはインターネット接続から独立したい場合は、独自のBootstrapを入手することもできます。投稿するコードも少なくなるので、これはこのチュートリアルのために私がやっていることです.

2b。ローカルでホストブートストラップ

ブートストラップを設定する別の方法は、それをハードドライブにダウンロードし、ファイルをローカルで使用することです。リモートバージョンへのリンクと同じ場所にダウンロードオプションがあります。ここでは、コンパイル済みのCSSファイルとJSファイルを取得してください。ソースファイルは必要ありません.

完了したら、ファイルを解凍し、その内容を同じディレクトリにコピーします。 index.html. その後、Bootstrap CSSを次のようにプロジェクトにロードできます。

これには、Bootstrapファイルを見つけるためのファイルパスが含まれています。あなたの場合、パスが実際の設定に対応していることを確認してください。たとえば、異なるバージョンのBootstrapをダウンロードした場合、ディレクトリの名前が異なる場合があります。.

3. jQueryを含める

Bootstrapのすべての機能を利用するには、jQueryライブラリもロードする必要があります。ここでも、リモートでロードするか、ローカルでホストする可能性があります.

最初のケースでは、jQueryの最新バージョンへのリンクが見つかります ここに. これを使用して、ページにライブラリをロードすることができます。以下のコード行を、その箇所の直前に配置します。 あなたのページに.

あるいは, jQueryをダウンロード (右クリック> リンクを名前を付けて保存…)、解凍し、プロジェクトフォルダに配置します。次に、次のようにファイルと同じ場所に含めます。

繰り返しますが、パスが設定に対応していることを確認してください.

4. Bootstrap JavaScriptをロードする

Bootstrapを設定する最後の手順は、Bootstrap JavaScriptライブラリをロードすることです。これらはダウンロードしたフレームワークのバージョンに含まれており、以前と同じ場所にリモートソースへのリンクもあります。ただし、スタイルシートとは別の場所にロードします。ヘッダーの代わりに、jQueryの呼び出しの直後にページフッターに入ります.

次のようにリモートで呼び出すことができます:

またはローカルでのように:

5.まとめて

上記の手順を正しく実行した場合、リモートソリューションでは次のようなファイルになるはずです。

   ブートストラップチュートリアルのサンプルページ         

または、ローカルでホストしている場合、ページテンプレートは次のコードのようになります。

   ブートストラップチュートリアルのサンプルページ         

それがあなたの持っているものであり、あなたの仕事を保存したなら、あなたは今、次のステップに進む準備ができています.

ステップ2:ランディングページをデザインする


確かに、それは確かに、多くの準備作業でした。しかし、それほど難しくはありませんでしたね。さらに、今から楽しみが始まります.

現時点では、サンプルサイトに移動すると、空白のページが表示されます。それを変える時.

1.ナビゲーションバーを追加する

まず、ページの上部にナビゲーションバーを追加します。これにより、訪問者はサイト内を移動して、ページの残りの部分を見つけることができます.

そのために、 ナビゲーションバー クラス。これは デフォルトの要素 ブートストラップの。デフォルトで応答するナビゲーション要素を作成し、小さい画面では自動的に折りたたまれます。また、ブランド、カラースキーム、間隔、およびその他のコンポーネントを追加するための組み込みサポートも提供します.

以下のように使用し、すぐ下に投稿します 鬼ごっこ:

 ロゴ   

コードのいくつかの説明:

  • navbar-expand-md —これは、ナビゲーションバーが垂直またはハンバーガーアイコンからフルサイズの水平バーに拡大するポイントを示します。この例では、Bootstrapで768pxを超える中程度の画面に設定しています。.
  • navbar-brand —これはウェブサイトのブランディングに使用されます。ここにロゴ画像ファイルを含めることもできます.
  • navbar-toggler —折りたたまれたメニューのトグルボタンを示します。作品 data-toggle = "collapse" これは、ドロップダウンではなくハンバーガーメニューに変わることを定義しています。これは他のオプションです。あなたが定義することが重要です データターゲット CSS ID( )と div 実際の周りに同じ名前で ナビゲーションバー 素子.
  • navbar-toggler-icon —ご想像のとおり、これによりユーザーがクリックして小さい画面でメニューを開くアイコンが作成されます.
  • navbar-nav —のクラス
      メニュー項目を保持するリスト要素。後者は ナビゲーションアイテム そして ナビリンク.

    なぜ私はこれをそんなに説明しているのですか?

    それがBootstrapのポイントだからです。これらすべての標準を使用して、いくつかのHTMLおよびCSSクラスで要素をすばやく作成できます。スタイルを提供するためにCSSを作成する必要はありません。すべてがすでにBootstrap内で設定されています。さらに、すべてがすぐに使えるモバイル対応です!これがどれほど役立つか見てきましたか?

    上記はあなたのサイトにナビゲーションバーを追加するのに十分です。しかし、現時点ではまだほとんど見えません.

    ブートストラップチュートリアルナビゲーションバーの追加

    それはそれに多くのスタイリングが付けられていないからです。追加することはできますが デフォルトの色 (たとえば、navbarに次のようなクラスを与えることにより bg-dark navbar-dark)、代わりに独自の.

    2.カスタムCSSを含める

    幸い、デフォルトのスタイルを変更する場合は、スタイルシートの大規模なライブラリを調べて手動で変更する必要はありません。代わりに、WordPressの子テーマと同様に、既存のスタイルを上書きするために使用できる独自のCSSファイルを追加できます。.

    そのためには、テキストエディターで空のファイルを作成し、それを呼び出すだけです。 main.css. 保存して、次のようにBootstrapサイトのヘッドセクションに追加します。

    これは、メインディレクトリにあるスタイルシートのコードです。あなたはあなたの中にあなたの CSS フォルダ、リンクに正しいパスが含まれていることを確認してください.

    ここから、カスタムCSSをサイトに追加できます。たとえば、ナビゲーションバーとその要素のスタイルを設定するには、次のようなマークアップを使用できます。

    体 { パディング:0; マージン:0; 背景:#f2f6e9; } /* - - ナビゲーションバー - -*/ .navbar { 背景:#6ab446; } .ナビリンク, .navbar-brand { 色:#fff; カーソル:ポインタ; } .nav-link { margin-right:1em!重要; } .nav-link:hover { 色:#000; } .navbar-collapse { justify-content:flex-end; }

    そしてここに結果があります:

    ブートストラップチュートリアルスタイルのナビゲーションバー

    以前より良く見えますね?

    3.ページコンテンツコンテナーを作成する

    ナビゲーションバーの次に必要なのは、ページコンテンツのコンテナーです。これは、必要なすべてがnavbarタグの下にあるので、Bootstrapで本当に簡単です。

    に注意してください コンテナ流体 クラス。これも、デフォルトのBootstrapクラスの1つです。に適用する div 要素は自動的に一連のCSSを適用します.

    -体液 一部は、コンテナが画面の幅全体に広がることを確認します。また、 容器, 固定幅が適用されているため、常に画面の両側にスペースがあります.

    ただし、ページをリロードしても、何も表示されません(開発者ツールを使用しない限り)。これは、空のHTML要素のみを作成したためです。これは今から変わり始めます.

    4.背景画像とカスタムJavaScriptを追加します

    このブートストラップチュートリアルの次のステップとして、ランディングページのヘッダーに全画面の背景画像を含めます。そのためには、jQueryを使用して画像を画面全体に引き伸ばす必要があります。.

    これは、カスタムCSSを含めるのと同じ方法で行います。まず、名前のテキストファイルを作成します main.js サイトフォルダー内に配置します。次に、閉会前にそれを呼び出します 内部のタグ index.html.

    その後、このコードをコピーして貼り付け、

    画面全体に広がる要素:

    $(document).ready(function(){ $( '。header')。height($(window).height()); })

    あとは、背景画像を設定するだけです。こんな風にできます main.css

    .ヘッダー{ background-image:url( 'images / header-background.jpg'); 背景サイズ:カバー; 背景の位置:中央。 位置:相対; }

    上記のパスで指定された場所に十分なサイズの画像を配置すると、次のような結果が得られます。

    ブートストラップチュートリアルにヘッダーの背景画像を含める

    5.オーバーレイを追加する

    背景画像をさらにスタイリッシュにするために、オーバーレイも追加します。そのために、先ほど含めたdiv要素の中に別のdiv要素を作成します.

    次に、カスタムCSSファイルに以下を追加できます。

    .オーバーレイ{ 位置:絶対; min-height:100%; 最小幅:100%; 左:0; 上:0; 背景:rgba(0、0、0、0.6); }

    これにより、前に入力した画像にこの素晴らしいオーバーレイが作成されます。

    ブートストラップチュートリアル、オーバーレイの追加

    6.ページのタイトルと本文を含める

    ここで、見出しと本文テキストの形式でページタイトルを追加したいと思うでしょう。こうすることで、訪問者は自分がどのサイトにいるのか、そしてそこから何が期待できるのかがすぐにわかります.

    これらを作成するには、前の手順で設定したコンテナ内のオーバーレイの下に次のスニペットを追加するだけです。

    ランディングページへようこそ!

    Lorem ipsum dolorはamet、consectetur adipiscingエリートに座ります。 Quisque interdum quam odio、quis placerat ante luctus eu。 Sedアリケットドーラーid sapien rutrum、id vulputate quam iaculis。 Suspendisse consectetur mi id libero fringilla、in pharetra sem ullamcorper.

    その後、次のマークアップをに追加します main.css.

    .説明{ 左:50%; 位置:絶対; 上:45%; 変換:変換(-50%、-55%); text-align:中央; } .説明h1 { 色:#6ab446; } .説明p { 色:#fff; font-size:1.3rem; 行の高さ:1.5; }

    すると、ランディングページは次のようになります。

    ブートストラップチュートリアルページのタイトルと説明を追加

    本当に一緒になり始めていますね?

    7. CTAボタンを作成する

    行動を促すフレーズがなければランディングページは完成しません。ほとんどの場合、ボタンの形をしています。そのため、このブートストラップチュートリアルに作成方法を含めないでください。.

    フレームワークには、ボタンをすばやく簡単に作成するためのツールが多数用意されています。あなたはたくさんの例を見つけることができます ここに. 私の場合、内部のページコンテンツのすぐ下に次のマークアップを追加します 容器:

    それに加えて、このCSSを main.css

    .説明ボタン{ border:1px solid#6ab446; 背景:#6ab446; border-radius:0; 色:#fff; } .説明ボタン:ホバー{ border:1px solid #fff; 背景:#fff; 色:#000; }

    保存してリロードすると、次のようになります。

    ブートストラップチュートリアルの行動を促すフレーズのボタンを追加

    8. 3列のセクションを設定する

    私は、物事がどのように形成されているかについて、すでにかなり満足しています。ただし、このページはまだ完成していません。次に、追加情報のためにメインコンテンツの下に3つの列を作成します。これはBootstrapの特色であり、強力に機能します。 グリッドを作成する. この場合の方法は次のとおりです。

    ロレム・イプサム

    Lorem ipsum dolorはamet、consectetur adipiscingエリートに座ります。 Quisque interdum quam odio、quis placerat ante luctus eu。 Sedアリケットドーラーid sapien rutrum、id vulputate quam iaculis.

    ロレム・イプサム

    Lorem ipsum dolorはamet、consectetur adipiscingエリートに座ります。 Quisque interdum quam odio、quis placerat ante luctus eu。 Sedアリケットドーラーid sapien rutrum、id vulputate quam iaculis.

    最初に気づくのは 素子。グリッドのコンテナーとして機能する列を作成するときは常にこれが必要です.

    列については、すべてにいくつかのクラスがあります。 col-lg-4, col-md-4 そして col-sm-12. これらは、さまざまな画面での列とそのサイズを処理することを示しています.

    これを理解するには、ブートストラップグリッドでは、1つの行のすべての列の合計が常に12になることを知っている必要があります。したがって、上記のクラスを与えると、大中規模の画面の3分の1を占めることになります。画面(12を3で割ったものは4)ですが、小型デバイスの画面全体(12列のうち12列).

    それは理にかなっている、そうではない?

    また、画像を追加して追加したことにも気づくでしょう。 .画像流体 彼らにクラス。これは、ページが表示される画面に合わせてスケーリングできるように応答性を高めるためです.

    それに加えて、通常の場所には次のスタイリングが含まれています。

    .特徴 { マージン:4em auto; パディング:1em; 位置:相対; } .feature-title { 色:#333; font-size:1.3rem; font-weight:700; margin-bottom:20px; テキスト変換:大文字; } .img機能{ -webkit-box-shadow:1px 1px 4px rgba(0、0、0、0.4); -moz-box-shadow:1px 1px 4px rgba(0、0、0、0.4); ボックスシャドウ:1px 1px 4px rgba(0、0、0、0.4); margin-bottom:16px; }

    メインコンテンツの下に追加して保存すると、次のようになります。

    ブートストラップチュートリアルで3列のセクションを追加

    9.お問い合わせフォームを追加

    新しいフィールドの1つがまだ空であることがわかります。お問い合わせフォームを追加したいので、これは意図的なものでした。これは、訪問者が連絡を取るためのランディングページの非常に一般的な方法です.

    Bootstrapで連絡先フォームを作成するのは非常に簡単です。

    連絡する!

    今では、列を作成するためにマークアップを説明する必要はもうありません。残りのマークアップの意味は次のとおりです。

    • フォームグループ —書式設定のためにフォームフィールドを折り返すために使用されます.
    • フォームコントロール —入力、テキスト領域などのフォームフィールドを示します.

    フォームでできることはもっとたくさんあります。 ドキュメンテーション. ただし、デモンストレーションの目的では、上記で十分です。残りの空の列の中に配置してから、このスタイルを追加します main.css

    .機能.form-control, .特徴入力{ border-radius:0; } .機能.btn { 背景色:#589b37; ボーダー:1pxソリッド#589b37; 色:#fff; margin-top:20px; } .features .btn:hover { 背景色:#333; ボーダー:1pxソリッド#333; }

    そうすると、次のようなフォームが得られます。

    ブートストラップチュートリアルにはお問い合わせフォームが含まれます

    10. 2列のフッターを作成する

    これで、Bootstrapチュートリアルの終わりに近づきました。ランディングページに最後に追加したいのは、2列のフッターセクションです。これで、これで問題が発生することはほとんどありません。.

    追加情報

    Lorem ipsum dolorはamet、consectetur adipiscingエリートに座ります。 Quisque interdum quam odio、quis placerat ante luctus eu。 Sedアリケットドーラーid sapien rutrum、id vulputate quam iaculis.

    Lorem ipsum dolorはamet、consectetur adipiscingエリートに座ります。 Quisque interdum quam odio、quis placerat ante luctus eu。 Sedアリケットドーラーid sapien rutrum、id vulputate quam iaculis.

    連絡先

    1640 Riverside Drive、ヒルバレー、カリフォルニア
    [メール保護]
    + 01 234 567 88
    + 01 234 567 89

    通常のグリッドマークアップに加えて、このセクションでは、Bootstrapを使用してタイポグラフィを変更するいくつかの可能性について説明します。

    • テキスト大文字
    • font-weight-bold
    • テキストセンター

    それらが行うクラスの名前からはかなりはっきりしているはずです。ブートストラップとタイポグラフィに関する詳細情報を見つけることができます ここに.

    上記に加えて、次のようなスタイルを使用できます。

    .ページフッター{ 背景色:#222; 色:#ccc; パディング:60px 0 30px; } .フッター著作権{ 色:#666; パディング:40px 0; }

    これにより、次のような美しいフッターが作成されます。

    ブートストラップチュートリアルにページフッターを含める

    11.メディアクエリを追加する

    ページは基本的にこれで準備ができています。それはまた完全に責任があります。ただし、ブラウザのモバイルビューでは、上部セクションがまだ適切に表示されていません.

    モバイルデザインのブートストラップチュートリアルエラー

    ただし、心配する必要はありません。単純なメディアクエリを使用して、簡単に修正できます。 BootstrapサイトのコンパイルにSASSを使用していない限り、これらは他のインスタンスと同じように機能します。あなたはただ心に留めておく必要があります プリセットブレークポイント ブートストラップに含まれる.

    結果として、上記の問題を修正するには、次のようなコードを含めるだけです。

    @media(最大幅:575.98px){ .説明{ 左:0; パディング:0 15px; 位置:絶対; トップ10%; 変換:なし。 text-align:中央; } .説明h1 { font-size:2em; } .説明p { font-size:1.2rem; } .特徴 { マージン:0; } }

    その後、すべては本来あるべき状態です。

    ブートストラップチュートリアルメディアクエリの追加

    12.ウェブホストをウェブホストにアップロードする

    順守している場合は、モバイルでも動作し、完全に応答する完成したWebサイトが設定されているはずです。.

    しかし、これまでのところ誰も見ることができません。これを変更するには、Webホストとドメインが必要です。そうすれば、人々はあなたのブラウザバーにあなたのウェブサイトアドレスを入力し、そしてあなたの新しく作られたBootstrapウェブサイトにオンラインでアクセスできます.

    許可するには、サイトをサーバーにアップロードする必要があります。あなたはのようなFTPクライアントでそれを行うことができます FileZilla. ホスティングプロバイダーからFTPホストアドレス、ユーザー名、パスワードを収集して、サーバーにリモート接続します。すると、現在そこにあるファイルとディレクトリを確認できるはずです。.

    FTP経由でサーバーにブートストラップWebサイトをアップロードする

    ドメインが指しているディレクトリ(通常はルートディレクトリ)に移動します。それが終わったら、ハードドライブ上のBootstrapファイルのあるフォルダーを見つけ、その中のすべてのファイルをマークし、サーバーにドラッグしてアップロードを開始します。接続速度やファイルの数とサイズによっては、プロセスが完了するまでにしばらく時間がかかります.

    ただし、完了したら、ドメインにアクセスすると、完成したサイトをブラウザーウィンドウで確認できるはずです。.

    ブートストラップチュートリアルのランディングページの完成

    数行のコードでは悪くない?

    そういえば、カスタムCSSとJavaScriptを含むページのコード全体が必要な場合は、ここからすべてダウンロードできます。これで、Bootstrapでランディングページを作成するために必要なすべてが揃いました。.

    結論

    Bootstrapは、オープンソースのフロントエンド開発フレームワークで、だれでも無料で使用できます。設計のプロトタイプをすばやく作成し、Webページを作成し、一般的には最初から実行する.

    初心者向けのこのBootstrapチュートリアルで見たように、HTML、CSS、およびいくつかのオプションのjQueryの基本的な知識だけが必要です。 WordPressの使用ほど快適ではありませんが、BootstrapはWebサイトを作成するための有効な代替手段です.

    これで、Bootstrapとそのコンポーネントをセットアップしてインストールし、簡単なランディングページを作成し、基本的なコンテンツをいくつか含めて、スタイルを設定する方法を理解しました。ナビゲーションメニューを作成し、背景画像を設定し、ボタン、列、お問い合わせフォームを含めることができます.

    もちろん、学ぶべきことは他にもあります.

    この基本的なBootstrapチュートリアルのおかげで、あなたは自分で前進し続けるのに十分なことを理解しました。フレームワークをさらに詳しく知りたい場合は、出発点として最適です。 W3Schools. それとは別に、この初心者向けチュートリアルが気に入り、それについてのあなたの考えや経験を聞きたいと思います.

    更新:初心者向けのブートストラップチートシートも.pdfおよび.pngバージョンで作成しました.

    上記のBootstrapチュートリアルについて何か考えはありますか? 質問、コメント、リクエスト?下のコメント欄でお知らせください!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Adblock
    detector