用bootshape制作带颜色和背景的伸缩导航栏，导航栏内包含下拉菜单，表单元素，logo等元素，并且设置配色和对齐方式等样式

好的，这是一个比较具体的问题，需要分步骤回答，我会尽量详细地解答。首先，我需要确认一下您的技术栈是否是基于 Bootstrap 框架进行开发的，因为 Bootshape 这个词并不常见，可能您是想说 Bootstrap。

如果您的技术栈是基于 Bootstrap 框架的，那么您可以按照以下步骤制作带颜色和背景的伸缩导航栏：

1. 创建一个导航栏容器

您可以使用 Bootstrap 提供的导航栏组件来创建一个容器，代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 这里放置导航栏的内容 -->
</nav>

其中，`navbar` 是 Bootstrap 导航栏组件的类名，`navbar-expand-lg` 表示在屏幕宽度大于等于 lg（992px） 时展开导航栏，`navbar-light` 表示导航栏的背景颜色为浅色系，`bg-light` 则是设置导航栏的背景色为灰色。

2. 添加 Logo 图片

在导航栏中添加 Logo 图片，您可以使用 Bootstrap 提供的图片组件。代码如下：

<a class="navbar-brand" href="#">
  <img src="logo.png" width="30" height="30" alt="">
</a>

其中，`navbar-brand` 是 Bootstrap 导航栏组件的类名，`href` 是 Logo 图片的链接地址，`img` 则是用来添加图片的标签，`width` 和 `height` 属性可以设置图片的宽度和高度。

3. 添加下拉菜单

在导航栏中添加下拉菜单，您可以使用 Bootstrap 提供的下拉菜单组件。代码如下：

<ul class="navbar-nav mr-auto">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉菜单
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">选项1</a>
      <a class="dropdown-item" href="#">选项2</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">其他</a>
    </div>
  </li>
</ul>

其中，`navbar-nav` 是用来放置导航栏链接的容器，`mr-auto` 表示链接会自动向右对齐，`nav-item` 是 Bootstrap 导航栏链接组件的类名，`dropdown` 表示这个链接是一个下拉菜单，`nav-link` 是用来定义链接样式的类名，`data-toggle` 和 `aria-haspopup` 属性用来声明这是一个下拉菜单链接，`dropdown-menu` 是下拉菜单容器的类名，`dropdown-item` 则是下拉菜单选项的类名，`dropdown-divider` 是下拉菜单选项分割线的类名。

4. 添加表单元素

在导航栏中添加表单元素，您可以使用 Bootstrap 提供的表单组件。代码如下：

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>

其中，`form-inline` 是 Bootstrap 表单组件的类名，表示这是一个内联表单，`form-control` 是用来定义表单控件样式的类名，`mr-sm-2` 表示在屏幕宽度小于等于 sm（576px） 时，表单控件向右偏移 2 个单位，`type="search"` 表示这是一个搜索框，`placeholder` 属性用来设置搜索框的提示文本，`aria-label` 属性用来设置搜索框的标签，`btn` 是 Bootstrap 按钮组件的类名，`btn-outline-success` 表示按钮是浅色系的绿色，`my-2` 表示按钮上下边距为 2 个单位，`my-sm-0` 表示在屏幕宽度小于等于 sm 时，按钮上下边距为 0。

5. 设置配色和对齐方式等样式

最后，您可以使用 Bootstrap 提供的样式类名来设置导航栏的配色和对齐方式等样式。例如，您可以使用 `text-right` 类名来将导航栏的内容右对齐，使用 `navbar-dark` 类名来设置导航栏的背景颜色为深色系。完整的代码如下：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="logo.png" width="30" height="30" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          下拉菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">选项1</a>
          <a class="dropdown-item" href="#">选项2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">其他</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</nav>

希望我的回答能够对您有所帮助！