创建bootstrap项目_使用Bootstrap创建第一个网页

创建bootstrap项目

使用Bootstrap创建第一个网页 (Create First Webpage with Bootstrap)

In the previous article, we learned "how to setup bootstrap?" for a web project. If you haven’t gone through that, it is recommended to read it. Now, in this article, we will learn how to create the first responsive webpage using bootstrap? At any time, if you find any doubt just write it down in the comment section.

在上一篇文章中，我们为一个Web项目学习了“ 如何设置引导程序？ ”。如果您还没有经历过，建议阅读。现在，在本文中，我们将学习如何使用bootstrap创建第一个响应式网页 ？任何时候，如果您有任何疑问，请将其写下来。

创建HTML文档类型 (Create HTML doctype)

Always include html5 doctype from the beginning of the program. Also, include HTML starting and closing tag with lang attribute and set lang = "en". This ensures we are using the English language.

始终从程序开始处包含html5 doctype 。另外，包括带有lang属性HTML开始和结束标记，并设置lang =“ en” 。这样可以确保我们使用英语。

Example:

例：

 <html lang="en">

HTML代码 (HTML Code)

<!doctype html>
<html lang="en">
<head>
<title> Page Title </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
< !- - Local file  - - > 
<link rel="stylesheet" href="Path\bootstrap\bootstrap-4.1.3-dist\css\bootstrap.min.css">
<script src="Path\bootstrap\bootstrap-4.1.3-dist\js\bootstrap.bundle.min.js"></script>
<!-- Online CDN -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
< !- - Do whatever you want to show on your display webpage. - - > 
</body>
</html>

Note: Please pay attention that we have both ways implemented into this HTML script. But, you can choose to go for either offline or online bootstrap file hosting, depending on your preference and requirement.

注意：请注意，我们在HTML脚本中同时实现了两种方法。但是，您可以根据自己的喜好和要求选择脱机或在线引导文件托管。

Explanation:

说明：

The <title> and <meta> tags must be defined under the <head> tag. All of the tags, I mean the complete script must be enclosed within the <html> tag.
<title>和<meta>标签必须在<head>标签下定义。所有标记，我的意思是完整的脚本必须包含在<html>标记内。
Head tag:
头标签：

Head tag is used for heading.
Head标签用于标题。

<title>, <meta>, <styles>, <scripts> tags and more are placed between the <head> tag. You cannot define more than one head tag in one document.
<title> ， <meta> ， <styles> ， <scripts>标记以及更多标记放置在<head>标记之间。您不能在一个文档中定义多个head标签。

Ex: <head> ... </head>
例如： <head> ... </ head>
Title tag:
标题标签：

Title tag is used under the tag for giving the title to our page or document. It displays title to our page and is shown in the title toolbar. We can use only one title name in one document.
标题标签用于在标签下为页面或文档赋予标题。它显示了我们页面的标题，并显示在标题工具栏中。我们只能在一个文档中使用一个标题名称。

Ex: <title> page title </title>
例如： <title>页面标题</ title>
Meta tag:
元标记：

We have to know about metadata first for knowing more about the
我们必须先了解元数据，才能进一步了解

<meta> tag. Metadata means data about data i.e. short description about large data. Meta tag contains a short description of the current page.
<meta>标签。元数据是指有关数据的数据，即有关大数据的简短描述。元标记包含当前页面的简短描述。

一些元数据标签 (Some of the Metadata tags)

1) <meta charset="utf-8">

1) <meta charset =“ utf-8”>

It is used to define character set encoding for the current page. "utf-8" is the most commonly used character encoding, and supported by most of the web browsers.

它用于定义当前页面的字符集编码 。 “ utf-8”是最常用的字符编码，并且大多数Web浏览器都支持。

2) <meta name="description" content="about bootstrap tutorial">

2) <元名称=“描述” content =“关于引导程序教程”>

It provides short description of current page.

它提供了当前页面的简短描述。

3) <meta name="keywords" content="bootstrap,html,css">

3) <元名称=“关键字” content =“ bootstrap，html，css”>

It is useful for search engine optimization. You can pass keywords (e.g. bootstrap, html, css) that can be used to search your website through search engines.

这对于搜索引擎优化很有用。您可以传递可用于通过搜索引擎搜索您的网站的关键字(例如，bootstrap，html，css)。

4) <meta name="viewport" content="width=device-width, initial-scale=1">

4) <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>

This tag is a key tag that is responsible for rendering responsive design as per device.

该标签是一个关键标签，负责按设备呈现响应设计。

Here,

这里，

width=device-width - It will set the width of the page according to the device width.
width = device-width-它将根据设备宽度设置页面的宽度。
initial-scale=1 - It sets initial zoom level when the page is first loaded.
initial-scale = 1-设置首次加载页面时的初始缩放级别。

Conclusion:

结论：

In this article, we have learned about how to create a simple bootstrap webpage structure? This was mostly based on setting up the initial page structure for Bootstrap. We will learn about "bootstrap Grid system" in the upcoming article. See you soon in the next article. Have a great day! Happy Learning!

在本文中，我们了解了如何创建简单的引导程序网页结构？ 这主要是基于为Bootstrap设置初始页面结构 。在下一篇文章中，我们将学习“引导网格系统”。下篇文章很快见。祝你有美好的一天！学习愉快！