创建bootstrap项目_使用Bootstrap创建第一个网页
創(chuàng)建bootstrap項目
使用Bootstrap創(chuàng)建第一個網(wǎng)頁 (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.
在上一篇文章中，我們?yōu)橐粋€Web項目學(xué)習(xí)了“ 如何設(shè)置引導(dǎo)程序？ ”。 如果您還沒有經(jīng)歷過，建議閱讀。 現(xiàn)在，在本文中，我們將學(xué)習(xí)如何使用bootstrap創(chuàng)建第一個響應(yīng)式網(wǎng)頁 ？ 任何時候，如果您有任何疑問，請將其寫下來。
創(chuàng)建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 。 另外，包括帶有l(wèi)ang屬性HTML開始和結(jié)束標(biāo)記，并設(shè)置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腳本中同時實現(xiàn)了兩種方法。 但是，您可以根據(jù)自己的喜好和要求選擇脫機或在線引導(dǎo)文件托管。
.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>標(biāo)簽必須在<head>標(biāo)簽下定義。 所有標(biāo)記，我的意思是完整的腳本必須包含在<html>標(biāo)記內(nèi)。
Head tag:
頭標(biāo)簽：
Head tag is used for heading.
Head標(biāo)簽用于標(biāo)題。
<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>標(biāo)記以及更多標(biāo)記放置在<head>標(biāo)記之間。 您不能在一個文檔中定義多個head標(biāo)簽。
Ex: <head> ... </head>
例如： <head> ... </ head>
Title tag:
標(biāo)題標(biāo)簽：
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.
標(biāo)題標(biāo)簽用于在標(biāo)簽下為頁面或文檔賦予標(biāo)題。 它顯示了我們頁面的標(biāo)題，并顯示在標(biāo)題工具欄中。 我們只能在一個文檔中使用一個標(biāo)題名稱。
Ex: <title> page title </title>
例如： <title>頁面標(biāo)題</ title>
Meta tag:
元標(biāo)記：
We have to know about metadata first for knowing more about the
我們必須先了解元數(shù)據(jù)，才能進一步了解
<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>標(biāo)簽。 元數(shù)據(jù)是指有關(guān)數(shù)據(jù)的數(shù)據(jù)，即有關(guān)大數(shù)據(jù)的簡短描述。 元標(biāo)記包含當(dāng)前頁面的簡短描述。
一些元數(shù)據(jù)標(biāo)簽 (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.
它用于定義當(dāng)前頁面的字符集編碼 。 “ utf-8”是最常用的字符編碼，并且大多數(shù)Web瀏覽器都支持。
2) <meta name="description" content="about bootstrap tutorial">
2) <元名稱=“描述” content =“關(guān)于引導(dǎo)程序教程”>
It provides short description of current page.
它提供了當(dāng)前頁面的簡短描述。
3) <meta name="keywords" content="bootstrap,html,css">
3) <元名稱=“關(guān)鍵字” 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.
這對于搜索引擎優(yōu)化很有用。 您可以傳遞可用于通過搜索引擎搜索您的網(wǎng)站的關(guān)鍵字(例如，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.
該標(biāo)簽是一個關(guān)鍵標(biāo)簽，負責(zé)按設(shè)備呈現(xiàn)響應(yīng)設(shè)計。
Here,
這里，
width=device-width - It will set the width of the page according to the device width.
width = device-width-它將根據(jù)設(shè)備寬度設(shè)置頁面的寬度。
initial-scale=1 - It sets initial zoom level when the page is first loaded.
initial-scale = 1-設(shè)置首次加載頁面時的初始縮放級別。
Conclusion:
結(jié)論：
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!
在本文中，我們了解了如何創(chuàng)建簡單的引導(dǎo)程序網(wǎng)頁結(jié)構(gòu)？ 這主要是基于為Bootstrap設(shè)置初始頁面結(jié)構(gòu) 。 在下一篇文章中，我們將學(xué)習(xí)“引導(dǎo)網(wǎng)格系統(tǒng)”。 下篇文章很快見。 祝你有美好的一天！ 學(xué)習(xí)愉快！
翻譯自: https://www.includehelp.com/html/create-first-webpage-with-bootstrap.aspx
創(chuàng)建bootstrap項目
總結(jié)
以上是生活随笔為你收集整理的创建bootstrap项目_使用Bootstrap创建第一个网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “玄经不期赏”下一句是什么
- 下一篇： django 静态数据_如何在Djang