bootstrap导航条文字颜色_XEditor基础组件：导航条

导航条是网页中最常见的组件之一，它通常位于网页的顶部。当我们想浏览网站的其他部分时，我们常常会回到网页顶部，然后点击导航条中的某个链接，跳转到其他页面。

XEditor提供了各种各样的导航条，在使用导航条之前，我们先学习它的一些基础知识。有一些常见的组件，我们以为很了解它们，其实并不是。

导航条与导航

在设计网页时，有些人分不清“导航条”与“导航”。通过下图，我们来了解导航条的常见结构。

导航条示例

这是一个常见的导航条，它由四部分组成，导航只是该导航条的一部分，导航条包含了导航。XEditor同时为你提供了导航条与导航组件，当你使用时，不要选错了组件。

导航条的组成

因为中等屏幕及大屏幕都比较宽，我们往往将导航条分成左右两个部分，中间隔着空白。我们可以往导航条的两边分别添加导航、按钮、链接等。

如下图，这个导航条的左边部分有商标和输入框，它的右边部分是导航和链接列表。

你可以将导航从右边移到左边，或者将输入框从左边移到右边，或者删除输入框，添加其他内容进来，如何设计取决于你。

了解了导航条之后，我们现在开始使用它。

使用导航条

在XEditor中，为当前网页添加一个导航条，默认情况下，导航条的背景颜色是浅灰色。

我们可以将它修改为深色背景，然后往导航条的右边添加一个按钮。

导航条默认有一些背景颜色可供选择，你可以挑选你喜欢的颜色或者定制自己的颜色。

如果不需要背景颜色，可以设置导航条的背景颜色为白色或完全透明。

如果需要在图片背景中使用导航条，可以考虑使用白色文字的导航条。

导航条的布局

上面的导航条默认使用了最简单的布局，因此，在大屏幕上显示时，导航条的两边会有空白。

如果你需要100%屏幕宽度的导航条，你可以直接删除导航条的布局，这样的话，它的两边就没有空白了。

复杂的导航条

导航条的复杂之处在于其多变性，为了适应各种环境，它必须保证自己的每一部分都是可以调整的。

刚开始学习使用导航条时，可能会控制不好，不能设计出想要的导航条。这时，建议你一步一步模仿，学习每种导航条的设计方法，然后去模板市场中找一些更复杂的导航条，看看它们是如何设计的。

导航条是我们学习的第一个比较复杂的组件，如果你能够学会使用它，你以后就可以学会XEditor，XEditor的内容非常的多，但它的复杂程度也就在于此。如果你现在不能学会导航条，也可以放心的继续学习。现在不能解决的问题，也许将来会变得很容易。

关注该知乎账号，了解更多信息。