Bootstrap 3 带徽标的导航栏

为什么每个人都试图以艰难的方式做到这一点？当然，其中一些方法会起作用，但它们比必要的复杂。

好的，首先 - 您需要一个适合您的导航栏的图像。您可以通过 css 高度属性（允许宽度缩放）调整图像，也可以只使用适当大小的图像。无论您决定做什么 - 它的外观将取决于您调整图像的大小。

出于某种原因，每个人都希望将图像粘贴到带有 navbar-brand 的锚点内，而这不是必需的。 navbar-brand 将不需要的文本样式应用于图像以及 navbar-left 类（就像 pull-left，但用于导航栏）。您真正需要的只是添加 navbar-left。

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

您甚至可以使用 navbar-brand 项目来跟踪它，该项目将显示在图像的右侧。

---

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

---

https://i.stack.imgur.com/xbY3W.png

包含许多示例的完整演示

重要更新：2015 年 12 月 21 日

目前，我发现有一个 bug in Mozilla，它通过 此页面上有很多演示 破坏了某些浏览器宽度上的导航栏。基本上，mozilla 错误包括导航栏品牌链接上的左右填充作为图像宽度的一部分。但是，这可以很容易地修复，并且我已经对此进行了测试，并且我相当确定它是此页面上最稳定的工作示例。它将自动调整大小并适用于所有浏览器。

只需将其添加到您的 css 中，然后像 .img-responsive 一样使用 navbar-brand。您的徽标将自动适应

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

另一种选择是使用背景图像。使用任何大小的图像，然后设置所需的宽度：

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

以下是原始答案（仅供参考）

人们似乎忘记了很多对象拟合。我个人认为这是最容易使用的，因为图像会自动调整到菜单大小。如果您只是在图像上使用对象适合，它将自动调整到菜单高度。

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

有人指出，这在 IE 中“还”不起作用。有一个 polyfill，但如果您不打算将它用于其他任何事情，这可能是多余的。对于 IE 的未来版本，看起来 object-fit 是 being planned，因此一旦发生这种情况，它将在所有浏览器中工作。

但是，如果您注意到引导程序中的 .img-responsive 类，则 max-width 假设您将这些图像放在列中或具有显式设置的东西中。这意味着 100% 特别表示父元素的 100% 宽度。

    .img-responsive
        max-width: 100%;
        height: auto;
    }

我们不能将它与导航栏一起使用的原因是因为父级 (.navbar-brand) 具有 50px 的固定高度，但未设置宽度。

如果我们采用该逻辑并将其反转为基于高度的响应式，我们可以拥有一个缩放到 .navbar-brand 高度的响应式图像，并且通过添加和自动设置宽度，它将调整为比例。

max-height: 100%;
width: auto;

通常我们必须将 display:block; 添加到场景中，但由于 navbar-brand 已经具有 float:left;应用于它，它会自动充当块元素。

您可能会遇到徽标太小的罕见情况。 img-responsive 方法没有考虑到这一点，但我们会考虑的。通过将“height”属性也添加到 .navbar-brand > img，您可以确信它会按比例放大和缩小。

max-height: 100%;
height: 100%;
width: auto;

所以为了完成这个，我把它们放在一起，它似乎在所有浏览器中都能完美运行。

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

演示 http://codepen.io/bootstrapped/pen/KwYGwq

---

尽管您的问题很有趣，但我不认为会有一个答案。也许你的问题太宽泛了。您的解决方案应取决于：导航栏中的其他内容（项目数）、徽标的大小、您的徽标是否具有响应性等。在 a（带有导航栏品牌）中添加徽标似乎是一个很好的起点。我应该使用 navbar-brand 类，因为这将添加 15 像素的填充（顶部/底部）。

我在 http://getbootstrap.com/examples/navbar/ 上使用 300x150 像素的徽标测试此设置。

全屏 > 1200：

https://i.stack.imgur.com/IM5Kk.png

768 到 992 像素之间（菜单未折叠）：

https://i.stack.imgur.com/mUYaf.png

<768（菜单折叠）

https://i.stack.imgur.com/cmkKO.png

