一系列Bootstrap導航條使用方法分享_javascript技巧

本文包含了Bootstrap導航條基礎使用方法，供大家參考，具體內容如下

1、Bootstrap基礎導航樣式
Bootstrap框架中製作導航條主要透過「 .nav”樣式。預設的「.nav」樣式不提供預設的導覽樣式，必須附加另一個樣式才會有效，例如「nav-tabs」、「nav-pills」之類。例如右側程式碼編輯器中就有一個tab導覽條的例子，他的實作方法就是為ul標籤加入.nav和nav-tabs兩個類別樣式

HomeCSS3SassjQueryResponsive

2、Bootstrap基本導航條
在製作一個基本導航條時，主要分以下幾步：

第一步：首先在製作導覽的清單(

• )基礎上加上類別名稱「navbar-nav」

第二步：在列表外部添加一個容器（p），並且使用類別名稱“navbar”和“navbar-default”

“.navbar”樣式的主要功能就是設定左右padding和圓角等效果，但他和顏色相關的樣式沒有進行任何的設定

网站首页系列教程名师介绍成功案例关于我们

3、Bootstrap導航條加上標題

3、Bootstrap導航條加上標題

在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在🎜>在網頁製作中，常常在選單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現。

　　 导航条
 　网站首页系列教程名师介绍成功案例关于我们

4、Bootstrap導航條二級選單

在導覽列中加入二級選單也非常簡單

　　 导航条
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们

5、Bootstrap帶表單的導覽條

有的導覽條中會帶有搜尋表單,在Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類別名稱的表單。 navbar-left」讓表單左浮動，更好實現對齊。在Bootstrap框架中，也提供了「navbar-right」樣式，讓元素在導覽條靠右對齊。

　　 Bootstrap
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

6、Bootstrap導航條中的按鈕、文字和連結

Bootstrap框架的導覽條中除了使用navbar-brand -nav的ul和navbar-form之外，還可以使用其他元素。中的文字navbar-text

3).導航條中的普通連結navbar-link
但這三種樣式在框架中使用時受到一定的限制，需要和navbar-brand、navbar- nav配合起來使用。 🎜>

7、Bootstrap固定導航條

　　 Bootstrap
 　Navbar TextNavbar TextNavbar Text　　 Bootstrap
 　Navbar Text
  Navbar Text
  Navbar Text

很多情況之一，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在在行動端開發中較常見。固定在瀏覽器視窗底部

8、Bootstrap分頁導航

8、Bootstrap分頁導航

　…我是内容　…

帶頁碼的分頁導航，可能是最常見的一種分頁導航，特別是在列表頁內容超多的時候，會給用戶提供分頁的導航方式。 。 >在Bootstrap框架中，也可以透過幾個不同的情況來設定分頁按鈕大小。讓分頁導覽變小

Bootstrap框架除了提供帶頁碼的分頁導覽之外還提供了翻頁 這種分頁。導航常常在一些簡單的網站上看到，比如說個人博客，雜誌網站等。

在實際使用中，翻頁分頁導航和帶頁碼的分頁導航類似，為ul標籤加入pager類。

«12345»

預設情況之下，翻頁分頁導航是居中顯示，但有的時候我們需要一個居左，一個居右。 Bootstrap框架提供了兩個樣式

previous：讓「上一步」按鈕居左

next：讓「下一步」按鈕居右

………

以上就是一系列Bootstrap導航條使用方法分享_javascript技巧的內容，更多相關內容請關注PHP中文網（www.php.cn）！

«上一页下一页»