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. Inno Setup入门（十一）——完成安装后执行某些程序

    有些时候我们的程序虽然能够很好的完成安装,但是程序的配置工作可能需要其他的一些程序来辅助完成,如果不执行这些程序,主程序就不能很好的完成工作,甚至不能完成工作,一个很明显的例子是,目前许多程序是通过N ...

  2. mongodb分片认证

    启动configsvr 1. 确保mongdb的configsvr是采用service模式启动的,即从/etc/init.d下的脚本启动的,其用户是mongod. 2. 确保mongod的配置文件完全 ...

  3. 自定义switch开关

    自定义一个switch开关 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. Android OpenGL ES（十四）gl10方法解析

    Android 支持 OpenGL 列表 1.GL 2.GL 10 3.GL 10 EXT 4.GL 11 5.GL 11 EXT 6.GL 11 ExtensionPack 我们将使用 GL10 这 ...

  5. POJ 2387

    最短路模板 dij 和 spfa 都可以 spfa: #include<stdio.h> #include<string.h> #include<cstring> ...

  6. Linux试题及答案

    一. 单选题: 1.添加一条静态路由,使到网络196.199.3通过eth2接口出去,用: A. route add -net 196.199.3.0 B. route add -net 196.19 ...

  7. 读《Ext.JS.4.First.Look》随笔

    Ext JS 4是最大的改革已经取得了Ext框架.这些变化包括一个新类系统,引入一个新的平台,许多API变化和改进,和新组件,如新图表和新画组件.Ext JS 4是更快,更稳定,易于使用.(注意:Ex ...

  8. Android多线程下安全访问数据库

    http://zhiwei.neatooo.com/blog/detail?blog=5343818a9d4869f0310000de github 原文https://github.com/dmyt ...

  9. elasticearch 安装

    1.elasticsearch需要安装jdk1.7以上 2.在ubuntu下不能以root运行,需要建立专门账号 添加组 root@ubuntu:~/Downloads/elasticsearch-/ ...

  10. 使用Java的BlockingQueue实现生产者-消费者

    http://tonl.iteye.com/blog/1936391 使用Java的BlockingQueue实现生产者-消费者 博客分类: Java JavaBlockingQueue阻塞队列  B ...