除了美学方面，我没有发现任何技术问题。在小屏幕上，大徽标可能会重叠或突破视口。当内容不适合一行时，768 到 992 像素之间的屏幕也会出现其他问题，例如：https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

默认导航栏具有默认导航栏示例添加 30px 的下边距，因此导航栏的内容不应与页面内容重叠。 （当导航栏的高度变化时，固定的导航栏会出现问题）。

您将需要一些 css 和媒体查询来使导航栏适应您在不同屏幕尺寸上的需要。请尝试缩小您的问题。描述你在android上发现的问题。

更新请参阅 http://bootply.com/77512 以获取示例。

在电话等较小的屏幕上，折叠菜单显示在徽标上方

交换代码中的按钮和徽标，首先是徽标（在徽标上设置 float:left）

没有办法将菜单项与除顶部之外的任何内容对齐

为 .navbar-collapse ul 设置 margin-top。使用徽标高度减去导航栏高度，对齐到底部或（徽标高度 - 导航栏高度）/2 到中心

---

说明如何使用大于默认高度（50px）的徽标创建引导导航栏：

带有 100px x 100px 标志的示例，标准 CSS：

计算徽标的高度和（顶部填充 + 底部填充）。这里 120px (100px 高度 + padding top (10px) + padding bottom (10px)) 转到引导程序/自定义。设置而不是导航栏高度 50px > 120px (50 + 70) 和 navbar-collapse-max-height 从 340px 到 410px (340 + 70)。下载css。在这个例子中，我使用了这个导航栏。在导航栏品牌中：

... 添加一个类，例如 myLogo 和一个 img（您的徽标）。添加 CSS .myLogo { padding: 10px; } 适合其他尺寸。

Example

---

好吧，我终于解决了同样的问题，这是我的解决方案，我在我的网站上在所有三种主要浏览器中对其进行了测试：Chrome、Firefox 和 Internet Explorer。

首先，如果您不使用基于文本的徽标，则完全删除“navbar-brand”，因为我发现这个特定的类是我折叠的导航菜单加倍的主要原因。

向 user3137032 大声喊叫，让我朝着正确的方向前进。

你必须制作一个自定义的响应式图像容器，我称之为“logo”

这是引导 HTML 标记：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

和CSS代码：

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

@media (max-width: x) 中的值可能会根据您的徽标图像宽度而有所不同，我的是 368px。百分比也可能需要根据您的徽标大小进行更改。第一个@media 查询应该是你的阈值，我的是图像宽度（368 像素）+ 折叠按钮大小（44 像素）+ 大约 60 像素，结果是 480 像素，这是我开始响应式图像缩放的地方。

请务必从 HTML 部分中删除我的剃刀语法。让我知道它是否解决了您的问题，它解决了我的问题。

编辑：对不起，我错过了您的导航栏高度问题。有几种方法可以解决这个问题，我个人使用适当的导航栏高度编译 Bootstrap LESS，出于我的目的，我使用 70 像素，我的图像高度为 68 像素。第二种方法是在 bootstrap.css 文件本身中，搜索“.navbar”并将 min-height: 更改为徽标的高度。

---

我的解决方案是将 css "display: inline-block" 添加到 img 标签。

<img style="display: inline-block; height: 30px; margin-top: -5px">

演示：jsfiddle

---

我使用 img-responsive 类，然后在 a 元素上设置一个最大宽度。像这样：

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

和CSS：

.navbar-brand {
    max-width: 50%;
}

---

您必须像这样使用代码：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

A 类标签必须是“徽标”而不是导航栏品牌。

---

这取决于您希望徽标的高度。

导航栏中的默认 <a> 高度为 20 像素，因此如果您在徽标上指定 height: 20px，它将很好地对齐。

然而这对于一个标志来说有点小，所以我选择的是这样的：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

这使图像高 30 像素，并通过在顶部添加负边距来垂直对齐图像（5 像素是 a 上的填充和图像大小之间差异的一半）。

或者，您可以更改 <a> 元素上的填充，例如：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

---

