導航條是網頁中最常見的組件之一，它通常位于網頁的頂部。當我們想瀏覽網站的其他部分時，我們常常會回到網頁頂部，然后點擊導航條中的某個鏈接，跳轉到其他頁面。

XEditor提供了各種各樣的導航條，在使用導航條之前，我們先學習它的一些基礎知識。有一些常見的組件，我們以為很了解它們，其實并不是。

導航條與導航

在設計網頁時，有些人分不清“導航條”與“導航”。通過下圖，我們來了解導航條的常見結構。

導航條示例

這是一個常見的導航條，它由四部分組成，導航只是該導航條的一部分，導航條包含了導航。XEditor同時為你提供了導航條與導航組件，當你使用時，不要選錯了組件。

導航條的組成

因為中等屏幕及大屏幕都比較寬，我們往往將導航條分成左右兩個部分，中間隔著空白。我們可以往導航條的兩邊分別添加導航、按鈕、鏈接等。

如下圖，這個導航條的左邊部分有商標和輸入框，它的右邊部分是導航和鏈接列表。

你可以將導航從右邊移到左邊，或者將輸入框從左邊移到右邊，或者刪除輸入框，添加其他內容進來，如何設計取決于你。

了解了導航條之后，我們現在開始使用它。

使用導航條

在XEditor中，為當前網頁添加一個導航條，默認情況下，導航條的背景顏色是淺灰色。

我們可以將它修改為深色背景，然后往導航條的右邊添加一個按鈕。

導航條默認有一些背景顏色可供選擇，你可以挑選你喜歡的顏色或者定制自己的顏色。

如果不需要背景顏色，可以設置導航條的背景顏色為白色或完全透明。

如果需要在圖片背景中使用導航條，可以考慮使用白色文字的導航條。

導航條的布局

上面的導航條默認使用了最簡單的布局，因此，在大屏幕上顯示時，導航條的兩邊會有空白。

如果你需要100%屏幕寬度的導航條，你可以直接刪除導航條的布局，這樣的話，它的兩邊就沒有空白了。

復雜的導航條

導航條的復雜之處在于其多變性，為了適應各種環境，它必須保證自己的每一部分都是可以調整的。

剛開始學習使用導航條時，可能會控制不好，不能設計出想要的導航條。這時，建議你一步一步模仿，學習每種導航條的設計方法，然后去模板市場中找一些更復雜的導航條，看看它們是如何設計的。

導航條是我們學習的第一個比較復雜的組件，如果你能夠學會使用它，你以后就可以學會XEditor，XEditor的內容非常的多，但它的復雜程度也就在于此。如果你現在不能學會導航條，也可以放心的繼續學習。現在不能解決的問題，也許將來會變得很容易。

關注該知乎賬號，了解更多信息。

總結

以上是生活随笔為你收集整理的bootstrap导航条文字颜色_XEditor基础组件：导航条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。