本發(fā)明涉及標簽頁技術領域，尤其是涉及一種基于bootstrap的多適用型標簽頁方法及技術。

背景技術：

bootstrap是twitter推出的基于html5和css3的一款前端框架，提供了優(yōu)雅的html和css規(guī)范，使前端開發(fā)更加規(guī)范化和快速化。標簽頁作為網(wǎng)站開發(fā)中經(jīng)常使用的一個功能，在bootstrap中也有相關技術，但是現(xiàn)有的技術適應性差，形式單一，不能滿足標簽頁的多功能需求，如現(xiàn)有的標簽布局為上下結(jié)構(gòu)：標簽在上內(nèi)容在下，且樣式都為bootstrap自帶的默認樣式。同時，隨著移動互聯(lián)網(wǎng)和智能手機的普及，越來越多的用戶會選擇移動終端而不是pc訪問互聯(lián)網(wǎng)，具體網(wǎng)站中標簽頁的適配是需要重點考慮的部分，當對bootstrap中分頁欄進行布局更改后，在移動端終端的適配問題隨之而來。另外，bootstrap框架中點擊標簽頁導航部分會切換到對應的標簽內(nèi)容，整個過程都是在同一個頁面中進行，無法實現(xiàn)其他內(nèi)容頁面的跳轉(zhuǎn)。

技術實現(xiàn)要素：

有鑒于此，本發(fā)明目的是提供一種適應性強、不同終端的適配問題小、以及鏈接跳轉(zhuǎn)方便的基于bootstrap的多適應性標簽頁系統(tǒng)。

為了解決上述技術問題，本發(fā)明的技術方案是：

一種基于bootstrap的多適應性標簽頁系統(tǒng)，對bootstrap標簽頁實現(xiàn)新的布局樣式，再對新的標簽頁進行適配，判斷標簽行是否需要鏈接到其他頁面，如果否，則結(jié)束配置連接，如果是，對鏈接進行配置，從而形成新的多適用性標簽頁，包括以下步驟：1.在布局上采用多種布局方式，可以選擇默認的上下布局樣式，也可以通過浮動自定義內(nèi)容和標簽的排列方法；2.對多種標簽頁做移動端適配；3.標簽頁默認的切換內(nèi)容都為本頁內(nèi)容。

進一步的，所述步驟1中的浮動自定義內(nèi)容和標簽的排列方式包括以下布局方式：

a、當需要左右布局的方式時，通過切換左邊標簽，右邊內(nèi)容部分會隨之相應更改。首先修改標簽部分的<li>元素的float屬性，每一個標簽為從上到下的順序排列，其次需要給整個標簽頁部分加父級塊元素，并分別對標簽欄所在的一級塊級元素和內(nèi)容欄所在的一級塊級元素設置為左浮動，這樣就完成了左右布局，根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，形成系統(tǒng)所需的風格；

b、當需要右左布局的方式時，即通過切換右邊標簽，左邊內(nèi)容部分相應切換。首先，修改標簽里<li>的float屬性，使標簽內(nèi)容呈上下方式排列。其次為分頁欄部分增加父級塊元素，分別設置標簽和內(nèi)容部分的第一塊級元素浮動為右浮動，這樣就完成了右左布局；根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，行成系統(tǒng)所需的風格；

c、當使用bootstrap提供的上下布局形式時，通常要求標簽欄所在行和內(nèi)容部分等長，即標簽均勻分布在標簽內(nèi)容上，首先，將標簽一行的第一級塊級元素寬度設置為和標簽內(nèi)容寬度一樣大小，再為每個標簽平均分配空間。但是通常情況下標簽個數(shù)并不是固定不變的，因此，這里平均分配空間需要動態(tài)進行，用js(javascript)技術里的遍歷獲取標簽個數(shù)，再為每個標簽動態(tài)分配空間；根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，行成系統(tǒng)所需的風格；

d、當布局為下上形式，即標簽欄在最下方而內(nèi)容在上方時，通過設置標簽欄的position實現(xiàn)標簽欄在底部的固定。若標簽欄所在行和內(nèi)容部分等長，同樣用js技術里的遍歷獲取標簽個數(shù)，再為每個標簽動態(tài)分配空間；根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，行成系統(tǒng)所需的風格。

進一步的，所述步驟2中為實現(xiàn)同比例放縮，所用的寬度為百分比的形式，對于左右型和右左型標簽頁，需要計算標簽欄和標簽內(nèi)容在整個標簽頁中所占的比例分別是多少，即為各自的寬度；使用@media查詢應用，根據(jù)不同移動端分辨率對字體、行間距、寬度等屬性進行相應的調(diào)整，確保界面不會因移動端的不同而發(fā)生變形的情況；對上下型和下上型標簽頁的適配，當標簽行<li>元素過多時，在移動端會出現(xiàn)所分配空間會特別狹小，在這種情況下的適配需要將上—下形式適配為左—右形式，在對應的media里做適配，參照步驟1中的左右格式。

進一步的，所述步驟3配置跳轉(zhuǎn)鏈接需要切換到其他的界面時，對<a>標簽里的href進行重新配置，將對應的標簽內(nèi)容的地址更換為其他頁面的地址。

