快速教程，可幫助您快速掌握最新版本的Bootstrap。 (A quick tutorial to get you up to speed with the latest version of Bootstrap.)

In my opinion, the best way to learn a new technology is often to start building stuff from day one. This gives a sense of meaning to the learning process. Plus, it’s satisfying to see a product appear before you as you struggle your way through the material.

我認(rèn)為，學(xué)習(xí)新技術(shù)的最好方法通常是從第一天開(kāi)始就開(kāi)始學(xué)習(xí)。 這給學(xué)習(xí)過(guò)程帶來(lái)了意義。 另外，當(dāng)您在材料中苦苦掙扎時(shí)，很高興看到產(chǎn)品出現(xiàn)在您面前。

So in this article, I’ll walk you through building a simple website using Bootstrap 4.0 while highlighting the most important new features of the library.

因此，在本文中，我將引導(dǎo)您使用Bootstrap 4.0建立一個(gè)簡(jiǎn)單的網(wǎng)站，同時(shí)重點(diǎn)介紹該庫(kù)的最重要的新功能。

If you want to learn Bootstrap 4.0 properly, check out this free course on Scrimba!

如果您想正確學(xué)習(xí)Bootstrap 4.0，請(qǐng)?jiān)赟crimba上查看此免費(fèi)課程！

Now let’s get started.

現(xiàn)在開(kāi)始吧。

我們將建立什么 (What we’ll build)

We’re going to build a basic portfolio website. Even though it’s simple, it contains several core concepts you’ll need to learn in order to use Bootstrap 4.0 properly.

我們將建立一個(gè)基本的投資組合網(wǎng)站。 即使很簡(jiǎn)單，它也包含一些核心概念，您需要學(xué)習(xí)這些概念才能正確使用Bootstrap 4.0。

If you want to play around with the code, check out this Scrimba playground. Feel free to use it as a reference if you don’t understand something in the article and need to experiment for yourself.

如果您想使用該代碼，請(qǐng)?jiān)L問(wèn)此Scrimba游樂(lè)場(chǎng) 。 如果您不了解本文中的內(nèi)容并且需要自己進(jìn)行實(shí)驗(yàn)，請(qǐng)隨時(shí)將其用作參考。

導(dǎo)航欄 (The navbar)

Let’s start with the navbar. In Bootstrap 4.0 they’ve made navbars easier, as they require a bit less markup now. Here’s what we need to create the simplest navbar possible:

讓我們從導(dǎo)航欄開(kāi)始。 在Bootstrap 4.0中，它們使導(dǎo)航欄更容易了，因?yàn)樗鼈儸F(xiàn)在需要的標(biāo)記要少一些。 這是我們創(chuàng)建盡可能簡(jiǎn)單的導(dǎo)航欄所需的內(nèi)容：

My portfolio

我的投資組合

Which results in the following:

結(jié)果如下：

The bg-light class makes the background light grey while the navbar-light class gives the text a dark colour. By default, the text colour in navbars is blue, however, I think it looks better with the navbar-light class.

bg-light類使背景navbar-light灰色，而navbar-light類使文本navbar-light深色。 默認(rèn)情況下， navbar-light的文本顏色是藍(lán)色，但是，我認(rèn)為使用navbar-light類看起來(lái)更好。

Let’s add some content to our navbar, at the same level as the brand anchor tag:

讓我們?cè)趯?dǎo)航欄上添加一些與品牌錨標(biāo)簽相同的內(nèi)容：

<ul class="navbar-nav"> <li class="navbar-item"> <a href="#" class="nav-link">Homepage</a> </li> <li class="navbar-item"> <a href="#" class="nav-link">Blog</a> </li> <li class="navbar-item"> <a href="#" class="nav-link">About</a> </li> <li class="navbar-item"> <a href="#" class="nav-link">Contact Us</a> </li> </ul>

The three classes to take notice of here are the navbar-nav,navbar-link and navbar-item. Together they construct the navigation options the way you want them.

這里需要注意的三個(gè)類是navbar-nav ， navbar-link和navbar-item 。 它們一起以您想要的方式構(gòu)造導(dǎo)航選項(xiàng)。

Here’s how that looks:

看起來(lái)是這樣的：

However, now we’ll need to make it responsive, as we want our navigation options to collapse into a hamburger icon on smaller screens. To achieve this, we need to do two things:

但是，現(xiàn)在我們需要使其具有響應(yīng)性，因?yàn)槲覀兿Ｍ麑?dǎo)航選項(xiàng)在較小的屏幕上折疊成一個(gè)漢堡包圖標(biāo)。 為此，我們需要做兩件事：

Tell Bootstrap at which point the navigation options should break to collapse into a hamburger

告訴Bootstrap，此時(shí)導(dǎo)航選項(xiàng)應(yīng)該會(huì)破裂以折疊成漢堡包

