ランディングページのウェブサイトを構築して、30分でBootstrap4を学びましょう

初心者のためのガイド

「Bootstrapは、ウェブサイトやウェブアプリケーションを設計するための無料のオープンソースフロントエンドライブラリです。これには、タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のインターフェイスコンポーネント、JavaScript拡張機能など、あらゆるものに対応するHTMLベースおよびCSSベースのデザインテンプレートが含まれています。他の多くのWebフレームワークとは異なり、Bootstrapはフロントエンド開発のみに関係しています。」— wikipediaこんにちは、私たちがブートストラップ4を学ぶために私のフルクラスをチェックする前に、ブートストラップの新機能とそれらを使用してより良いユーザーエクスペリエンスを構築する方法を学びます。

Bootstrapには多くのバージョンがあり、バージョン4が最新です。この記事では、Bootstrap4を使用してWebサイトを構築します。

前提条件

始める前に、Bootstrapフレームワークを学習して使用するために知っておく必要のあるスキルがいくつかあります。

  • HTMLの基礎
  • CSSの基礎知識
  • といくつかの基本的なJQuery

目次

ウェブサイトを構築する際に、以下のトピックについて説明します。

  • Bootstrap4のダウンロードとインストール
  • Bootstrap4の新機能
  • ブートストラップグリッドシステム
  • ナビゲーションバー
  • ヘッダ
  • ボタン
  • セクションについて
  • ポートフォリオセクション
  • ブログセクション
  • カード
  • チームセクション
  • お問い合わせフォーム
  • フォント
  • スクロール効果
  • まとめと結論

Bootstrap4のダウンロードとインストール

プロジェクトにBootstrap4をインストールして含めるには、次の3つの方法があります。

  1. npmを使用する

このコマンドを実行すると、Bootstrap4をインストールできます。 npm install bootstrap

2.コンテンツ配信ネットワーク(CDN)を使用する

プロジェクトのヘッドタグの間にこのリンクを含めると、

3. Bootstrap 4ライブラリをダウンロードして、ローカルで使用します。

プロジェクトの構造は次のようになります。

Bootstrap4の新機能

Bootstrap 4の新機能は何ですか?そして、Bootstrap 3と4の違いは何ですか?

Bootstrap 4には、前回のバージョンには存在しなかったいくつかのすばらしい機能が付属しています。

  • ブートストラップ4はFlexboxグリッドを使用して記述されていますが、ブートストラップ3はfloatメソッドを使用して記述されています。

    Flexboxを初めて使用する場合は、このチュートリアルを確認してください。

  • Bootstrap 4はremCSSユニットを使用しpxますが、Bootstrap3はを使用します。

    これら2つのユニットの違いをご覧ください。

  • パネル、サムネイル、ウェルは完全に削除されました。

    Bootstrap 4のグローバルな変更と削除された機能の詳細については、こちらをご覧ください。

ここで詳細に飛び込むことなく、他の重要なことに移りましょう。

ブートストラップグリッドシステム

The Bootstrap Grid system helps you to create your layout and easily build a responsive website. There have not been any changes in the class names, except the .xs class, which no longer exists in Bootstrap 4.

The grid is divided into 12 columns, so your layout will be based on this.

To use the grid system you’ll have to add a .row class to the main div.

col-lg-2 // class used for large devices like laptops col-md-2 // class used for medium devices like tablets col-sm-2// class used for small devices like mobile phones

Navbar

The navbar wrapper is pretty cool in Bootstrap 4. It’s so helpful when it comes to building a responsive navbar.

To get it, we are going to add the navbar class to our index.html file:

  Home 
  • About
  • Portfolio
  • Blog
  • Team
  • Contact

Create and include a main.css file so that you can customize the CSS style.

Put this within the head tag in your index.html file:

Let’s add some colors to our navbar:

