全面接觸神奇的Bootstrap導航條實戰篇

2022-10-08 14:51:12 字數 1151 閱讀 3850

導航條(n**bar)在bootstrap中是乙個獨立元件,導航條(n**bar)和導航(n**)在bootstrap中是有明顯的區別的。在導航條(n**bar)中有乙個背景色、而且導航條可以是純鏈結、表單、表單和導航一起結合等多種形式。

1.實戰一-帶二級選單和表單的導航條

導航條css/bootstrap.min.css">

標題

效果圖如下:

bootstrap的導航條中除了使用n**bar-brand中的a元素和n**bar-n**的ul和n**bar-form之外,還可以使用其他元素:

1)導航條中的按鈕n**bar-btn

2)導航條中的文字n**bar-text

3)導航條中的普通鏈結n**bar-link

2.實戰二-固定導航條

標題程式設計客棧-bottom" role="n**igation">

標題網頁正文內容

效果圖如下:

3.實戰三-響應式導航條

效果圖如下:

有的時候會有需要反色的情況,bootstrap為此提供了反色導航條,只是將n**bar-deafult類名換成n**bar-inverse,然後導航條的背景色和文字的顏色就會修改。

4.實戰四-分頁導航

1)帶頁碼的分頁導航

效果圖如下:

2)翻頁分頁導航

程式設計客棧 class="pager">

效果圖如下:

5.實戰五-標籤

在一些web頁面中常常會新增乙個標籤用來告訴使用者一些額外的資訊,例如:

bootstrap中將這樣的效果提取出來成為乙個標籤元件,並且以「.label」樣式來實現高亮顯示。和按鈕元素button類似,label樣式也提供了多種顏色,主要是通過這幾個類名來修改背景顏色和文字顏色:

效果圖如下:

6.實戰六-徽章

徽章多用於提醒有多少未讀訊息這樣的需求,在bootstrap中,使用「badge」樣式來實現徽章效果。

標題  

效果圖如下:

7.實戰七-帶動畫過渡的彈出框

帶動畫過的渡彈出框

彈出窗標題

hixowpiurb

彈出窗主體內容

效果圖如下:

本文標題: 全面接觸神奇的bootstrap導航條實戰篇

本文位址:

全面接觸SQL語法 3

order by條件語句 此條件子句,通常與select語句合併使用目的是將查詢的結果,依照指定字段加以排序。select fieldlist from table where selectcriteria order by field asc desc field2 asc desc fieldl...

全面接觸SQL語法 6

來 源 網際網路 作 者 不祥 發表日期 2005 12 17 16 14 11 資料庫 全面接觸sql語法 6 檢視方式 檢視 大字 中字 小字 雙擊滾屏 正 文 全面接觸sql語法 6 sql與資料庫的維護 的建立 將sql中的基本語法作了一番介紹以後,但大多是偏向於資料庫資料的查詢與過濾,但實...

全面接觸SQL語法 2

來 源 網際網路 作 者 不祥 發表日期 2005 12 17 16 10 32 資料庫 全面接觸sql語法 2 檢視方式 檢視 大字 中字 小字 雙擊滾屏 正 文 全面接觸sql語法 2 例如下面這兩個例子將會具有相同的效果,都會從職員 中返回所有欄位的資料。例如 若是我們要查詢出職員 中的所有記...