Create the markup for the hamburger

為漢堡包創(chuàng)建標(biāo)記

To make it collapse, we’ll add the navbar-expand-md class to the nav element itself:

為了使其折疊，我們將navbar-expand-md類添加到nav元素本身：

<nav class="navbar navbar-light bg-light `**navbar-expand-md**`"> ... </nav

This tells Bootstrap that we want the navbar options to toggle between expanded and collapsed states at the md breakpoint, which is at768px.

這告訴Bootstrap我們希望navbar選項(xiàng)在md斷點(diǎn)(即768px處在展開(kāi)狀態(tài)和折疊狀態(tài)之間切換。

We also need to wrap our navigation options in a div (with the two classes collapse and navbar-collapse) which tells Bootstrap that this is the part we want to collapse.

我們還需要將導(dǎo)航選項(xiàng)包裝在div中(兩個(gè)類分別是collapse和navbar-collapse )，這將告訴Bootstrap這是我們要折疊的部分。

<div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> ... </ul> </div>

The id of navbarNav is to connect this item with the data-target attribute in the hamburger icon, which we’ll create like this:

navbarNav的ID是將此項(xiàng)與漢堡圖標(biāo)中的data-target屬性相關(guān)聯(lián)，我們將如下創(chuàng)建：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> ```html We now have a great looking navbar, which collapses and expands at our chosen breakpoint:### JumbotronThe next step is to create something that welcomes our users to the website below the navbar. To do that, we’ll use the [jumbotron](https://getbootstrap.com/docs/4.0/components/jumbotron/) component. It’s super simple: ```html <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-3">Welcome to my website</h1> <p class="lead">I'm a developer and designer. Check my portfolio below</p> </div>

Which results in the following:

結(jié)果如下：

The display-3 and lead classes are typography classes, which make the text a bit more opinionated and better looking in my view. You can read more about typography in Bootstrap 4.0 here.

display-3和lead類是印刷類，在我看來(lái)，它們使文本更具自省感和外觀。 您可以在此處閱讀有關(guān)Bootstrap 4.0的排版的更多信息。

主要內(nèi)容-網(wǎng)格和卡片 (The Main Content?—?Grid and Cards)

Below our jumbotron we’re going to add the main content of our website, which will consist of four cards. A card is a whole new component of Bootstrap 4.0, and it’s replacing panels, wells, and thumbnails from Bootstrap 3.0.

在巨無(wú)霸下面，我們將添加網(wǎng)站的主要內(nèi)容，該內(nèi)容包括四張卡片。 卡是Bootstrap 4.0的全新組件，它取代了Bootstrap 3.0中的面板，Kong和縮略圖。

Let’s first have a look at what we want to build:

首先讓我們看一下我們要構(gòu)建的內(nèi)容：

創(chuàng)建網(wǎng)格 (Creating the grid)

In order to make them appear nicely like this, and to also make sure they work well responsively, we’ll need to wrap the cards in a grid. The grid is one of the core pieces of Bootstrap, and many developers use the library solely because of the grid.

為了使它們看起來(lái)像這樣漂亮，并確保它們能很好地響應(yīng)，我們需要將卡包裝成網(wǎng)格。 網(wǎng)格是Bootstrap的核心部分之一，許多開(kāi)發(fā)人員僅由于網(wǎng)格而使用該庫(kù)。

We’ll start off by creating a very simple grid with no content. In Bootstrap, you always create rows first and then wrap columns inside the rows. By default, the grid can be divided into 12 columns in the width.

我們將從創(chuàng)建一個(gè)沒(méi)有內(nèi)容的非常簡(jiǎn)單的網(wǎng)格開(kāi)始。 在引導(dǎo)，你總是先創(chuàng)建行，然后換行內(nèi)列。 默認(rèn)情況下，網(wǎng)格的寬度可以分為12列。

Above the sm breakpoint, we want each of the cards to take up half the width, so we’ll give the columns a col-sm-6 class. When the screen reaches the lg breakpoint though, we want four cards in the width, so we’ll do col-lg-3.

在sm斷點(diǎn)之上，我們希望每張卡占用一半的寬度，因此我們將為列提供col-sm-6類。 當(dāng)屏幕到達(dá)lg斷點(diǎn)時(shí)，我們需要四張卡片的寬度，因此我們將執(zhí)行col-lg-3 。

<div class="container"> <div class="row"> <div class="col-sm-6 col-lg-3">column</div> <div class="col-sm-6 col-lg-3">column</div> <div class="col-sm-6 col-lg-3">column</div> <div class="col-sm-6 col-lg-3">column</div> </div> </div>

This gives the following responsive layout:

這給出了以下響應(yīng)式布局：

創(chuàng)建卡 (Creating the cards)

Now we simply need to replace the column text with a card component. Here’s the markup for our card:

現(xiàn)在，我們只需要用card組件替換列文本。 這是我們卡的標(biāo)記：

<div class="card"> <img class="card-img-top" alt="Card header image" src="img1.png"> <div class="card-body"> <h5 class="card-title">Project 1</h5> <p class="card-text">An awesome project</p> <a href="#" class="btn btn-info">See project</a> </div> </div>

To turn a div into a card we’ll simply add the class card. If we want an image to appear in the header of the card, we’ll add the card-img-top. As for the rest of the content, we’ll use the classes card-body, card-title , and card-text.

要將div變成卡片，我們只需添加類card 。 如果我們希望圖像出現(xiàn)在卡片的標(biāo)題中，我們將添加card-img-top 。 至于其余的內(nèi)容，我們將使用card-body ， card-title和card-text 。

One problem, though, is that this layout won’t look good when the grid gets multiple rows. As you can see, we’ll need to add some spacing in-between the rows.

但是，一個(gè)問(wèn)題是，當(dāng)網(wǎng)格獲得多行時(shí)，這種布局看起來(lái)不會(huì)很好。 如您所見(jiàn)，我們需要在行之間添加一些間距。

This will introduce you to a new spacing concept in Bootstrap 4.0, where you can add classes to set the padding and margin. We’ll simply add the class mt-3 to the card divs.

這將為您介紹Bootstrap 4.0中的新間距概念，您可以在其中添加類來(lái)設(shè)置填充和邊距。 我們將簡(jiǎn)單地將mt-3類添加到card div中。

<div class="card mt-3"> ... </div>

The mt stands for margin-top, and the 3 is a number on a scale from 1 to 5, where 5 is the most. You can also do for example pb-4, which would set thepadding-bootom to 4. You probably get the point by now. Once we’ve added this, we have a nice grid with cards on our website.

mt代表margin-top ，而3表示從1到5的數(shù)字，其中5表示最大。 例如，您也可以使用pb-4 ，它將padding-bootom設(shè)置為4。您現(xiàn)在可能已經(jīng)明白了。 添加完之后，我們的網(wǎng)站上就會(huì)出現(xiàn)一個(gè)帶有卡片的漂亮網(wǎng)格。

聯(lián)系表 (Contact form)

Finally, let’s also add a contact form. It’ll simply be a new row in our grid. This time we’ll also use the offset class, as we don’t want it to be full-width, at least not above the md breakpoint.

最后，我們還要添加一個(gè)聯(lián)系表。 這將只是我們網(wǎng)格中的新行。 這次我們還將使用offset類，因?yàn)槲覀儾幌Ｍ鼮槿?#xff0c;至少不超過(guò)md斷點(diǎn)。