.navbar{ background:#F97300;} .nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;} .nav-link{ margin-right: 1em !important;} .nav-link:hover{ background: #f4f4f4; color: #f97300; } .navbar-collapse{ justify-content: flex-end;} .navbar-toggler{ background:#fff !important;}

The new Bootstrap Grid is built with the Flexbox system, so for alignment, you have to use a Flexbox property. For example, to place the navbar menu on the right we need to add a justify-content property and set it to flex-end.

.navbar-collapse{ justify-content: flex-end; }

Add the .fixed-top class to the navbar to give it a fixed position.

To make the navbar background color light, add .bg-light. For a dark background, add .bg-dark, and for a light blue background, add

.bg-primary.

Here’s how that should look:

.bg-dark{ background-color:#343a40!important } .bg-primary{ background-color:#007bff!important }

Header

Let’s try and create a layout for the header.

Here, we want to make sure the header takes up the window’s height so we are going to use a little JQuery code.

First, create a file named main.js and include it in the index.htmlfilebefore the closing body tag:

In the main.jsfile insert this a little code of JQuery:

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

It’d be pretty cool if we set a nice background image to the header:

/*header style*/ .header{ background-image: url('../images/headerback.jpg'); background-attachment: fixed; background-size: cover; background-position: center; }

Let’s add an overlay to make the header look a bit more professional:

Add this to your index.html file:

Then, add this to your main.css file:

.overlay{ position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.79); }

Now we have to add a description inside the header.

To wrap our description we’re first going to create a div and give it a class .container.

.container is a Bootstrap class that will help you to wrap your content and make your layout more responsive:

Then, add another div which will contain the description.

Hello ,Welcome To My official Website

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See more

We’ll give it a class of .description and add the .text-center class to make sure the content is placed in the center of the page.

Buttons

Add the class .btn btn-outline-secondary to the button element. there are many other Bootstrap classes for buttons.

Check some examples:

CodePen Embed — buttons in Bootstrap 4

Buttons Button primary Button default Button danger Button info Button warning Button dark Button success Buttons…codepen.io

Here’s how the styling for the .description looks in the main.css file:

.description{ position: absolute; top: 30%; margin: auto; padding: 2em; } .description h1{ color:#F97300 ; } .description p{ color:#666; font-size: 20px; width: 50%; line-height: 1.5; } .description button{ border:1px solid #F97300; background:#F97300; color:#fff; }

After all of that, our header will look like this:

Cool isn’t :).

About Section

In this section, we will use some Bootstrap Grid to divide the section into two parts.

To start our grid, we have to assign the.rowclass to the parent div.

The first section will be on the left and will contain a picture, the second section will be on the right and contain a description.

Each div will take up 6 columns — that means half of the section. Remember that a grid is divided into 12 columns.

In the first div on the left side:

 // left side  S.Web Developer 

After adding the the HTML elements on the right-side, the structure of the code will look like this:

 S.Web Developer 

D.John

ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here’s how I’ve made it look:

.about{ margin: 4em 0; padding: 1em; position: relative; } .about h1{ color:#F97300; margin: 2em; } .about img{ height: 100%; width: 100%; border-radius: 50% } .about span{ display: block; color: #888; position: absolute; left: 115px; } .about .desc{ padding: 2em; border-left:4px solid #10828C; } .about .desc h3{ color: #10828C; } .about .desc p{ line-height:2; color:#888; }

Portfolio Section

Now, let’s move onto the next bit and make a portfolio section that will contain a gallery.

The structure of our HTML code for the Portfolio section looks like this:

Portfolio

Adding .img-fluid to each image to makes it responsive.

Each item in our gallery will take up 4 columns (remember, col-md-4 for medium devices, col-lg-4 for large devices). That’s equal to 33.33333%on large devices such desktops and large tablets, and 12 columns on a small device (like iPhone, mobile devices) will take up 100% of the container.

Let’s add some styling to our Gallery:

/*Portfolio*/ .portfolio{ margin: 4em 0; position: relative; } .portfolio h1{ color:#F97300; margin: 2em; } .portfolio img{ height: 15rem; width: 100%; margin: 1em; }

Blog Section

Cards

Cards in Bootstrap 4 make blog design so much easier. The cards are appropriate for articles and posts.

To create a card, we use the class .cardand assign it to a div element,

The card class contains many features:

  • .card-header: define the card header
  • .card-body:for the card body
  • .card-title: the title of the card
  • card-footer:define the footer of the card.
  • .card-image: for the card’s image

So, our website’s HTML should now look something like this:

Blog

Post Title

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Post Title

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Post Title

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

We need to add some CSS style to the cards:

.blog{ margin: 4em 0; position: relative; } .blog h1{ color:#F97300; margin: 2em; } .blog .card{ box-shadow: 0 0 20px #ccc; } .blog .card img{ width: 100%; height: 12em; } .blog .card-title{ color:#F97300; } .blog .card-body{ padding: 1em; }

After adding the Blog section to our website, the design should now look something like this:

Cool isn’t it? ?

Team Section

In this section we will use the grid system to distribute even space between images. Each image takes up 3 columns (.col-md-3) of the container — that equals 25% of the total space.

Our HTML structure:

Our Team

Sara Manager Chris S.enginner Layla Front End Developer J.Jirard Team Manger

And let’s add some style:

.team{ margin: 4em 0; position: relative; } .team h1{ color:#F97300; margin: 2em; } .team .item{ position: relative; } .team .des{ background: #F97300; color: #fff; text-align: center; border-bottom-left-radius: 93%; transition:.3s ease-in-out; }

Adding an overlay to the image on-hover using animation would be nice ?.

To make this effect , add the styles below to main.css file:

.team .item:hover .des{ height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; }

Super cool! ?

Contact Form

The Contact Form is the last section to add, then we are done ?.

The Contact Form section will contain a form through which visitors can send an email or give feedback. We will use some Bootstrap classes to make the design beautiful and responsive.

Like Bootstrap 3, Bootstrap 4 also uses the .form-control class for input fields, but there are some new features added — like switching from .input-group-addon(deprecated) to .input-group-prepend(to use icons as labels ).

See Bootstrap 4 document for more information. In our Contact form we will wrap each input between a div that has the class.form-group.

The index.html file now looks something like this:

Get in Touch

Contact section’styles :

main.css

.contact-form{ margin: 6em 0; position: relative; } .contact-form h1{ padding:2em 1px; color: #F97300; } .contact-form .right{ max-width: 600px; } .contact-form .right .btn-secondary{ background: #F97300; color: #fff; border:0; } .contact-form .right .form-control::placeholder{ color: #888; font-size: 16px; }

Fonts

I think default fonts are ugly so we are going to use the Google Font API, and we’ll choose Raleway which is a nice font and appropriate to our template.

Add this link into your main.css file:

@import url('//fonts.googleapis.com/css?family=Raleway');

and set the global style to HTML and heading tags:

html,h1,h2,h3,h4,h5,h6,a{ font-family: "Raleway"; }

Scroll Effect

The last thing missing is scroll effect. Here, we’ll have to use some JQuery. Don’t worry️ if you are not familiar with it, just add this code into yourmain.jsfile:

$(".navbar a").click(function(){ $("body,html").animate({ scrollTop:$("#" + $(this).data('value')).offset().top },1000) })

and add a data-value attribute to each navbar link:

  • About
  • Portfolio
  • Blog
  • Team
  • Contact
  • Set an id attribute to each section.

    :スクロールを機能idさせるdata-valueには、ナビゲーションバーリンクの属性と同じである必要があります。

    まとめと結論

    Bootstrap 4は、Webアプリケーションを構築するための優れたオプションです。高品質のUI要素を提供し、カスタマイズ、統合、使用が簡単です。また、Webサイトに応答性を含めることで、ユーザーにプレミアムなユーザーエクスペリエンスを提供するのにも役立ちます。

    プロジェクトのファイルはGitHubにあります。

    BootstrapBayをチェックできるBootstrapテーマとテンプレートが必要な場合は、いくつかのすばらしい製品があります。

    Bootstrap 4を学ぶために、私のBootstrapクラスをチェックしてください。

    Bootstrap 4クラッシュコース:基本から上級者向け| はやに言った| スキルシェア

    このクラスでは、ブートストラップバージョン4、柔軟なテンプレートを構築するためのCSSフレームワーク、および… skl.shについて学習します