首頁  >  文章  >  web前端  >  一系列Bootstrap導航條使用方法分享_javascript技巧

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

PHP中文网
PHP中文网原創
2016-05-16 15:03:051459瀏覽

本文包含了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)!

«上一页下一页»

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn