这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的):

html结构为:

        <div class="tab" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#tab1" data-toggle="tab">选项1</a>
</li>
<li><a href="#tab2" data-toggle="tab">选项2</a></li>
<li><a href="#tab3" data-toggle="tab">选项3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
这是选项1的内容
</div>
<div class="tab-pane fade" id="tab2">
这是选项2的内容
</div>
<div class="tab-pane fade" id="tab3">
这是选项3的内容
</div>
</div>
</div>

css样式为:

    <style>
@media only screen and (max-width: 480px) {
.tab .nav-tabs {
border-bottom: 0 none;
background: #eaeaea;
}
.tab .nav-tabs li a {
background: transparent;
border-radius:;
font-size: 16px;
border: none;
color: #333;
padding: 12px 22px;
}
.tab .nav-tabs li.active a{
border:;
border-left: 1px solid lightgray;
border-right:;
border-bottom:;
color: orange;
}
.tab .nav-tabs li:first-child.active a{
border-left:;
}
.tab .nav-tabs li.active a:after {
content: "";
position: absolute;
left: 45%;
bottom: -14px;
border: 7px solid transparent;
border-top: 7px solid #e67e22;
}
.tab .nav-tabs{
width: 100%;
background: transparent;
}
/* 设置选项卡的宽度,这里要根据选项卡的个数手动设置下*/
.tab .nav-tabs li {
width:33.3%;
background: transparent;
}
.tab .nav-tabs li a {
text-align: center;
margin-right:;
border: 1px solid lightgray;
border-top:;
border-right:;
}
.tab .nav-tabs li:first-child a {
border-bottom-left-radius:;
border-left:;
}
.tab .nav-tabs li.active a:after {
border: none;
}
}
</style>

基于bootstrap的手机界面tab样式调整的更多相关文章

  1. 基于 bootstrap 的数据展示--bootgrid 样式改动。

    bootgrid 的官网案例 http://www.jquery-bootgrid.com/Examples 官方demo 样式 基于项目须要,取消了一些不须要 的功能,改动了源代码 最后样式成了这样 ...

  2. 基于bootstrap 在同一个界面弹出不同的模态框

    同一个页面如何操作多个模态框的弹出 <button class="btn btn-info" data-toggle="modal" data-targe ...

  3. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  4. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  6. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

  7. 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  8. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  9. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

随机推荐

  1. idea没有tomcat选项在setting也没有Application Servers

    原因:dea未正常关闭,重启后发现,Tomcat的选项不见了,File->Setting->Build,Excution,Deployment里面Application Servers也不 ...

  2. golang io.ReadFull

    buf := make([]byte, 10, 10) file, _ := os.Open("./data.txt") n, err := io.ReadFull(file, b ...

  3. Web性能优化之雅虎军规

    相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...

  4. Android规划周期任务

    问题:应用总要周期性的执行某项任务,例如检查服务器上的更新或者提醒用户做某些事情. 解决方案:用AlarmManager来管理和执行任务.AlarmManager可用于计划未来的单次或重复操作,甚至在 ...

  5. orcale 之函数

    我们知道存储过程的调用是一条 PL/SQL 语句.那么对于一些表达式我们用什么呢?这里函数的功能就会体现出来了. 函数和过程在创建方式上有很多的类似地方,也是编译后放入内存中以供用户使用,只不过函数调 ...

  6. Visual Studio2017中如何让ADO.NET实体数据模型[EntityFramework]支持MariaDB&MySQL数据源

    近期由于工作需要,需要重新修改设计系统的ADO.NET实体数据模型.edmx文件中间,在完成实际中途遇到一些实际使用问题,特此记录. 1. Visual Studio 2017 无法以实体设计模式打开 ...

  7. 进入与退出anconda虚拟环境

    # 进入虚拟环境,使用 # # $ conda activate spider-venv # # 退出虚拟环境,使用 # # $ conda deactivate

  8. jstl缺包时的报错

    jsp中:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  报错: ...

  9. VMware workstation 虚拟机安装Windows Server 2008 r2

    问题秒速: VMware workstation 虚拟机安装Windows Server 2008 r2,配置好参数后,选择开机,报错,错误如图:

  10. CSS 文字超长省略显示并隐藏超长部分

    1.包含文字的元素必须是块级元素,不是块级元素使用display:block使其具有块级元素属性: 2.具备上述基本条件后,css样式如下: { display: block; max-width: ...