快速修复：为您的 logo 创建一个类并将 height 设置为 28px。这适用于所有设备上的导航栏。注意我说的作品“WELL”。

.logo {
  display:block;
  height:28px;
}

---

我的方法是为手机、平板电脑、台式机、大型台式机添加四个不同尺寸的图像，但仅使用引导程序的响应式实用程序类显示一个，如下所示：

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

注意：您可以用提供的代码替换注释行。如果您不使用 wordpress，请替换 php 代码。

编辑注2：是的，这会在加载页面时向您的服务器添加请求，这可能会减慢一点，但如果您使用背景 css sprite 技术，则打印页面时可能不会打印徽标，上面的代码应该得到更好的搜索引擎优化。

---

另一种方法是在 .navbar-brand 旁边实现 Bootstrap's built-in .text-hide class，以将品牌文本/内容替换为背景图片。

CSS：

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML：

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

这是一种非常一致的方法，可以使您的图像居中。要调整图像的大小，您只需调整 .navbar-brand 宽度，因为高度已经设置。

Here's a live demo

---

我有同样的问题。我是这样解决的：

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

没有导航栏品牌类。结果看起来像适合导航栏的徽标图片，并且像链接一样工作。此外，我建议对菜单项使用 navbar-right 类，这样它们就不会低于徽标。

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

---

将以下内容添加到 .navbar-brand 类

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   margin: 0 auto; // optional
}

---

也许这太简单了，但我只是复制了 navbar-brand 行，所以有两个，图像和文本。

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

我创建了一个适合导航栏的图像（大约是高度的 1/2）。

---

如果使用 LESS，这有效：

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

---

如果您需要在工具栏中看到品牌居中并具有自动宽度，则此代码非常有效。它包含从正确路径获取图像文件的 Wordpress 函数：

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

---

我的工作代码 - 引导程序 3.0.3。 navbar-toggle 时，隐藏-xs 原始标志图像。

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

---

您可以尝试使用@media 查询，如下所示。

首先添加一个徽标类，然后使用@media 指定每个设备尺寸的徽标高度和宽度。在下面的示例中，我针对的是最大宽度为 320 像素（iPhone）的设备，您可以尝试使用它，直到找到最合适的设备。简单的测试方法：使用带有检查元素的 chrome 或 Firefox。尽可能缩小浏览器。根据您指定的@media 最大宽度观察徽标大小的变化。在 iPhone、Android 设备、iPad 等设备上进行测试以获得所需的结果。

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

---

请尝试以下代码：

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

---

在我的情况下未能使任何其他答案起作用（我可能没有通过智力测试）并且经过一些实验，这就是我正在使用的（我相信它非常接近 Bootstrap 默认值）：

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

在 CSS 文件中，我添加了以下内容：

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

请注意，@Html.ActionLink() 是 <a> 标记的 Razor 语法。如果它显示 @Html.ActionLink(...)，只需将其替换为适当的 <a> 标记即可。同样，它说 @Url.Action(...) 用适当的 URL 替换它（在这种情况下没有 <a> 标记）。

---

这不是语义，但我只是使用现有的 a 元素，设置背景图像，然后为@2x 分辨率、更小的屏幕尺寸等创建多个变体。

然后，您可以使用 .text-hide 类以老式方式在页面上获取一些文本。简单有效，但不正确使用图像。

这是文本替换助手类的链接：

http://getbootstrap.com/css/#helper-classes

---

这个问题最简单和最好的答案是根据您的徽标设置最大宽度和高度，图像的最大高度为 50 像素，但不超过 200 像素。

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

这将根据您的徽标大小和您拥有的导航栏项目而有所不同。

---

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

请自行理解代码：D 这是我的草稿代码，它已经在工作了:) 这是屏幕截图。

https://i.stack.imgur.com/pzgDp.png

---

我没有替换文本品牌，而是像下面的代码那样分成两行，并为图像赋予 img-responsive 类......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

此外，我添加了以下css代码......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

如果我的代码解决了你的问题，我很高兴......

---

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>

                   </button>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

//不要忘记在代码头部添加引导程序。

---