如何為移動設備創建標準引導導航欄和按鈕

已發表: 2022-02-16
如何為移動設備創建標準引導導航欄按鈕

Bootstrap 是一個 HTML、CSS 和 JavaScript 框架。 使用它，您可以輕鬆構建移動優先的響應式網站。 它為您提供了大量針對 Web 元素（包括導航欄）的預設 CSS 樣式。

在本教程中，您將學習如何輕鬆創建基本的 Bootstrap 響應式導航欄。 然後，您將學習如何在移動設備上使用 Bootstrap 標準導航欄按鈕。

為了能夠使用 Bootstrap，您必須先安裝它。 就本教程而言，您可以將其安裝在本地 PC 上的任何位置 - 它不必是 Web 服務器。 我們一起做吧。

步驟1。 下載引導程序

    • 前往 getboostrap.com 並單擊“下載 Bootstrap”按鈕：

01 下載引導程序

    • 在下一個“Getting Started”頁面上，單擊另一個“Download Bootstrap”按鈕：

02 下載引導按鈕 02

    • 將此文件保存在硬盤上的任何位置：

03 引導文件夾

第2步。 在本地 PC 上安裝 Bootstrap

    • 解壓這個文件
    • 將生成的文件夾重命名為bootstrap

步驟#3。 創建一個基本的index.html文件

    • 在您的引導文件夾中，使用以下代碼創建一個index.htm l 文件：
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>

步驟4。 創建響應式導航欄

    • 在打開主體 div 的正下方，使用容器Bootstrap 類創建一個新 div：

<div class="container"><!-- Start navbar container div -->

    • 點擊 Enter 幾次以創建一些空間並關閉這個新 div：

</div><!-- Finish navbar container div -->

04 導航欄容器 div

    • 在您的新容器div 中為您的新導航欄創建導航標籤：

<nav class="navbar navbar-default">

    • 在鍵盤上，按幾次 Enter 鍵並關閉標籤：

05 導航欄標籤

    • 在nav標籤內，創建另一個容器div 並開始創建導航欄的實際內容：

<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>

06 nav標籤內的內容

    • 刪除 <h1> 標記及其內容。
    • 找到你的navbar-header div 關閉的位置，然後在它下面創建另一個 div，還沒有類。

07 關閉導航欄標題下的新 div

    • 在這個 div 中，啟動一個無序列表，其中包含響應式導航欄的實際元素：

<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

08 ul 清單

    • 保存您的 index.html 文件。
    • 在瀏覽器中打開此文件。 您現在應該看到您的響應式導航欄。 您幾乎已準備好使其成為標準的移動導航欄。 在你這樣做之前，讓我們稍微改進一下。
    • 請返回您的index.html文件。
    • 在您的nav標籤中，將默認值更改為inverse以獲取以下代碼：

<nav class="navbar navbar-inverse">

    • 保存文件。
    • 返回您的站點並刷新頁面。 你的導航欄現在看起來好多了：

09 反嚮導航標籤

做得好！ 您的響應式導航欄現在已準備好供您進一步處理。

觀看下面的視頻，了解如何用移動用戶的標準 Bootstrap 菜單按鈕替換您剛剛創建的導航欄。