bootstrap导航条文字颜色_XEditor基础组件:导航条
導(dǎo)航條是網(wǎng)頁中最常見的組件之一,它通常位于網(wǎng)頁的頂部。當(dāng)我們想瀏覽網(wǎng)站的其他部分時,我們常常會回到網(wǎng)頁頂部,然后點擊導(dǎo)航條中的某個鏈接,跳轉(zhuǎn)到其他頁面。
XEditor提供了各種各樣的導(dǎo)航條,在使用導(dǎo)航條之前,我們先學(xué)習(xí)它的一些基礎(chǔ)知識。有一些常見的組件,我們以為很了解它們,其實并不是。
導(dǎo)航條與導(dǎo)航
在設(shè)計網(wǎng)頁時,有些人分不清“導(dǎo)航條”與“導(dǎo)航”。通過下圖,我們來了解導(dǎo)航條的常見結(jié)構(gòu)。
導(dǎo)航條示例這是一個常見的導(dǎo)航條,它由四部分組成,導(dǎo)航只是該導(dǎo)航條的一部分,導(dǎo)航條包含了導(dǎo)航。XEditor同時為你提供了導(dǎo)航條與導(dǎo)航組件,當(dāng)你使用時,不要選錯了組件。
導(dǎo)航條的組成
因為中等屏幕及大屏幕都比較寬,我們往往將導(dǎo)航條分成左右兩個部分,中間隔著空白。我們可以往導(dǎo)航條的兩邊分別添加導(dǎo)航、按鈕、鏈接等。
如下圖,這個導(dǎo)航條的左邊部分有商標(biāo)和輸入框,它的右邊部分是導(dǎo)航和鏈接列表。
你可以將導(dǎo)航從右邊移到左邊,或者將輸入框從左邊移到右邊,或者刪除輸入框,添加其他內(nèi)容進(jìn)來,如何設(shè)計取決于你。
了解了導(dǎo)航條之后,我們現(xiàn)在開始使用它。
使用導(dǎo)航條
在XEditor中,為當(dāng)前網(wǎng)頁添加一個導(dǎo)航條,默認(rèn)情況下,導(dǎo)航條的背景顏色是淺灰色。
我們可以將它修改為深色背景,然后往導(dǎo)航條的右邊添加一個按鈕。
導(dǎo)航條默認(rèn)有一些背景顏色可供選擇,你可以挑選你喜歡的顏色或者定制自己的顏色。
如果不需要背景顏色,可以設(shè)置導(dǎo)航條的背景顏色為白色或完全透明。
如果需要在圖片背景中使用導(dǎo)航條,可以考慮使用白色文字的導(dǎo)航條。
導(dǎo)航條的布局
上面的導(dǎo)航條默認(rèn)使用了最簡單的布局,因此,在大屏幕上顯示時,導(dǎo)航條的兩邊會有空白。
如果你需要100%屏幕寬度的導(dǎo)航條,你可以直接刪除導(dǎo)航條的布局,這樣的話,它的兩邊就沒有空白了。
復(fù)雜的導(dǎo)航條
導(dǎo)航條的復(fù)雜之處在于其多變性,為了適應(yīng)各種環(huán)境,它必須保證自己的每一部分都是可以調(diào)整的。
剛開始學(xué)習(xí)使用導(dǎo)航條時,可能會控制不好,不能設(shè)計出想要的導(dǎo)航條。這時,建議你一步一步模仿,學(xué)習(xí)每種導(dǎo)航條的設(shè)計方法,然后去模板市場中找一些更復(fù)雜的導(dǎo)航條,看看它們是如何設(shè)計的。
導(dǎo)航條是我們學(xué)習(xí)的第一個比較復(fù)雜的組件,如果你能夠?qū)W會使用它,你以后就可以學(xué)會XEditor,XEditor的內(nèi)容非常的多,但它的復(fù)雜程度也就在于此。如果你現(xiàn)在不能學(xué)會導(dǎo)航條,也可以放心的繼續(xù)學(xué)習(xí)。現(xiàn)在不能解決的問題,也許將來會變得很容易。
關(guān)注該知乎賬號,了解更多信息。
總結(jié)
以上是生活随笔為你收集整理的bootstrap导航条文字颜色_XEditor基础组件:导航条的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2022年国债利率是多少,三年期3.35
- 下一篇: 查看分支编码_高性能编码规范驳斥(一)