[發明專利]一種基于Bootstrap的多適應性標簽頁系統

在審

• 申請號: 201710307251.8
• 申請日: 2017-05-04
• 公開（公告）號: CN107145352A
• 公開（公告）日: 2017-09-08
• 發明（設計）人: 楊晶;吳立鋒;張喃喃
• 申請（專利權）人: 首都師范大學
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 暫無信息
• 代理人: 暫無信息

技術領域

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

背景技術

Bootstrap是twitter推出的基于HTML5和CSS3的一款前端框架，提供了優雅的HTML和CSS規范，使前端開發更加規范化和快速化。標簽頁作為網站開發中經常使用的一個功能，在Bootstrap中也有相關技術，但是現有的技術適應性差，形式單一，不能滿足標簽頁的多功能需求，如現有的標簽布局為上下結構：標簽在上內容在下，且樣式都為Bootstrap自帶的默認樣式。同時，隨著移動互聯網和智能手機的普及，越來越多的用戶會選擇移動終端而不是PC 訪問互聯網，具體網站中標簽頁的適配是需要重點考慮的部分，當對 Bootstrap中分頁欄進行布局更改后，在移動端終端的適配問題隨之而來。另外，Bootstrap框架中點擊標簽頁導航部分會切換到對應的標簽內容，整個過程都是在同一個頁面中進行，無法實現其他內容頁面的跳轉。

發明內容

有鑒于此，本發明目的是提供一種適應性強、不同終端的適配問題小、以及鏈接跳轉方便的基于Bootstrap的多適應性標簽頁系統。

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

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

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

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

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

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

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

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