一种基于Bootstrap的多适应性标签页系统的制作方法

本发明涉及标签页技术领域，尤其是涉及一种基于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中的左右格式。

进一步的，所述步骤3配置跳转链接需要切换到其他的界面时，对<a>标签里的href进行重新配置，将对应的标签内容的地址更换为其他页面的地址。

本发明技术效果主要体现在以下方面：通过对bootstrap标签页进行新布局，并在基于bootstrap的多适用性标签页方法，根据不同的需求选择不一样的分页栏布局，之后做适配，形成适用性强的标签页，然后对重新布局后的标签页做适配，之后判断是否需要修改链接地址，最后配置链接，得到适应性强、不同终端的适配问题小、以及链接跳转方便的基于bootstrap的多适应性标签页系统。

附图说明

图1为基于bootstrap的多适用性标签页的流程图；

图2为基于bootstrap的多适用性标签页方法。

具体实施方式

以下结合附图1-2，对本发明的具体实施方式作进一步详述，以使本发明技术方案更易于理解和掌握。

一种基于bootstrap的多适应性标签页系统，如图1所示，对bootstrap标签页实现新的布局样式，再对新的标签页进行适配，判断标签行是否需要链接到其他页面，如果否，则结束配置连接，如果是，对链接进行配置，从而形成新的多适用性标签页，包括以下步骤：1.在布局上采用多种布局方式，可以选择默认的上下布局样式，也可以通过浮动自定义内容和标签的排列方法；2.对多种标签页做移动端适配；3.标签页默认的切换内容都为本页内容。所述步骤2中为实现同比例放缩，所用的宽度为百分比的形式，对于左右型和右左型标签页，需要计算标签栏和标签内容在整个标签页中所占的比例分别是多少，即为各自的宽度；使用@media查询应用，根据不同移动端分辨率对字体、行间距、宽度等属性进行相应的调整，确保界面不会因移动端的不同而发生变形的情况；对上下型和下上型标签页的适配，当标签行<li>元素过多时，在移动端会出现所分配空间会特别狭小，在这种情况下的适配需要将上—下形式适配为左—右形式，在对应的media里做适配，参照步骤1中的左右格式。所述步骤3配置跳转链接需要切换到其他的界面时，对<a>标签里的href进行重新配置，将对应的标签内容的地址更换为其他页面的地址。

如图2所示，所述步骤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等属性，行成系统所需的风格。

本发明技术效果主要体现在以下方面：通过对bootstrap标签页进行新布局，并在基于bootstrap的多适用性标签页方法，根据不同的需求选择不一样的分页栏布局，之后做适配，形成适用性强的标签页，然后对重新布局后的标签页做适配，之后判断是否需要修改链接地址，最后配置链接，得到适应性强、不同终端的适配问题小、以及链接跳转方便的基于bootstrap的多适应性标签页系统。

当然，以上只是本发明的典型实例，除此之外，本发明还可以有其它多种具体实施方式，凡采用等同替换或等效变换形成的技术方案，均落在本发明要求保护的范围之内。