一种基于Bootstrap的多适应性标签页系统技术方案

本发明专利技术公开一种基于Bootstrap的多适应性标签页系统，对Bootstrap标签页实现新的布局样式，再对新的标签页进行适配，判断标签行是否需要链接到其他页面，如果否，则结束配置连接，如果是，对链接进行配置，从而形成新的多适用性标签页，包括以下步骤：1.在布局上采用多种布局方式，可以选择默认的上下布局样式，也可以通过浮动自定义内容和标签的排列方法；2.对多种标签页做移动端适配；3.标签页默认的切换内容都为本页内容；该标签页系统具有适应性强、不同终端的适配问题小、以及链接跳转方便的优点。

【技术实现步骤摘要】
一种基于Bootstrap的多适应性标签页系统
本专利技术涉及标签页
，尤其是涉及一种基于Bootstrap的多适用型标签页方法及技术。
技术介绍
Bootstrap是twitter推出的基于HTML5和CSS3的一款前端框架，提供了优雅的HTML和CSS规范，使前端开发更加规范化和快速化。标签页作为网站开发中经常使用的一个功能，在Bootstrap中也有相关技术，但是现有的技术适应性差，形式单一，不能满足标签页的多功能需求，如现有的标签布局为上下结构：标签在上内容在下，且样式都为Bootstrap自带的默认样式。同时，随着移动互联网和智能手机的普及，越来越多的用户会选择移动终端而不是PC访问互联网，具体网站中标签页的适配是需要重点考虑的部分，当对Bootstrap中分页栏进行布局更改后，在移动端终端的适配问题随之而来。另外，Bootstrap框架中点击标签页导航部分会切换到对应的标签内容，整个过程都是在同一个页面中进行，无法实现其他内容页面的跳转。
技术实现思路
有鉴于此，本专利技术目的是提供一种适应性强、不同终端的适配问题小、以及链接跳转方便的基于Bootstrap的多适应性标本文档来自技高网...

【技术保护点】
一种基于Bootstrap的多适应性标签页系统，其特征在于：对Bootstrap标签页实现新的布局样式，再对新的标签页进行适配，判断标签行是否需要链接到其他页面，如果否，则结束配置连接，如果是，对链接进行配置，从而形成新的多适用性标签页，包括以下步骤：1.在布局上采用多种布局方式，可以选择默认的上下布局样式，也可以通过浮动自定义内容和标签的排列方法；2.对多种标签页做移动端适配；3.标签页默认的切换内容都为本页内容。

【技术特征摘要】
1.一种基于Bootstrap的多适应性标签页系统，其特征在于：对Bootstrap标签页实现新的布局样式，再对新的标签页进行适配，判断标签行是否需要链接到其他页面，如果否，则结束配置连接，如果是，对链接进行配置，从而形成新的多适用性标签页，包括以下步骤：1.在布局上采用多种布局方式，可以选择默认的上下布局样式，也可以通过浮动自定义内容和标签的排列方法；2.对多种标签页做移动端适配；3.标签页默认的切换内容都为本页内容。2.如权利要求1中所述的一种基于Bootstrap的多适应性标签页系统，其特征在于：所述步骤1中的浮动自定义内容和标签的排列方式包括以下布局方式：A、当需要左右布局的方式时，通过切换左边标签，右边内容部分会随之相应更改。首先修改标签部分的<li>元素的float属性，每一个标签为从上到下的顺序排列，其次需要给整个标签页部分加父级块元素，并分别对标签栏所在的一级块级元素和内容栏所在的一级块级元素设置为左浮动，这样就完成了左右布局，根据不同的需求调整height、line-height、font、background、color等属性，形成系统所需的风格；B、当需要右左布局的方式时，即通过切换右边标签，左边内容部分相应切换。首先，修改标签里<li>的float属性，使标签内容呈上下方式排列。其次为分页栏部分增加父级块元素，分别设置标签和内容部分的第一块级元素浮动为右浮动，这样就完成了右左布局；根据不同的需求调整height、line-height、font、background、color等属性，行成系统所需的风格；C、当使用Bootstrap提供的上下布局形式时，通常要求标签栏所在行和内容部分等长，即标签均匀分布在标签内容上，首先，将标签...

【专利技术属性】
技术研发人员：杨晶，吴立锋，张喃喃，
申请(专利权)人：首都师范大学，
类型：发明
国别省市：北京,11