本發(fā)明技術效果主要體現(xiàn)在以下方面：通過對bootstrap標簽頁進行新布局，并在基于bootstrap的多適用性標簽頁方法，根據(jù)不同的需求選擇不一樣的分頁欄布局，之后做適配，形成適用性強的標簽頁，然后對重新布局后的標簽頁做適配，之后判斷是否需要修改鏈接地址，最后配置鏈接，得到適應性強、不同終端的適配問題小、以及鏈接跳轉(zhuǎn)方便的基于bootstrap的多適應性標簽頁系統(tǒng)。

附圖說明

圖1為基于bootstrap的多適用性標簽頁的流程圖；

圖2為基于bootstrap的多適用性標簽頁方法。

具體實施方式

以下結(jié)合附圖1-2，對本發(fā)明的具體實施方式作進一步詳述，以使本發(fā)明技術方案更易于理解和掌握。

一種基于bootstrap的多適應性標簽頁系統(tǒng)，如圖1所示，對bootstrap標簽頁實現(xiàn)新的布局樣式，再對新的標簽頁進行適配，判斷標簽行是否需要鏈接到其他頁面，如果否，則結(jié)束配置連接，如果是，對鏈接進行配置，從而形成新的多適用性標簽頁，包括以下步驟：1.在布局上采用多種布局方式，可以選擇默認的上下布局樣式，也可以通過浮動自定義內(nèi)容和標簽的排列方法；2.對多種標簽頁做移動端適配；3.標簽頁默認的切換內(nèi)容都為本頁內(nèi)容。所述步驟2中為實現(xiàn)同比例放縮，所用的寬度為百分比的形式，對于左右型和右左型標簽頁，需要計算標簽欄和標簽內(nèi)容在整個標簽頁中所占的比例分別是多少，即為各自的寬度；使用@media查詢應用，根據(jù)不同移動端分辨率對字體、行間距、寬度等屬性進行相應的調(diào)整，確保界面不會因移動端的不同而發(fā)生變形的情況；對上下型和下上型標簽頁的適配，當標簽行<li>元素過多時，在移動端會出現(xiàn)所分配空間會特別狹小，在這種情況下的適配需要將上—下形式適配為左—右形式，在對應的media里做適配，參照步驟1中的左右格式。所述步驟3配置跳轉(zhuǎn)鏈接需要切換到其他的界面時，對<a>標簽里的href進行重新配置，將對應的標簽內(nèi)容的地址更換為其他頁面的地址。

如圖2所示，所述步驟1中的浮動自定義內(nèi)容和標簽的排列方式包括以下布局方式：

a、當需要左右布局的方式時，通過切換左邊標簽，右邊內(nèi)容部分會隨之相應更改。首先修改標簽部分的<li>元素的float屬性，每一個標簽為從上到下的順序排列，其次需要給整個標簽頁部分加父級塊元素，并分別對標簽欄所在的一級塊級元素和內(nèi)容欄所在的一級塊級元素設置為左浮動，這樣就完成了左右布局，根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，形成系統(tǒng)所需的風格；

b、當需要右左布局的方式時，即通過切換右邊標簽，左邊內(nèi)容部分相應切換。首先，修改標簽里<li>的float屬性，使標簽內(nèi)容呈上下方式排列。其次為分頁欄部分增加父級塊元素，分別設置標簽和內(nèi)容部分的第一塊級元素浮動為右浮動，這樣就完成了右左布局；根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，行成系統(tǒng)所需的風格；

c、當使用bootstrap提供的上下布局形式時，通常要求標簽欄所在行和內(nèi)容部分等長，即標簽均勻分布在標簽內(nèi)容上，首先，將標簽一行的第一級塊級元素寬度設置為和標簽內(nèi)容寬度一樣大小，再為每個標簽平均分配空間。但是通常情況下標簽個數(shù)并不是固定不變的，因此，這里平均分配空間需要動態(tài)進行，用js(javascript)技術里的遍歷獲取標簽個數(shù)，再為每個標簽動態(tài)分配空間；根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，行成系統(tǒng)所需的風格；

d、當布局為下上形式，即標簽欄在最下方而內(nèi)容在上方時，通過設置標簽欄的position實現(xiàn)標簽欄在底部的固定。若標簽欄所在行和內(nèi)容部分等長，同樣用js技術里的遍歷獲取標簽個數(shù)，再為每個標簽動態(tài)分配空間；根據(jù)不同的需求調(diào)整height、line-height、font、background、color等屬性，行成系統(tǒng)所需的風格。

本發(fā)明技術效果主要體現(xiàn)在以下方面：通過對bootstrap標簽頁進行新布局，并在基于bootstrap的多適用性標簽頁方法，根據(jù)不同的需求選擇不一樣的分頁欄布局，之后做適配，形成適用性強的標簽頁，然后對重新布局后的標簽頁做適配，之后判斷是否需要修改鏈接地址，最后配置鏈接，得到適應性強、不同終端的適配問題小、以及鏈接跳轉(zhuǎn)方便的基于bootstrap的多適應性標簽頁系統(tǒng)。

當然，以上只是本發(fā)明的典型實例，除此之外，本發(fā)明還可以有其它多種具體實施方式，凡采用等同替換或等效變換形成的技術方案，均落在本發(fā)明要求保護的范圍之內(nèi)。