用 30 分钟建立一个网站的方式来学习 Bootstrap 4 #4214
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
用30分钟建立一个网站的方式来学习Bootstrap 4
|
校对认领 |
|
@park-ma 好的呢 🍺 |
leviding
changed the title
ghost
reviewed
Jul 28, 2018
|
|
||
| 1. Use npm | ||
| 1. 通过 npm （ Node 包裹管理器 ） |
|
|
||
| ``` | ||
| <header class="header"> | ||
|
|
||
| </header> | ||
| ``` | ||
|
|
||
| Let’s try and create a layout for the header. | ||
| 咱们来试试创建一个标题的布局。Let’s try and create a layout for the header. |
|
@leviding @Zheng7426 校对完成 |
…ite-guide-for-beginners.md
ghost
reviewed
Jul 28, 2018
| > * 校对者： | ||
|
|
||
| # Learn Bootstrap 4 in 30 minutes by building a landing page website | ||
| # 用30分钟建立一个网站的方式来学习Bootstrap 4 |
There was a problem hiding this comment.
用30分钟建立一个网站的方式来学习Bootstrap 4
=>
用 30 分钟建立一个网站引导页（或者着陆页）的方式来学习 Bootstrap 4
a landing page 没有翻译出来，会造成歧义，
There was a problem hiding this comment.
这个地方我翻译的时候纠结了比较久，我觉得翻译成引导页或登陆页的话没什么人知道是在讲什么。直接翻译成网站或许可以让读者更清晰。如果读者能够接下来看的话，他（她）对这个网页的归类会心中自有判断。个人拙见，谢谢指正。
|
|
||
| By including this link in your project between head tags: | ||
| 你可以在你项目的 head 标签之间添上这个链接: |
|
@leviding 校对认领 |
|
@Moonliujk 妥妥哒 🍻 |
…ite-guide-for-beginners.md
Moonliujk
reviewed
Jul 29, 2018
| > * 校对者： | ||
|
|
||
| # Learn Bootstrap 4 in 30 minutes by building a landing page website | ||
| # 用30分钟建立一个网站的方式来学习Bootstrap 4 |
There was a problem hiding this comment.
用30分钟建立一个网站的方式来学习Bootstrap 4
=>
用 30 分钟建立一个网站引导页（或者着陆页）的方式来学习 Bootstrap 4
a landing page 没有翻译出来，会造成歧义，
| @@ -139,15 +137,15 @@ To get it, we are going to add the `navbar` class to our `index.html` file: | |||
| </nav> | |||
| ``` | |||
|
|
||
| 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`. | ||
| 之后，给导航栏加上`.fixed-top` class并且给予其一个固定位置。 |
|
|
||
| First create a file named `main.js` and include it in the `index.html` file before the closing `body` tag: | ||
| 为了让标题能够占据 window 对象的高度，我们得用上一点点 JQuery 代码。 | ||
| 首先创建一个 `main.js` 文件，然而将其链接放在 `index.html` 文件中 `body` 的前面： |
|
|
||
| `.container` is a Bootstrap class that will help you to wrap your content and make your layout more responsive: | ||
| `.container` 是一个可以封装你的内容并且增加你布局响应性的Bootstrap class： |
There was a problem hiding this comment.
.container 是一个可以封装你的内容并且增加你布局响应性的Bootstrap class：
=>
.container 是一个可以封装你的内容并且使你的布局具有响应性的 Bootstrap class：
我觉得前者的翻译有一些别扭，所以进行了修改，仅作为参考
| @@ -172,20 +170,18 @@ Let’s add some colors to our navbar: | |||
| } | |||
| ``` | |||
|
|
|||
| 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`. | |||
| 新的 Bootstrap 网格是基于 Flexbox 构建的，所以你得使用 Flexbox 的性质来进行网站元素的排列。打个比方，若想要把导航栏菜单放在右边，咱得加入一个`justify-content`性质，并且赋值`flex-end`。 | |||
| 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`. | ||
| 之后，给导航栏加上`.fixed-top` class并且给予其一个固定位置。 | ||
| 若想让导航栏的背景变成淡色，加上`.bg-light`；若想要一个深色的背景，则加上`.bg-dark`。至于淡蓝色的背景，可以加上`.bg-primary`。 |
There was a problem hiding this comment.
.bg-light、.bg-dark 及 .bg-primary 前后添加空格
|
|
||
| Here’s how the styling for the `.description` looks in the `main.css` file: | ||
| 以下是`main.css` 文件中`.description` 的CSS代码： |
There was a problem hiding this comment.
main.css 、 .description 及 CSS 前后添加空格
|
|
||
| ### About Section | ||
| ### “关于我”版块 |
|
|
||
| * [**Bootstrap 4 crash course: basic to advance | Said Hayani | Skillshare**: In this class the you are going to learn bootstrap version 4, the CSS framework to build flexible templates and…](https://skl.sh/2LaD1ym) | ||
| * [**Bootstrap 4 crash course: 从基础到进阶 | Said Hayani | Skillshare**: 在这个课程里你将学习 Bootstrap的第四版，是一个 CSS 框架用以构建灵活的页面以及……](https://skl.sh/2LaD1ym) |
|
@Zheng7426 @leviding 校对完毕 |
|
@park-ma 格式问题也要校对的 |
…ite-guide-for-beginners.md
…ite-guide-for-beginners.md
|
修改完成@leviding。 |
leviding
reviewed
Jul 30, 2018
|
|
||
| > “Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for everything from typography, forms, buttons, navigation and other interface components as well as JavaScript extensions. Unlike many other web frameworks, Bootstrap concerns itself with front-end development only.” — [Wikipedia](https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework) | ||
| > “Bootstrap 是一个为网站及网页应用设计而生的开源前端代码库。它基于 HTML 和 CSS 的设计模板涵盖了文字设计、表单、按钮、导航、其他界面组件以及一些 JavaScript 扩展包。与很多其他网页框架不一样的是， Bootstrap 对自身的定位是仅仅适用于前端开发而已。” — [维基百科](https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)) |
There was a problem hiding this comment.
链接里的内容为什么要改呢？改了链接就无法访问了 @Zheng7426
leviding
requested changes
Jul 30, 2018
There was a problem hiding this comment.
@Zheng7426 还是存在很多格式问题，只给你改了前一小部分，问题比较对需要自己对照译者教程进行修改。请参照我最新的 commit 明确问题。
…ite-guide-for-beginners.md
|
麻烦再审核一下，已修改。@leviding |
leviding
reviewed
Jul 30, 2018
| @@ -326,41 +321,40 @@ Here’s how the styling for the `.description` looks in the `main.css` file: | |||
| } | |||
| ``` | |||
|
|
|||
| After all of that, our header will look like this: | |||
| 至此，咱们的标题看起来会是这样的： | |||
|
|
||
| * [**CodePen Embed — buttons in bootstrap 4**: Buttons Button primary Button default Button danger Button info Button warning Button dark Button success Buttons…_codepen.io](https://codepen.io/Saidalmaghribi/embed/oEWgbw) | ||
| * [**CodePen Embed — bootstrap 4 中的按钮**： 各种按钮样式](https://codepen.io/Saidalmaghribi/embed/oEWgbw) |
|
|
||
| To use the grid system you’ll have to add a `.row` class to the main _div_. | ||
| 网格一共被分成了 12 列 （columns），所以你的布局将会基于这 12 列来实现。 |
| col-sm-2// class used for small devices like mobile phones | ||
| col-lg-2 // 这个 class 适用于大型设备（如笔记本电脑） | ||
| col-md-2 // 这个 class 适用于中型设备（如平板电脑） | ||
| col-sm-2// 这个 class 适用于小型设备 （如手机） |
|
|
||
| To get it, we are going to add the `navbar` class to our `index.html` file: | ||
| 要想运用导航栏，咱们得在文件 `index.html` 中加入 `navbar` 这个 class ： |
| @@ -237,17 +232,17 @@ It’d be pretty cool if we set a nice background image to the header: | |||
|
|
|||
|  | |||
|
|
|||
| Let’s add an overlay to make the header look a bit more professional: | |||
| 为了让标题页看起来更专业，可以加上一个覆盖层： | |||
|
|
||
| To wrap our description we’re first going to create a `div` and give it a class `.container`. | ||
| 为了加上描述，首先需要写一个 `div` 并给它添上叫 `.container` 的 class 。 |
|
|
||
| `.container` is a Bootstrap class that will help you to wrap your content and make your layout more responsive: | ||
| `.container` 是一个可以封装你的内容并且使你的布局具有响应性的 Bootstrap class ： |
| @@ -276,7 +271,7 @@ To wrap our description we’re first going to create a `div` and give it a clas | |||
| </header> | |||
| ``` | |||
|
|
|||
| Then, add another `div` which will contain the description. | |||
| 在那之后，另写一个包含描述版块的 `div` 。 | |||
| @@ -290,17 +285,17 @@ Then, add another `div` which will contain the description. | |||
| </div> | |||
| ``` | |||
|
|
|||
| 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. | |||
| 咱们在这个 `div` 的 class 里写 `.description` ，并且加上 `.text-center` 来确保这个描述版块里的内容会出现在整个页面的中央。 | |||
…ite-guide-for-beginners.md
leviding
reviewed
Jul 30, 2018
leviding
previously approved these changes
Jul 30, 2018
|
@park-ma 可以看下新的几个 commit 和新的一些校对意见，这些也是需要校对的。 |
|
@leviding 谢谢 |
ghost
reviewed
Jul 30, 2018
| * basic knowledge of CSS | ||
| * and some basic JQuery | ||
| * HTML 基本知识 | ||
| * CSS 基本知识 |
There was a problem hiding this comment.
你好，这里我是为了对齐，想要使排版好看一点。
|
|
||
| Bootstrap 4 now comes with some awesome features that didn’t exist in the last version: | ||
| Bootstrap 4 有什么新花样呢？ 它和 Bootstrap 3 又有何不同？ |
|
|
||
| The grid is divided into 12 columns, so your layout will be based on this. | ||
| Bootstrap 网格系统有助于创建你的布局以及轻松地构建一个响应式网站。 在 Bootstrap 4 里唯一对 class 名称的改动就是去除了 `.xs` class。 |
| @@ -600,22 +590,21 @@ We need to add some CSS style to the cards: | |||
| } | |||
| ``` | |||
|
|
|||
| After adding the Blog section to our website, the design should now look something like this: | |||
| 添加了博客版块之后，网站的设计看起来会是这样的： | |||
| 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. | ||
| 在咱们完事之前，联络表单是需要添加的最后一个版块😃。 |
…ite-guide-for-beginners.md
leviding
approved these changes
Jul 30, 2018
|
@Zheng7426 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。 掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。 |
|
各位辛苦了 👍 |
Zheng7426
deleted the
translations/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners
branch
|
@Moonliujk 校对认真，提升积分。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
用30分钟建立一个网站的方式来学习Bootstrap 4
译文翻译完成，resolve #4167