如何为移动设备创建标准引导导航栏和按钮

已发表: 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 菜单按钮替换您刚刚创建的导航栏。