1、bootstrap给我们提供了标签页

　　细细看了一下bootstrap的标签页源码，对tab选项卡有了更深的理解。其实说来也简单，以前自己写js和css时没有意识到整体的划分。就是分为两部分：一部分是标签页头部，一部分就是标签页展示内容区域。

2、使用bootstrap的自带样式

3、自带样式还是有点难看，需要自己修改一下

bootstrap建立响应式网站——tab选项卡的更多相关文章

  1. 使用bootstrap建立响应式网页——头部导航栏

    1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px     ...

  2. Metronic-最优秀的基于Bootstrap的响应式网站模版

    在所有我看到过的基于Bootstrap的网站模版中,Metronic是我认为最优秀的,其外观之友好.功能之全面让人惊叹.Metronic 是一个自适应的HTML模版,提供后台管理模版和前端内容网页模版 ...

  3. 使用bootstrap建立响应式网页——通栏轮播图（carousel）

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  4. 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

    本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...

  5. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  6. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  7. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

  8. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  9. 使用Bootstrap 3开发响应式网站实践02,轮播

    本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...

随机推荐

  1. 图片应该放在drawable-hdpi下不要放在drawable下

    图片应该放在drawable-hdpi下或者mipmap-hdpi 不要放在drawable下,要不然显示有些不同

  2. AFHTTPSessionManager

    // 取消所有请求 [self.manager.tasks makeObjectsPerformSelector:@selector(cancel)]; 使用场景: 比如一个界面有下拉刷新和上拉加载两 ...

  3. 初识Ubuntu

    刚刚装好bantu 16.10就遇到了好多问题,记录一下 一.卸载一些用不到的软件. 1.su认证失败 sudo passwd //输入命令,然后修改密码即可 2.卸载libreoffice sudo ...

  4. myeclipse中常用的快捷键

    存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+\(Eclipse3已经都合并到Ctrl+/了) 代码辅助 Alt+/ 快速修复 Ctrl+1 代码格式化 Ctrl+Shi ...

  5. hdu 2544 最短路 (spfa)

    最短路 Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  6. LightOJ 1370 Bi-shoe and Phi-shoe（欧拉函数）

    题意:题目给出一个欧拉函数值F(X),让我们求>=这个函数值的最小数N,使得F(N) >= F(X); 分析:这个题目有两种做法.第一种,暴力打出欧拉函数表,然后将它调整成有序的,再建立一 ...

  7. cocos2d-x 3.x随机数

    1.使用标准库std::rand()函数 rand();//产生0~RAND_MAX(0x7fff=32767)间的int类型随机数 rand()%;//产生0~5间的int类型随机数,不包括5 2. ...

  8. haxe 嵌入swf 读取里面的内容

    首先安装 swf 库,运行命令: 命令提示符: haxelib install swf 在project.xml 加上 <!-- 导入swf类库 --> <haxelib name= ...

  9. HDU - 5753 多校联萌3-2

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5753 Sample Input Sample Output 6.000000 52.833333 分析 ...

  10. 使用PHP Socket 编程模拟Http post和get请求

    这里给大家分享一段使用PHP Socket 编程模拟Http post和get请求的代码,非常的实用,结尾部分我们再讨论下php模拟http请求的几种方法. <?php /** * 使用PHP ...