當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/1 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了创建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代碼 (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> <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腳本中同時實現了兩種方法。但是，您可以根據自己的喜好和要求選擇脫機或在線引導文件托管。

.minHeight{min-height: 250px;}@media (min-width: 1025px){.minHeight{min-height: 90px;}} .minHeight{min-height: 250px;}@media (min-width: 1025px){.minHeight{min-height: 90px;}}

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設置初始頁面結構。在下一篇文章中，我們將學習“引導網格系統”。下篇文章很快見。祝你有美好的一天！學習愉快！

翻譯自: https://www.includehelp.com/html/create-first-webpage-with-bootstrap.aspx