So from md and upwards we’ll give it a width of six columns, and an offset of three:

因此，從md ，我們將為它提供六列的寬度，以及三列的偏移量：

<div class="row mt-5"> <div class="col-sm-12 **col-md-6 offset-md-3**"> <h3>Reach out!</h3> _...form goes here..._ </div> </div>

Now let’s look at the code for the form itself:

現(xiàn)在讓我們看一下表單本身的代碼：

<form> <div class="form-group"> <input type="text" class="form-control" id="email" placeholder="Your email.."> </div> <div class="form-group"> <textarea class="form-control" placeholder="Your message.."> </textarea> </div> <button type="submit" class="btn btn-primary">Submit</button></form>

The controls?—?like the <input> and <textarea>—are styled with the form-control class. They make it look like a classical Boostrap form:

控件(如<input>和<textarea> )使用form-control類設(shè)置樣式。 它們使它看起來(lái)像經(jīng)典的Boostrap形式：

And that’s it! You’ve now created your very first Bootstrap 4.0 website. If you want to learn the library properly, be sure to check out our free course on Scrimba.

就是這樣！ 現(xiàn)在，您已經(jīng)創(chuàng)建了第一個(gè)Bootstrap 4.0網(wǎng)站。 如果您想正確地學(xué)習(xí)圖書(shū)館，請(qǐng)務(wù)必查看有關(guān)Scrimba的免費(fèi)課程。

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

謝謝閱讀！ 我叫Per Borgen，我是Scrimba的共同創(chuàng)始人–學(xué)習(xí)編碼的最簡(jiǎn)單方法。 如果要學(xué)習(xí)以專業(yè)水平構(gòu)建現(xiàn)代網(wǎng)站，則應(yīng)查看我們的響應(yīng)式Web設(shè)計(jì)新手訓(xùn)練營(yíng) 。

翻譯自: https://www.freecodecamp.org/news/building-your-first-bootstrap-4-0-site-b54bbff6bc55/

總結(jié)

以上是生活随笔為你收集整理的Bootstrap教程：学习构建第一个Bootstrap 4网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。